网页制作第9单元 CSS样式表

《网页制作第9单元 CSS样式表》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、第9单元CSS样式表课程目标：l掌握建立样式、样式表文件l掌握使用样式l掌握使用滤镜特效的一般方法建议学时：理论4学时，实践4学时。9.1CSS样式表9.1.1了解CSS样式CSS(CascadingStyleSheets)，层叠样式表，是W3C组织指定的一种网页新技术，CSS使用一系列规范的格式来设置一些规则，称为样式，并通过样式来控制Web页面内容的外观及特效。CSS中的样式由两部分组成：选择器和声明。选择器是标识已设置格式元素（如P、H1、类名称或ID）的术语，并按规定以“．”开头，而声明则用于定义样式元素使用的规则。在下面的示例中，tx

2、t14是选择器，介于大括号({})之间的所有内容都是声明：.txt14{font-family:"宋体";font-size:14px;line-height:20px;color:#FF0000;}不难看出，声明本身也是由两部分组成：属性（如font-family）和值（如“宋体”）。上述示例创建了样式txt14，使用的规则是：字体=宋体、字号=14像素，行距=20像素，颜色=#FF0000(红色)。所谓“层叠”是指对同一个元素或Web页面应用多个样式的能力。例如，可以创建一个CSS规则来定义颜色，创建另一个规则来定义边距，然后将两者应用于一

3、个页面中的同一文本。所定义的样式“层叠”到Web页面上的元素，并最终创建理想的设计。CSS很显著优点是容易更新，只要对CSS规则中定义的样式进行修改，则应用该样式的所有文档都可以自动更新。举个例子，假设一个网站的正文文字要由原来14px改为12px，如果不使用CSS，则要逐个打开站点的页面进行修改，一个站点有可能包含十几个页面，有些多达几十个页面，想想这时的工作量是多少？如果应用了CSS，则只需要在CSS文件中修改相应的样式，这十几个乃到几十个页面均可自动更新，真正达到事半功倍的效果！9.1.2内部样式表和外部样式表样式表就是样式定义的集合，即

4、把多个样式的定义以列表的方式集合在一起。下面就是一个样式表的例子：.nh1{font-family:"隶书";font-size:36px;color:#FF0000;}.nh2{font-family:"黑体";font-size:16px;}.txt14{font-family:"宋体";font-size:14px;line-height:24px;}.txt12{font-family:"宋体";font-size:12px;line-height:16px;}在上述样式表中，定义了nh1、nh2、txt14、txt12四种样式，每种样

5、式定义了字体、字号及颜色、行距等属性。如果将样式表的内容插入到HTML文档中(一般是在与之间)，则称为内部样式表。形式如下：

6、16px;}.txt14{font-family:"宋体";font-size:14px;line-height:24px;color:#666666}.txt12{font-family:"宋体";font-size:12px;line-height:16px;}-->如果把样式表内容单独保存为一个文件，后缀名为.css，例如art.css，则称为外部样式表。9.1.3本节小结样式是对标签格式的重新定义，多个样式的集合构成了样式表，将样式表内嵌在HTML文件中，则为内部样式表，将样式表单独保存为CSS文件则为外部

7、样式表。9.2CSS样式表面板Dreamweaver8中的CSS样式面板内容丰富且功能强大，既列出了定义的样式及属性，又可以通过面板直接编辑和添加新的属性，这对于样式的建立、修改是十分便捷的。9.2.1样式表面板介绍执行菜单【窗口】

8、【CSS样式】，显示出CSS样式表面板，如图9-1所示。图9-1CSS样式表面板选择【全部】，则显示当前页面可使用的所有样式，选择【正在】，则显示正在使用的样式。面板的构成包含以下几个部分：（1）规则列表：位于面板上方，显示规则（选择器）名称。（2）属性列表：位于面板下方，显示对应的属性及属性值。（3）控制按钮：位

9、于面板右下角，包含附加样式表、新建CSS样式、编辑样式、删除CSS样式四个按钮。通过这四个按钮，可完成有关样式的主要操作。9.2.2使用样式表面板样式