第六章 统一页面风格
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
田源
27
编 辑 C S S 样 式
编辑: 选择元素后执行下列操作之一： –单击样式面板中的“编辑样式”按钮。 –执行“窗口”菜单中的“标签检查 器”。 删除: –选择CSS样式。 –单击“删除CSS样式”按钮。
2013-7-17
田源
28
C S S 样 式 语 法
组成: 选择符、属性和属性值 格式： 选择符{属性：值} 注意：如果属性值由多个单词组成，属性 值需要加上引号，如：p{font-family:”sans
2013-7-17
田源
22
滤 镜 设 置
例1：模糊效果 blur(Direction=value,Strength=value) –Direction：设定字体模糊的方向，以顺时 针的角度表示方向。 –Strength：设定模糊的范围，单位是像素。
2013-7-17
田源
23
滤 镜 设 置
例2：下拉阴影 DropShadow(Color=#Value,OffX=value,Offy= Value,Positive=Value) –color：设定阴影的颜色。 –OffX：指定阴影相对于元件在水平方向上的 偏移量，值为正阴影在对象的右方，值为负 则方向相反。 –OffY：指定阴影相对于元件在竖直方向上的 偏移量。 –positive：表示阴影的透明程度，取值为0 时，没有阴影，取值>0时，显示阴影。
2013-7-17
田源
24
滤 镜 设 置
例3：透明效果 格式：Alpha(Opacity=Value,Style=Value) –Opacity：表示透明的程度，0为完全透明， 100为完全不透明。 –Style：表示渐进的显示形状，0为没有渐 进，1为直线渐进，2为圆形渐进，3为矩形 渐进。 –StartY：渐进开始Y坐标值。 –FinshX：渐进结束X坐标值。 –FinshY：渐进结束Y坐标值。 特别提示：滤镜效果只有在浏览器中才能看 到效果上边的各参数表达式要用逗号分隔开。
2013-7-17
田源
26
链 接 或 导 入 样 式 表 文 件
2013-7-17
链接或导入外部样式表文件即是将已创建 外部样式表文件导入到当前文档中,用样式 表文件,格式化网页中的指定元素 打开“链接外部样式表”对话框：单击 “CSS样式面板”右方“附加样式表”按 钮。 在“文件/URL”文本框中输入文件的地址 和文件名,或单击“浏览”,在磁盘中选择 样式表文件。 在“添加为”处选择“CSS样式表文件” 装入方式。
2013-7-17
田源
18
边 框 设 置
容器概念中的重要内容，主要给对象添 加边框，设置边框的颜色、粗细、样式 等。 –样式：边框为虚线、点划线、实线、 双线、槽状、脊状、凹陷、突出等形 状 –宽度、颜色：等同前
2013-7-17
田源
19
列 表 设 置
对文本前面的项目符号的样式进行设 置，如可以为列表指定一个单独的图片作 为标记。 –类型：符号的类型为圆点、圆圈、方 块等 –项目符号图像：在图像文件中设置项 目符号样式 –位置：贴近左侧或向右缩进
2013-7-17
田源
4
C S S 样 式 特 点
作用 可以处理文本、链接、图象和重新定义 HTML标签（body ,table ,td等）。 特点 –可以将结构和格式分离 –常规方法达不到的效果(行间距、字间 距、行缩进、修改项目编号) –减少了冗余代码，使网站体积更小 –可以同时更新多个网页 –大多浏览器都支持CSS
2013-7-17
田源
8
C S S 样 式 创 建
新建CSS样式(只对当前文档) 新建CSS样式表文件
2013-7-17
田源
9
新 建 C S S 样 式
打开“新建CSS样式”对话框 –“文件”菜单下的“新建”中的“CSS样式表” 命令。 –选择“窗口”菜单下的“CSS样式”命令，打 开CSS样式面板，在面板中单击“+”新建按 钮。 –在属性面板中选择“样式”下拉菜单中的 “管理样式”命令，在打开的对话框中选择 “新建”按钮。 注意： CSS名不能以数字开头，不能是保留的标识名。 选择所建样式的类型
2013-7-17
田源
11
练 习
例1：自定义.biaoti类（字体：隶书；字 号：6；颜色：红；加粗） 例2：将网页中的所有文字都显示为：宋 体，9磅 例3：定义链接：link：绿；hover：紫； active：红；visited：暗红；不带下划 线；（hover：字体变大，带上划线、下划 线）
2013-7-17
田源
33
创 建 模 板
打开“资源面板”：“窗口”/“资源” 显示模板窗口：单击“资源面板”左侧 的模板按钮 单击“新建模板”按钮 输入模板的名称 在文档窗口中设置页面
13
设 置 C S S 样 式
类型设置
边框设置
背景设置
区块设置 方框设置
列表设置
定位设置 扩展设置
2013-7-17
田源
14
类 型 设 置
每个页面中最基本的属性，需要注意的 是，并不仅仅是对单独的文字定义字体属 性，几乎所有的页面元素都会涉及到字体 定义，如定义表格需要涉及表格中的字 体、定义列表需要涉及列表中的字体、定 义表单需要涉及表单中的字体等。
serif”}.
如果对一个选择符指定多个属性，属性之 间用分号分隔。
2013-7-17
田源
29
C S S 样 式 语 法
可将相同属性和值的选择符组合起来写， 如：H1,H,H3{color:green}。 类选择符： 可将相同元素分类定义不同样式，如：
p.right{text-align:”right”} p.center{text-align:”center”}
32
模 板 概 念
模板 模板是用来产生带有固定特征和共同格式的文 档基础,是用户进行批量设计网页文档的框架。 网页常用的固定组成部分 –logo：即网站的徽标，这是一个网站的标 志，在每个页面最顶部的左上角，标准大 小为88px×31px。 –banner：即页面上的广告条，可放在页面 的任意位置。 –Nav Bar：即页面上的导航条，一般放在页 面的顶部和底部。 –copyright：即页面上的版权信息，一般在 页面的最底部。
应用时，不同段落应用不同样式：
<p class=“right”></p>„„
注意：在选择符上省略标签名，可将样 式应用到任何元素上。
2013-7-17
田源
30
C S S 样 式 语 法
ID选择符： 和类选择符类似，只能单独定义某个元 素 样式，如：
#intro{text-align:”right”} p#intro{text-align:”center”}
号为9pt，缩进2个字，设置为18pt，12pt， 设置为24pt)
2013-7-17
田源
17
方 框 设 置
样式表中最重要的一个属性类别，是实 现页面元素精确定位的基础，主要对图像 的大、水平和垂直方向上的空白，文字环 绕等进行设置。 –浮动：图像对齐方式，设置图像环绕 效果 –清除：在图像四周是否允许有其它对 象 –填充：对象边框和其中内容间的空白 –边界：对象外侧的空白区域
2013-7-17
田源
12
创 建 样 式 表 文 件
方法： 新建：新建样式表同时新建样式表文件。 链接：点击样式管理器右下的“附加样式 表”，弹出样式编辑面板，选中要链接的外 部样式表文件，点击“链接”按钮。 作用： 当修改样式表文件，只要链接该样式表文 件的网页都会随之改变。
2013-7-17
田源
2013-7-17
田源
20
定 位 设 置
对层进行设置(实际操作很少被用到)，是实 现精确和自由定位关键属性，它给控制者 更大的控制页面的能力，而且还扩展到三 维的z轴方向。 –类型：定位方式为绝对、相对、静态 等 –显示：同前 –定位：精确定位数字
2013-7-17
田源
21
扩 展 设 置
一些增强性属性，如设置模糊效果、下拉阴影 等。 分页:目前尚无浏览器支持该功能 光标:改变鼠标放在该项上时的形状 过滤器:实现滤镜效果 –Hand：手 –Crosshair：交叉十字 –Text：文本选择符号 –Wait：漏斗 –Default：默认 –Help：默认问号 –E-resize：向东箭头 –Ne-resize：向东北箭头 –N-resize：向北箭头 –Nw-resize：向西北箭头 –S-resize：向西南箭头 –Auto：正常鼠标
第六章
统一页面风格
2013-7-17
田源
1
本章提纲
本章内容: 第一节 CSS样式
第二节 模板
第三节 综合实例
重点难点：
CSS样式
2013-7-17
田源
2
第一节
CSS样式
CSS样式简介 CSS样式类型 创建CSS样式 设置CSS样式 CSS样式应用 CSS样式语法
2013-7-17
田源
3
C S S 样 式 简 介
2013-7-17
田源
6
不同超级链接样式设置
设置各种链接的CSS（类型为“高
高 级 样 式
级”）a:link、a:active等 建立一个类：efont(定义文本的大小） 建立组合样式（类型为“高级”） 注意：选择器类型为“高级”，选择器
文本框中输入efont a:link、efont
a:visited等选中对应的元素，样式选择
efont。2013-7-17源自田源7样 式 区 别
类：定义后，只能选择对象应用类才有效,并 只对选择的对象有效。（出现在属性面板的类 列表中，先选择页面中的对象，点击样式应 用。 ） 标签：自动应用，并对该标签的所有对象有效。 高级：自动应用，只对链接有效。
结论：希望让该标签对应的所有对象都应用的样式 要定义为标签；若只希望少数对象应用的样式定义 为类；链接样式定义为高级。
定义可编辑区域?将光标定位在模板中设为可编辑的区域?右击在快捷菜单中选择模板新建可编辑区域?在对话框中输入区域的名称删除可编辑区域?定位光标?右击选择模板删除模板标37用模板新建网页打开资源面板右击模板文件选择从模板新建用模板更新已存在的网页打开要套用模板的网页选择修改模板应用到模板到网页在对话框中选择模板单击选定在新的对话框中设置将已有网页中的内容移到相应的可编辑区单击确定38更新站点模板是可以进行修改的为了让修改过的模板应用到站点中根据该模板创建的网页中要使用更新站点进行操作
CSS即层叠样式表(Cascading Style Sheet)，是一种统一页面设计风格的工具， 使用它可以对网页中的布局元素，如表格、 字体、颜色、背景、链接效果和其它图文效 果实现更加精确的控制。CSS样式不仅可以 在一个页面中使用，而且可以用于多个页 面。通过对一个或数个CSS文件的管理和使 用，可以使整个网站页面格式保持一致。
包含选择符： 为在元素1里的元素2定义样式，如： table a{„„},只对表格内的超链接定义 样式。 样式层叠性： 所有在元素中嵌套的元素都会继承外层 属性，如果冲突，以最后定义样式为准。
田源
31
2013-7-17
第二节
模板概念 创建模板 编辑模板 应用模板 更新站点
模板
2013-7-17
田源
2013-7-17
田源
25
滤 镜 设 置
代码格式： wave(Add=0,Freq=8,LightStrength=10,Phase =0, Strength=6) 参数的含义： –Add：是否把图片打乱。 –Freq：波纹的频率。 –LightStrength：正弦波的光照强度。 –Phase：正弦波开始的偏移量。 –Strength：设置正弦波的幅度。
田源
5
2013-7-17
C S S 类 型
传统的页面元素的控制方法是通过修改标签的 属性，这种控制能力非常有限。在CSS样式中可以 通过三种方式来控制页面元素：一是重定义HTML标 签，另外通过类和伪类来控制。 标签：选择一个标签，在CSS样式表中重新进行 定义，会自动应用相应的元素上。 类：首先定义一个类，名称格式为“.name”， 在样式表中定义；然后在页面上指定某一个元素， 应用类才能生效。 伪类：不需要在相应的元素上指定就可以使 用，例如定义的文字链接样式：A.link， A.visited，A.hover，A.active。
2013-7-17
田源
15
背 景 设 置
可以精确设定背景图像的位置、是否重 复显示、是否随页面内容滚动。
2013-7-17
田源
16
区 块 设 置
主要是定义段落的一些属性值，如字符 间距、文本对齐、首行缩进等。 –单词、字母间距 –垂直对齐：对象的对齐方式 –文本对齐 –文字缩进：中文首行文字的缩进（字
2013-7-17
田源
10
新 建 C S S 样 式
–类：用户自定义样式名称,可以在HTML中被调 用。 –标签：重新定义HTML各标签默认格式。 –高级：用于定义组合样式或具有特殊序列号 (ID)的样式，主要用于设置超级链接的特色 (颜色)。 选择样式定义的存放位置或作用范围：仅对该文 档。 单击“确定”,打开CSS样式定义对话框。 对话框的设置：详见CSS样式子面板。
27
编 辑 C S S 样 式
编辑: 选择元素后执行下列操作之一： –单击样式面板中的“编辑样式”按钮。 –执行“窗口”菜单中的“标签检查 器”。 删除: –选择CSS样式。 –单击“删除CSS样式”按钮。
2013-7-17
田源
28
C S S 样 式 语 法
组成: 选择符、属性和属性值 格式： 选择符{属性：值} 注意：如果属性值由多个单词组成，属性 值需要加上引号，如：p{font-family:”sans
2013-7-17
田源
22
滤 镜 设 置
例1：模糊效果 blur(Direction=value,Strength=value) –Direction：设定字体模糊的方向，以顺时 针的角度表示方向。 –Strength：设定模糊的范围，单位是像素。
2013-7-17
田源
23
滤 镜 设 置
例2：下拉阴影 DropShadow(Color=#Value,OffX=value,Offy= Value,Positive=Value) –color：设定阴影的颜色。 –OffX：指定阴影相对于元件在水平方向上的 偏移量，值为正阴影在对象的右方，值为负 则方向相反。 –OffY：指定阴影相对于元件在竖直方向上的 偏移量。 –positive：表示阴影的透明程度，取值为0 时，没有阴影，取值>0时，显示阴影。
2013-7-17
田源
24
滤 镜 设 置
例3：透明效果 格式：Alpha(Opacity=Value,Style=Value) –Opacity：表示透明的程度，0为完全透明， 100为完全不透明。 –Style：表示渐进的显示形状，0为没有渐 进，1为直线渐进，2为圆形渐进，3为矩形 渐进。 –StartY：渐进开始Y坐标值。 –FinshX：渐进结束X坐标值。 –FinshY：渐进结束Y坐标值。 特别提示：滤镜效果只有在浏览器中才能看 到效果上边的各参数表达式要用逗号分隔开。
2013-7-17
田源
26
链 接 或 导 入 样 式 表 文 件
2013-7-17
链接或导入外部样式表文件即是将已创建 外部样式表文件导入到当前文档中,用样式 表文件,格式化网页中的指定元素 打开“链接外部样式表”对话框：单击 “CSS样式面板”右方“附加样式表”按 钮。 在“文件/URL”文本框中输入文件的地址 和文件名,或单击“浏览”,在磁盘中选择 样式表文件。 在“添加为”处选择“CSS样式表文件” 装入方式。
2013-7-17
田源
18
边 框 设 置
容器概念中的重要内容，主要给对象添 加边框，设置边框的颜色、粗细、样式 等。 –样式：边框为虚线、点划线、实线、 双线、槽状、脊状、凹陷、突出等形 状 –宽度、颜色：等同前
2013-7-17
田源
19
列 表 设 置
对文本前面的项目符号的样式进行设 置，如可以为列表指定一个单独的图片作 为标记。 –类型：符号的类型为圆点、圆圈、方 块等 –项目符号图像：在图像文件中设置项 目符号样式 –位置：贴近左侧或向右缩进
2013-7-17
田源
4
C S S 样 式 特 点
作用 可以处理文本、链接、图象和重新定义 HTML标签（body ,table ,td等）。 特点 –可以将结构和格式分离 –常规方法达不到的效果(行间距、字间 距、行缩进、修改项目编号) –减少了冗余代码，使网站体积更小 –可以同时更新多个网页 –大多浏览器都支持CSS
2013-7-17
田源
8
C S S 样 式 创 建
新建CSS样式(只对当前文档) 新建CSS样式表文件
2013-7-17
田源
9
新 建 C S S 样 式
打开“新建CSS样式”对话框 –“文件”菜单下的“新建”中的“CSS样式表” 命令。 –选择“窗口”菜单下的“CSS样式”命令，打 开CSS样式面板，在面板中单击“+”新建按 钮。 –在属性面板中选择“样式”下拉菜单中的 “管理样式”命令，在打开的对话框中选择 “新建”按钮。 注意： CSS名不能以数字开头，不能是保留的标识名。 选择所建样式的类型
2013-7-17
田源
11
练 习
例1：自定义.biaoti类（字体：隶书；字 号：6；颜色：红；加粗） 例2：将网页中的所有文字都显示为：宋 体，9磅 例3：定义链接：link：绿；hover：紫； active：红；visited：暗红；不带下划 线；（hover：字体变大，带上划线、下划 线）
2013-7-17
田源
33
创 建 模 板
打开“资源面板”：“窗口”/“资源” 显示模板窗口：单击“资源面板”左侧 的模板按钮 单击“新建模板”按钮 输入模板的名称 在文档窗口中设置页面
13
设 置 C S S 样 式
类型设置
边框设置
背景设置
区块设置 方框设置
列表设置
定位设置 扩展设置
2013-7-17
田源
14
类 型 设 置
每个页面中最基本的属性，需要注意的 是，并不仅仅是对单独的文字定义字体属 性，几乎所有的页面元素都会涉及到字体 定义，如定义表格需要涉及表格中的字 体、定义列表需要涉及列表中的字体、定 义表单需要涉及表单中的字体等。
serif”}.
如果对一个选择符指定多个属性，属性之 间用分号分隔。
2013-7-17
田源
29
C S S 样 式 语 法
可将相同属性和值的选择符组合起来写， 如：H1,H,H3{color:green}。 类选择符： 可将相同元素分类定义不同样式，如：
p.right{text-align:”right”} p.center{text-align:”center”}
32
模 板 概 念
模板 模板是用来产生带有固定特征和共同格式的文 档基础,是用户进行批量设计网页文档的框架。 网页常用的固定组成部分 –logo：即网站的徽标，这是一个网站的标 志，在每个页面最顶部的左上角，标准大 小为88px×31px。 –banner：即页面上的广告条，可放在页面 的任意位置。 –Nav Bar：即页面上的导航条，一般放在页 面的顶部和底部。 –copyright：即页面上的版权信息，一般在 页面的最底部。
应用时，不同段落应用不同样式：
<p class=“right”></p>„„
注意：在选择符上省略标签名，可将样 式应用到任何元素上。
2013-7-17
田源
30
C S S 样 式 语 法
ID选择符： 和类选择符类似，只能单独定义某个元 素 样式，如：
#intro{text-align:”right”} p#intro{text-align:”center”}
号为9pt，缩进2个字，设置为18pt，12pt， 设置为24pt)
2013-7-17
田源
17
方 框 设 置
样式表中最重要的一个属性类别，是实 现页面元素精确定位的基础，主要对图像 的大、水平和垂直方向上的空白，文字环 绕等进行设置。 –浮动：图像对齐方式，设置图像环绕 效果 –清除：在图像四周是否允许有其它对 象 –填充：对象边框和其中内容间的空白 –边界：对象外侧的空白区域
2013-7-17
田源
12
创 建 样 式 表 文 件
方法： 新建：新建样式表同时新建样式表文件。 链接：点击样式管理器右下的“附加样式 表”，弹出样式编辑面板，选中要链接的外 部样式表文件，点击“链接”按钮。 作用： 当修改样式表文件，只要链接该样式表文 件的网页都会随之改变。
2013-7-17
田源
2013-7-17
田源
20
定 位 设 置
对层进行设置(实际操作很少被用到)，是实 现精确和自由定位关键属性，它给控制者 更大的控制页面的能力，而且还扩展到三 维的z轴方向。 –类型：定位方式为绝对、相对、静态 等 –显示：同前 –定位：精确定位数字
2013-7-17
田源
21
扩 展 设 置
一些增强性属性，如设置模糊效果、下拉阴影 等。 分页:目前尚无浏览器支持该功能 光标:改变鼠标放在该项上时的形状 过滤器:实现滤镜效果 –Hand：手 –Crosshair：交叉十字 –Text：文本选择符号 –Wait：漏斗 –Default：默认 –Help：默认问号 –E-resize：向东箭头 –Ne-resize：向东北箭头 –N-resize：向北箭头 –Nw-resize：向西北箭头 –S-resize：向西南箭头 –Auto：正常鼠标
第六章
统一页面风格
2013-7-17
田源
1
本章提纲
本章内容: 第一节 CSS样式
第二节 模板
第三节 综合实例
重点难点：
CSS样式
2013-7-17
田源
2
第一节
CSS样式
CSS样式简介 CSS样式类型 创建CSS样式 设置CSS样式 CSS样式应用 CSS样式语法
2013-7-17
田源
3
C S S 样 式 简 介
2013-7-17
田源
6
不同超级链接样式设置
设置各种链接的CSS（类型为“高
高 级 样 式
级”）a:link、a:active等 建立一个类：efont(定义文本的大小） 建立组合样式（类型为“高级”） 注意：选择器类型为“高级”，选择器
文本框中输入efont a:link、efont
a:visited等选中对应的元素，样式选择
efont。2013-7-17源自田源7样 式 区 别
类：定义后，只能选择对象应用类才有效,并 只对选择的对象有效。（出现在属性面板的类 列表中，先选择页面中的对象，点击样式应 用。 ） 标签：自动应用，并对该标签的所有对象有效。 高级：自动应用，只对链接有效。
结论：希望让该标签对应的所有对象都应用的样式 要定义为标签；若只希望少数对象应用的样式定义 为类；链接样式定义为高级。
定义可编辑区域?将光标定位在模板中设为可编辑的区域?右击在快捷菜单中选择模板新建可编辑区域?在对话框中输入区域的名称删除可编辑区域?定位光标?右击选择模板删除模板标37用模板新建网页打开资源面板右击模板文件选择从模板新建用模板更新已存在的网页打开要套用模板的网页选择修改模板应用到模板到网页在对话框中选择模板单击选定在新的对话框中设置将已有网页中的内容移到相应的可编辑区单击确定38更新站点模板是可以进行修改的为了让修改过的模板应用到站点中根据该模板创建的网页中要使用更新站点进行操作
CSS即层叠样式表(Cascading Style Sheet)，是一种统一页面设计风格的工具， 使用它可以对网页中的布局元素，如表格、 字体、颜色、背景、链接效果和其它图文效 果实现更加精确的控制。CSS样式不仅可以 在一个页面中使用，而且可以用于多个页 面。通过对一个或数个CSS文件的管理和使 用，可以使整个网站页面格式保持一致。
包含选择符： 为在元素1里的元素2定义样式，如： table a{„„},只对表格内的超链接定义 样式。 样式层叠性： 所有在元素中嵌套的元素都会继承外层 属性，如果冲突，以最后定义样式为准。
田源
31
2013-7-17
第二节
模板概念 创建模板 编辑模板 应用模板 更新站点
模板
2013-7-17
田源
2013-7-17
田源
25
滤 镜 设 置
代码格式： wave(Add=0,Freq=8,LightStrength=10,Phase =0, Strength=6) 参数的含义： –Add：是否把图片打乱。 –Freq：波纹的频率。 –LightStrength：正弦波的光照强度。 –Phase：正弦波开始的偏移量。 –Strength：设置正弦波的幅度。
田源
5
2013-7-17
C S S 类 型
传统的页面元素的控制方法是通过修改标签的 属性，这种控制能力非常有限。在CSS样式中可以 通过三种方式来控制页面元素：一是重定义HTML标 签，另外通过类和伪类来控制。 标签：选择一个标签，在CSS样式表中重新进行 定义，会自动应用相应的元素上。 类：首先定义一个类，名称格式为“.name”， 在样式表中定义；然后在页面上指定某一个元素， 应用类才能生效。 伪类：不需要在相应的元素上指定就可以使 用，例如定义的文字链接样式：A.link， A.visited，A.hover，A.active。
2013-7-17
田源
15
背 景 设 置
可以精确设定背景图像的位置、是否重 复显示、是否随页面内容滚动。
2013-7-17
田源
16
区 块 设 置
主要是定义段落的一些属性值，如字符 间距、文本对齐、首行缩进等。 –单词、字母间距 –垂直对齐：对象的对齐方式 –文本对齐 –文字缩进：中文首行文字的缩进（字
2013-7-17
田源
10
新 建 C S S 样 式
–类：用户自定义样式名称,可以在HTML中被调 用。 –标签：重新定义HTML各标签默认格式。 –高级：用于定义组合样式或具有特殊序列号 (ID)的样式，主要用于设置超级链接的特色 (颜色)。 选择样式定义的存放位置或作用范围：仅对该文 档。 单击“确定”,打开CSS样式定义对话框。 对话框的设置：详见CSS样式子面板。