// 
//     Licensed to the Apache Software Foundation (ASF) under one
//     or more contributor license agreements.  See the NOTICE file
//     distributed with this work for additional information
//     regarding copyright ownership.  The ASF licenses this file
//     to you under the Apache License, Version 2.0 (the
//     "License"); you may not use this file except in compliance
//     with the License.  You may obtain a copy of the License at
// 
//       http://www.apache.org/licenses/LICENSE-2.0
// 
//     Unless required by applicable law or agreed to in writing,
//     software distributed under the License is distributed on an
//     "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
//     KIND, either express or implied.  See the License for the
//     specific language governing permissions and limitations
//     under the License.
//

= 在 HTML5 应用程序中使用 CSS 样式表
:jbake-type: tutorial
:jbake-tags: tutorials 
:jbake-status: published
:icons: font
:syntax: true
:source-highlighter: pygments
:toc: left
:toc-title:
:description: 在 HTML5 应用程序中使用 CSS 样式表 - Apache NetBeans
:keywords: Apache NetBeans, Tutorials, 在 HTML5 应用程序中使用 CSS 样式表

HTML5 应用程序通常结合了 HTML、CSS 和 JavaScript，用于创建在浏览器中运行并显示在多种设备（包括智能手机、平板电脑和笔记本电脑）上的应用程序。本文档说明了 IDE 如何为您提供工具来帮助使用 CSS 规则以修改应用程序的布局。IDE 还支持在应用程序中创建和使用 Sass 和 LESS CSS 预处理程序。

用于 Chrome 浏览器的 NetBeans Connector 扩展可帮助您查看应用程序在不同设备上的显示情况。该扩展实现了 Chrome 浏览器与 IDE 彼此之间的通信。使用“在 NetBeans 中检查”模式，您只需在浏览器中选择元素即可在源代码中找到它们。在浏览器中选择元素之后，可以使用 IDE 来查看应用到该元素的 CSS 规则和属性。

有关如何为 Chrome 浏览器安装 NetBeans Connector 扩展的详细信息，请参阅教程 link:html5-gettingstarted.html[+HTML5 应用程序入门+]。

要观看此教程的截屏视频，请参阅link:../web/html5-css-screencast.html[+在 HTML5 应用程序中使用 CSS 样式表的视频+]。


image::images/netbeans-stamp-80-74.png[title="此页上的内容适用于 NetBeans IDE 7.4 和 8.0"]


==== 要完成本教程，需要使用以下资源。

|===
|软件或资源 |要求的版本 

|link:https://netbeans.org/downloads/index.html[+NetBeans IDE，Java+] |7.4, 8.0 

|link:http://www.oracle.com/technetwork/java/javase/downloads/index.html[+Java 开发工具包 (JDK)+] |7 或 8 

|link:http://www.google.com/chrome[+Chrome 浏览器+] |-- 

|link:https://chrome.google.com/webstore/detail/netbeans-connector/hafdlehgocfcodbgjnpecfajgkeejnaa?utm_source=chrome-ntp-icon[+用于 Chrome 的 NetBeans Connector 扩展+] |1.1 或更新版本 

|link:https://netbeans.org/projects/samples/downloads/download/Samples/Web%20Client/HTML5DemoSiteTemplate.zip[+HTML5DemoSiteTemplate.zip+] |-- 

|CSS 预处理程序 |link:http://sass-lang.com/install[+Sass+] 或
link:http://lesscss.org/[+LESS+] 
|===

*注：*

* link:https://netbeans.org/projects/samples/downloads/download/Samples/Web%20Client/HTML5DemoSiteTemplate.zip[+HTML5DemoSiteTemplate.zip+] 是创建项目时将要使用的站点模板。
* 如果要将您的项目与工作解决方案进行比较，可以下载已完成项目的link:https://netbeans.org/projects/samples/downloads/download/Samples/Web%20Client/HTML5DemoCssSiteTemplate.zip[+站点模板+]。
* 本文档假定您具备 HTML、CSS 和 JavaScript 的一些基本知识或编程经验。


== 创建 HTML5 应用程序

