底部窗格
底部窗格显示在 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 像素时,对样式表的更改不会影响显示。