css文件应用到html5,在 HTML5 应用程序中使用 CSS 样式表

底部窗格

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

在 "CSS Styles"(CSS 样式)窗口中单击 "Document"(文档)标签。

选择 css/mycss.css 节点，然后单击 "Edit CSS Rules"(编辑 CSS 规则)按钮 () 窗口以打开 "Edit CSS Rules"(编辑 CSS 规则)对话框。

Figure 7. "Edit CSS Rules"(编辑 CSS 规则)对话框

为 "Selector Type"(选择器类型)选择 "Element"(元素)，为 "Selector"(选择器)选择类型 img。

为 "Style Sheet"(样式表)选择 css/mycss.css ，为 "At-Rule"(@ 规则)选择 (max-width:480px)。单击 "OK"(确定)。

Figure 8. "Edit CSS Rules"(编辑 CSS 规则)对话框

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

在 "CSS Styles"(CSS 样式)窗口中单击 "Selection"(选择)标签。

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

选择新的 img 规则(在 "CSS Styles"(CSS 样式)窗口的 "Applied Styles"(应用的样式)窗格的 mycss.css 中定义)。

Figure 9. "CSS Styles"(CSS 样式)窗口中所选元素的样式

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

在 "CSS Styles"(CSS 样式)窗口底部窗格的左列中单击 "Add Property"(添加属性)，然后键入 width。

在 width 属性旁边的右列中键入 90px，然后按键盘上的回车键。

Figure 10. "CSS Styles"(CSS 样式)窗口的 "Image Properties"(图像属性)窗格

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

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

/*My rule for smartphone*/

@media (max-width: 480px) {

img {

width: 90px;

}

}

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

在浏览器窗口中选择无序列表 (

• ) 元素。

Figure 11. 列出在浏览器中选择的元素

选择元素时，在 "Browser DOM"(浏览器 DOM)窗口中可以看到选择了

• ，在 "CSS Styles"(CSS 样式)窗口中可以看到应用到该元素的样式。

Figure 12. 列出在 "Browser DOM"(浏览器 DOM)窗口中选择的元素

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

在编辑器中单击 index.html 文件，然后在 "CSS Styles"(CSS 样式)窗口中单击 "Document"(文档)标签。

在 "CSS Styles"(CSS 样式)窗口中展开 css/mycss.css 节点。

Figure 13. 在 "CSS Styles"(CSS 样式)窗口的 "Document"(文档)标签中选择的样式表

在 "CSS Styles"(CSS 样式)窗口中，单击 "Edit CSS Rules"(编辑 CSS 规则)按钮 () 可打开 "Edit CSS Rules"(编辑 CSS 规则)对话框。

为 "Selector Type"(选择器类型)选择 "Class"(类)，为 "Selector"(选择器)选择类型 ui-widget。

为 "Style Sheet"(样式表)选择 * css/mycss.css ，为 "At-Rule"(@ 规则)选择 *(max-width:480px)。单击 "OK"(确定)。

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

向 ui-widget 的规则添加以下属性和值(粗体)。

.ui-widget {

*font-size: 0.9em;*

}

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

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

Figure 14. 编辑器中的 CSS 代码完成

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

Figure 15. 在浏览器中查看应用了新 CSS 规则的页面

单击浏览器中的 NetBeans 图标并在菜单中选择 "Tablet Portrait"(平板电脑纵向)。

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