在本教程中，您将使用站点模板来创建 HTML5 项目。您在此教程中使用的站点模板是您在 link:html5-gettingstarted.html[+HTML5 应用程序入门+]教程中保存的同一个站点模板。如果您执行了入门教程中的步骤，则可以使用上一部分中保存的站点模板。此外，您可以下载 HTML5DemoSiteTemplate.zip 站点模板。

执行以下步骤可以从站点模板创建应用程序。

1. 下载 HTML5 站点模板 (link:https://netbeans.org/projects/samples/downloads/download/Samples/Web%20Client/HTML5DemoSiteTemplate.zip[+HTML5DemoSiteTemplate+])
2. 从主菜单中选择 "File"（文件）> "New Project"（新建项目）（Ctrl-Shift-N 组合键；在 Mac 上为 ⌘-Shift-N 组合键），以打开新建项目向导。
3. 选择 *HTML5* 类别，然后选择 *HTML5 Application*（HTML5 应用程序）。单击 "Next"（下一步）。
4. 键入 *HTML5DemoCss* 作为项目名称，并指定位置。单击 "Next"（下一步）。
5. 选择 *Select Template（选择模板）*选项并单击 "Browse"（浏览）以查找站点模板 ( ``HTML5DemoSiteTemplate.zip`` )。单击 "Finish"（完成）。
image::images/html5-css-newproject.png[title="在 &quot;New HTML5 Application&quot;（新建 HTML5 应用程序）向导中指定站点模板"]

单击 "Finish"（完成）时，IDE 将创建项目并在编辑器中打开  ``index.html``  文件。在 "Projects"（项目）窗口中，可以看到项目包含  ``index.html`` 、一个 CSS 样式表、一些 JavaScript 库和一些图像。IDE 中还将打开 "CSS Rules"（CSS 规则）和 "Navigator"（导航器）窗口。


== 在不同设备上查看应用程序

在本教程中，您将在安装了 NetBeans Connector 扩展的 Chrome 浏览器中运行应用程序。安装扩展之后，您可以在浏览器中使用 NetBeans 菜单以方便地调整浏览器窗口大小，用于查看应用程序在一些常用设备上的显示。

*注：*对于本教程，建议使用 Chrome 浏览器并安装用于 Chrome 的 NetBeans 扩展。有关如何安装 NetBeans Connector 扩展的详细信息，请参阅教程 link:html5-gettingstarted.html[+HTML5 应用程序入门+]。

执行以下步骤以在 Chrome 浏览器中运行应用程序。

1. 确认在工具栏的下拉列表中选择了 "Chrome with NetBeans Integration"（带有 NetBeans 集成的 Chrome）。
2. 在工具栏中单击 "Run"（运行）按钮可以在 Chrome 浏览器中运行项目。

在浏览器中，可以看到简单的可扩展菜单。

您可以看到，浏览器标签中有一个黄色的栏，通知您 NetBeans Connector 正在调试标签。在黄色栏可见时，IDE 和浏览器已连接，能够彼此通信。从 IDE 启动 HTML5 应用程序时，JavaScript 调试器将自动启用。将对文件所做的更改保存到 CSS 样式表时，您无需重新加载页，因为浏览器窗口将自动更新以显示更改。

如果选择关闭黄色栏或者单击 "Cancel"（取消），您将断开 IDE 与浏览器之间的连接。如果断开了连接，则需要从 IDE 启动 HTML5 应用程序。

您还可以看到，NetBeans 图标在浏览器的 URL 位置字段中可见。您可以单击图标以打开提供了各种选项的菜单，用于更改浏览器的显示大小和启用在 NetBeans 中检查模式。

3. 单击浏览器 URL 字段中的 "Open NetBeans Action"（打开 NetBeans 操作）图标以打开 NetBeans 菜单，然后在菜单中选择 "Tablet Portrait"（平板电脑纵向）。

窗口的大小将调整为平板电脑浏览器在纵向模式下的大小。菜单扩展以填充右侧，整个菜单可见。

image::images/html5-css-tabletbrowser1.png[title="浏览器中的平板电脑纵向显示大小"]

如果在菜单中选择了默认设备之一，则浏览器窗口将调整到该设备尺寸的大小。这使您可以查看应用程序在所选设备上的外观如何。HTML5 应用程序通常设计为可以根据查看这些应用程序所用设备的屏幕大小做出响应。您可以使用响应屏幕大小的 JavaScript 和 CSS 规则并修改应用程序的显示方式，这样就可以针对设备优化布局。

4. 再次单击 NetBeans 图标并在 NetBeans 菜单中选择 "Smartphone Landscape"（智能手机横向）。
image::images/html5-css-tabletbrowser2.png[title="在浏览器的 NetBeans 菜单中选择 &quot;Smartphone Landscape&quot;（智能手机横向）"]

窗口的大小将调整为智能手机横向的大小，您可以看到，需要滚动才能看到菜单的底部。

image::images/html5-css-smartphonebrowser1.png[title="浏览器窗口大小调整为智能手机横向大小"]

在下一部分中，您将修改样式表，使其无需在智能手机横向视图上滚动即可查看整个菜单。


== 修改布局

可以对页元素进行一些小的更改，这样就无需滚动。这些更改只应在浏览器的大小与智能手机的大小相同或更小时应用。当方向为横向视图时，智能手机的浏览器窗口为 480 像素宽，320 像素高。


=== 创建媒体样式表

在本练习中，您将创建新的样式表，并为具有智能手机显示屏的设备添加媒体规则。然后，可以向媒体规则添加一些 CSS 规则。

1. 在“项目”窗口中，右键单击  ``css``  文件夹节点，然后在弹出菜单中选择“新建”>“级联样式表”。
2. 键入 *mycss* 作为文件名。单击 "Finish"（完成）。

单击“完成”时，新样式表将在编辑器中打开。

3. 将以下媒体规则添加到样式表中。

[source,java]
----

/*My rule for smartphone*/
@media (max-width: 480px) {

}
----

您在方括号之间为此规则添加的任意 CSS 规则仅在浏览器尺寸的宽度小于等于 480 像素时应用。

为可能经常使用的代码片段创建代码模板。您可以在“选项”窗口中“编辑器”类别的“代码模板”标签中创建 CSS 代码模板。

4. 保存所做的更改。
5. 在编辑器中打开  ``index.html`` 。
6. 将以下样式表链接添加到  ``index.html``  的  ``<head>``  标记之间。保存所做的更改。

[source,java]
----

<link type="text/css" rel="stylesheet" href="css/mycss.css">
----

可以使用编辑器中的代码完成功能来帮助您添加样式表链接。

 
=== 添加 CSS 规则

1. 在 Chrome 浏览器中，单击 NetBeans 图标并在菜单中选择 "Inspect in NetBeans Mode"（在 NetBeans 中检查模式）。
2. 单击浏览器中的图像。

在检查模式下选中了某个元素时，该元素将突出显示。在本屏幕快照中，您可以看到图像以蓝色突出显示。

image::images/html5-css-selectimage.png[title="在 Chrome 浏览器中选择的图像"]

在 IDE 中，您可以看到应用到  ``img``  的 CSS 规则和属性在 "CSS Styles"（CSS 样式）窗口中列出。"CSS Styles"（CSS 样式）窗口的 "Selection"（选择）标签有三个窗格，提供有关所选元素的详细信息。

image::images/html5-css-styleswindow1.png[title="选择了图像时的 &quot;CSS Styles&quot;（CSS 样式）窗口"]


==== 顶部窗格

在窗口顶部的 "Properties"（属性）窗格中，您可以看到应用到  ``img``  元素的六个属性-值对。其中三对（ ``border`` 、 ``float``  和  ``margin`` ）通过  ``img``  元素的 CSS 规则应用。由于  ``img``  元素继承了类选择器的属性（这些选择器应用到包含  ``img``  元素的对象），因此应用了剩下的三对。您可以在 "Navigator"（导航器）窗口中清楚看到 DOM 的结构。当前在 "CSS Styles"（CSS 样式）窗口的 "Properties"（属性）窗格中选择了  ``border``  属性。


==== 中间窗格

在中间 "Applied Styles"（应用的样式）窗格中，您可以看到在定义  ``img``  元素的 CSS 规则中指定了  ``border``  属性和值。该规则位于  ``basecss.css``  文件的第 12 行。单击窗格中的位置可以在编辑器中打开样式表。


==== 底部窗格

底部窗格显示在 CSS 规则中为在中间窗格中选择的规则定义的所有属性。在本例中，您可以看到  ``img``  的规则定义了  ``border`` 、 ``float``  和  ``margin-right``  属性。


3. 在 "CSS Styles"（CSS 样式）窗口中单击 "Document"（文档）标签。
4. 选择  ``css/mycss.css``  节点，然后单击 "Edit CSS Rules"（编辑 CSS 规则）按钮 (image::images/newcssrule.png[title="&quot;Edit CSS Rules&quot;（编辑 CSS 规则）按钮"]) 窗口以打开 "Edit CSS Rules"（编辑 CSS 规则）对话框。
image::images/html5-css-styleswindow2.png[title="&quot;Edit CSS Rules&quot;（编辑 CSS 规则）对话框"]
5. 为 "Selector Type"（选择器类型）选择 "Element"（元素），为 "Selector"（选择器）选择类型 *img*。
6. 为 "Style Sheet"（样式表）选择  ``css/mycss.css`` ，为 "At-Rule"（@ 规则）选择 *(max-width:480px)*。单击 "OK"（确定）。
image::images/html5-css-editcssrules.png[title="&quot;Edit CSS Rules&quot;（编辑 CSS 规则）对话框"]

单击 "OK"（确定）时，IDE 将在媒体规则的方括号之间，为  ``css/mycss.css``  样式表中的  ``img``  创建 CSS 规则。新规则现在列出在 "Applied Styles"（应用的样式）窗格中。

7. 在 "CSS Styles"（CSS 样式）窗口中单击 "Selection"（选择）标签。

您可以看到  ``img``  有两个 CSS 规则。一个规则位于  ``mycss.css``  中，一个规则位于  ``basecss.css``  中。

8. 选择新的  ``img``  规则（在 "CSS Styles"（CSS 样式）窗口的 "Applied Styles"（应用的样式）窗格的  ``mycss.css``  中定义）。
image::images/html5-css-styleswindow2.png[title="&quot;CSS Styles&quot;（CSS 样式）窗口中所选元素的样式"]

在窗口的底部窗格中，可以看到该规则没有任何属性。

9. 在 "CSS Styles"（CSS 样式）窗口底部窗格的左列中单击 "Add Property"（添加属性），然后键入 *width*。
10. 在  ``width``  属性旁边的右列中键入 *90px*，然后按键盘上的回车键。
image::images/html5-css-styleswindow3.png[title="&quot;CSS Styles&quot;（CSS 样式）窗口的 &quot;Image Properties&quot;（图像属性）窗格"]

当您开始在值列中键入内容时，您会看到一个下拉列表显示  ``width``  属性的常用值。

按回车键时，浏览器中图像的大小将自动调整为 90 像素宽。IDE 将属性添加到  ``mycss.css``  样式表中的 CSS 规则。在编辑器中，样式表不应包含以下规则。


[source,java]
----

/*My rule for smartphone*/
@media (max-width: 480px) {

    img {
        width: 90px;
    }

}
----

由于菜单仍不适合窗口，还需要对样式表做一些其他更改。

11. 在浏览器窗口中选择无序列表 ( ``<ul>`` ) 元素。
image::images/html5-css-smartphonebrowser2.png[title="列出在浏览器中选择的元素"]

选择元素时，在 "Browser DOM"（浏览器 DOM）窗口中可以看到选择了  ``<ul>`` ，在 "CSS Styles"（CSS 样式）窗口中可以看到应用到该元素的样式。

image::images/html5-css-browserdom.png[title="列出在 &quot;Browser DOM&quot;（浏览器 DOM）窗口中选择的元素"]

在 "CSS Styles"（CSS 样式）窗口中选择  ``font-family``  时，可以看到在  ``.ui-widget``  类选择器中定义了  ``font-family``  属性和值。

12. 在编辑器中单击  ``index.html``  文件，然后在 "CSS Styles"（CSS 样式）窗口中单击 "Document"（文档）标签。
13. 在 "CSS Styles"（CSS 样式）窗口中展开  ``css/mycss.css``  节点。
image::images/html5-css-styleswindow4.png[title="在 &quot;CSS Styles&quot;（CSS 样式）窗口的 &quot;Document&quot;（文档）标签中选择的样式表"]
14. 在 "CSS Styles"（CSS 样式）窗口中，单击 "Edit CSS Rules"（编辑 CSS 规则）按钮 (image::images/newcssrule.png[title="&quot;Edit CSS Rules&quot;（编辑 CSS 规则）按钮"]) 可打开 "Edit CSS Rules"（编辑 CSS 规则）对话框。
15. 为 "Selector Type"（选择器类型）选择 "Class"（类），为 "Selector"（选择器）选择类型 *ui-widget*。
16. 为 "Style Sheet"（样式表）选择 * ``css/mycss.css`` *，为 "At-Rule"（@ 规则）选择 *(max-width:480px)*。单击 "OK"（确定）。

单击 "OK"（确定）时，IDE 将新规则添加到  ``mycss.css``  样式表并在编辑器中打开文件。如果文件未在编辑器中打开，您可以在 "CSS Styles"（CSS 样式）窗口中双击  ``css/mycss.css``  节点下的  ``ui-widget``  规则以打开样式表。光标放在样式表中包含规则的行内。

17. 向  ``ui-widget``  的规则添加以下属性和值（粗体）。

[source,java]
----

.ui-widget {
    *font-size: 0.9em;*
}
----

更改样式表中的值时，浏览器窗口中的页将自动更新。

您可以在编辑器中键入属性和值，然后使用代码完成功能获取帮助。此外，您可以在顶部窗格中选择  ``.ui-widget``  规则，然后在底部窗格中单击 "Add Property"（添加属性）按钮以打开 "Add Property"（添加属性）对话框。

image::images/html5-css-csseditor1.png[title="编辑器中的 CSS 代码完成"]

添加规则之后，可以看到菜单现在与页面大小相符。

image::images/html5-css-smartphonebrowser3.png[title="在浏览器中查看应用了新 CSS 规则的页面"]
18. 单击浏览器中的 NetBeans 图标并在菜单中选择 "Tablet Portrait"（平板电脑纵向）。

浏览器窗口大小调整时，可以看到，屏幕宽度大小超过 480 像素时，对样式表的更改不会影响显示。


== 使用 CSS 预处理程序

除了用于编辑标准 CSS 文件的工具，IDE 还支持使用 Sass 和 LESS CSS 预处理程序为应用程序生成样式表。IDE 提供用于生成 CSS 预处理程序文件和指定监视的目录的向导。如果指定监视的目录，则每次修改该目录中的 CSS 预处理程序文件时，都将自动生成 CSS 文件。

*注：*要使用 CSS 预处理程序，您需要安装预处理程序软件并指定可执行文件的位置。可以在 "Options"（选项）窗口中指定可执行文件的位置。

1. 在本地系统上安装 CSS 预处理程序软件。

IDE 支持 link:http://sass-lang.com/[+Sass+] 和 link:http://lesscss.org/[+LESS+] 预处理程序。本教程演示如何使用 Sass 生成 CSS 文件，但 LESS 的配置类似。

*注：*如果在 OS X 上安装 LESS，则您可能需要确认可以在  ``usr/bin``  目录中找到 Node.js。有关详细信息，请参见下面的link:http://stackoverflow.com/questions/8638808/problems-with-less-sublime-text-build-system[+注+]。

2. 在 "Files"（文件）窗口中展开 HTML5Demo 项目。
3. 在 "Files"（文件）窗口中右键单击  ``public_html``  文件夹，然后在弹出菜单中选择 "New"（新建）> "Folder"（文件夹）。

如果在弹出菜单中没有 "Folder"（文件夹）这一选项，请选择 "Other"（其他），然后在 "New File"（新建文件）向导的 "Other"（其他）类别中选择 "Folder"（文件夹）文件类型。

4. 在 "File Name"（文件名）中键入 *scss*。单击 "Finish"（完成）。

单击 "Finish"（完成）后，IDE 将在  ``public_html``  文件夹中生成新文件夹。

5. 在 "Projects"（项目）窗口中右键单击  ``scss``  文件夹节点，然后在弹出菜单中选择 "New"（新建）> "Sass File"（Sass 文件）。
6. 键入 *mysass* 作为文件名。
7. 单击 "Configure"（配置）以便在 "Options"（选项）窗口中打开 "CSS Preprocessor"（CSS 预处理程序）标签。
8. 键入 Sass 可执行文件的路径，或者单击 "Browse"（浏览）在本地系统上查找该可执行文件。选择“确定”以关闭“选项”窗口。
image::images/html5-css-cssoptions.png[title="在浏览器中查看应用了新 CSS 规则的页面"]
9. 在 "New File"（新建文件）向导中选择 "Compile Sass Files on Save"（保存时编译 Sass 文件）。单击 "OK"（确定）。
image::images/html5-css-newsass.png[title="在浏览器中查看应用了新 CSS 规则的页面"]

单击 "OK"（确定）后，新 Sass 文件  ``mysass.scss``  将在编辑器中打开。

10. 将以下内容添加到  ``mysass.scss``  并保存您所做的更改。

[source,java]
----

img {
    margin-right: 20px; 
    float:left; 
    border: 1px solid;

    @media (max-width: 480px) {
        width: 90px;
    }
}


.ui-widget {
    @media (max-width: 480px) {
        font-size: 0.9em;
        li {
            color: red; 
        }
    }
}
----

保存文件时，Sass 预处理程序将在  ``css``  文件夹中生成新的 CSS 文件  ``mysass.css`` 。如果在编辑器中打开  ``mysass.css`` ，您会看到从  ``scss``  文件生成的规则。默认情况下，会在  ``mysass.css``  中生成 CSS 调试信息。当您不再希望生成调试信息时，可以在 "Options"（选项）窗口的 "CSS Preprocessors"（CSS 预处理程序）标签中禁用生成。

*注：*

* 当您希望修改 CSS 规则时，应编辑 Sass 预处理程序文件  ``mysass.scss``  而不是  ``mysass.css``  样式表，因为每次修改并保存此预处理程序文件时都会重新生成此样式表。
* 有关 Sass 语法和其他 Sass 功能的文档，请参见 link:http://sass-lang.com/documentation/file.SASS_REFERENCE.html#[+Sass 引用+]。
11. 打开  ``index.html`` ，然后进行以下更改以便将指向样式表的链接从  ``mycss.css``  更改为  ``mysass.css`` 。保存所做的更改。

[source,java]
----

<link type="text/css" rel="stylesheet" href="css/*mysass.css*">
----

保存文件时，将自动更新浏览器中的页面。您可以看到列表项元素现在显示为红色。


[[summary]]
== 小结

在本教程中，您学到了如何添加和修改 HTML5 应用程序的 CSS 规则以改善应用程序在较小屏幕大小上的显示方式。在浏览器中可以查看将大小调整到标准智能手机显示大小的应用程序。在 Chrome 浏览器中使用“在 NetBeans 中检查”模式可帮助您查找 CSS 样式规则，然后修改规则以优化针对较小屏幕大小的布局。

link:/about/contact_form.html?to=3&subject=Feedback:%20Working%20With%20CSS%20Style%20Sheets%20in%20an%20HTML5%20Application[+发送有关此教程的反馈意见+]


[[seealso]]
== 另请参见

有关 link:https://netbeans.org/[+netbeans.org+] 中 HTML5 应用程序支持的详细信息，请参见以下资源：

* link:html5-gettingstarted.html[+HTML5 应用程序入门+]。此文档说明如何安装用于 Chrome 的 NetBeans Connector 扩展以及创建和运行简单 HTML5 应用程序。
* link:html5-js-support.html[+在 HTML5 应用程序中调试和测试 JavaScript+]。此文档说明 IDE 如何提供工具来帮助您在 IDE 中调试和测试 JavaScript 文件。
* 《link:http://www.oracle.com/pls/topic/lookup?ctx=nb8000&id=NBDAG[+使用 NetBeans IDE 开发应用程序用户指南+]》中的link:http://docs.oracle.com/cd/E50453_01/doc.80/e50452/dev_html_apps.htm[+开发 HTML5 应用程序+]一章

有关 jQuery 的更多信息，请参见官方文档：

* 官方主页：link:http://jquery.com[+http://jquery.com+]
* UI 主页：link:http://jqueryui.com/[+http://jqueryui.com/+]
* 教程：link:http://docs.jquery.com/Tutorials[+http://docs.jquery.com/Tutorials+]
* 文档主页：link:http://docs.jquery.com/Main_Page[+http://docs.jquery.com/Main_Page+]
* UI 演示和文档：link:http://jqueryui.com/demos/[+http://jqueryui.com/demos/+]