《012层叠样式表.ppt》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、第12章层叠样式表重点内容：创建与编辑CSS样式导入与链接样式应用类样式设置CSS样式属性一、层叠样式表概述1.什么是CSSCSS全称CascadingStyleSheets，中文名为层叠样式表，也可简称为样式表，以下简称为CSS样式。CSS样式本身是一组格式设置规则，用于控制Web页内容的外观。网页设计最初用HTML标记来定义页面文档及格式，如标题

、段落

等，但这些标记不能满足更多的文档样式需求。为了解决这个问题，在1997公布了有关样式表的第一个标准CSS1，自CSS1的版本之后，又在1998年5月发布了CSS2版本，样式表得到了更多的充实。一、层叠样式表概述2.CSS的作用具

2、有良好的兼容性:CSS样式表的代码有良好的兼容性，只要是可以识别CSS样式表的浏览器就可以正常应用。页面内容与表示形式分离:页面内容存放在HTML文件中，而用于定义代码表示形式的CSS规则存放在另一个文件或HTML文档的另一部分中。提供更快的下载速度:CSS样式表只是简单的文本，它不需要图像，不需要执行程序，不需要插件;CSS样式还可以减少表格标签及其他加大HTML文件大小的代码，极大地缩减了文件大小，可以制作出文件更小、下载速度更快的网页。一、层叠样式表概述3.CSS的语法规则CSS样式由两部分组成：选择器和声明。选择器是标识已设置格式元素的术语（如p、h1、类名称或ID），而声明块则用于定

3、义样式属性。例如：h1{font-size:16pixels;font-family:Helvetica;}其中，h1是选择器，介于大括号（{}）之间的所有内容都是声明。各个声明均由两部分组成：属性（如font-family）和值（如16pixels），中间用冒号（:）分隔。一、层叠样式表概述4.CSS样式的优先顺序将两个或多个样式应用于同一文本时，样式间可能会发生冲突，浏览器根据以下规则将CSS样式应用于文本。（1）将多种样式应用于同一文本，浏览器显示样式的所有属性，除非某个特定的属性发生冲突。（2）应用于同一文本的多种样式属性发生冲突时，浏览器显示最里面的样式（离文本本身最近的样式）的属性

4、。（3）CSS样式间若发生直接冲突，则使用class属性应用的样式中的属性将取代HTML标记样式中的属性。二、CSS样式的创建、编辑与导出用户在为文本设置字体、字号、颜色等操作时会自动生成名为style的样式，如stylen（n为从1开始的自然数序列），且自动显示在属性面板的“样式”下拉列表框（见左图）和“CSS”面板组中的“CSS样式”面板（见右图）中。二、CSS样式的创建、编辑与导出1.认识“CSS样式”面板“CSS样式”面板集成在“CSS”面板组中，默认状态下“CSS”面板为隐藏状态，只显示面板标题栏，如左图。单击“CSS”标题栏中的“CSS”字样或向右的三角按钮，展开“CSS”面板。若

5、当前网页中不包含CSS样式，则显示“CSS样式”面板，如右图。二、CSS样式的创建、编辑与导出1.认识“CSS样式”面板“CSS样式”面板底部含有7个按钮，利用这些按钮可以以不同的类别显示CSS样式，为CSS样式附加样式表，或者编辑、创建、删除样式等。二、CSS样式的创建、编辑与导出1.认识“CSS样式”面板默认状态下“CSS样式”面板中显示的是“正在”选项卡，若当前打开的文档中已含有样式，则显示如左图所示的“CSS样式”面板，该选项卡分为3栏。“全部”选项卡的列表框中显示出当前文档中所包含的CSS样式，如右图。二、CSS样式的创建、编辑与导出2.创建CSS样式Dreamweaver允许用户自

6、定义CSS样式，如果要自定义CSS样式，应先打开“新建CSS规则”对话框，选择要定义的“选择器类型”、定义“名称”和“定义在”后，单击“确定”按钮。二、CSS样式的创建、编辑与导出2.创建CSS样式打开“CSS规则定义”对话框，在该对话框中用户可根据需要定义CSS样式属性，如类型、背景、区块、方框边框、列表、定位和扩展。完成后单击“确定”按钮即可在CSS样式面板中显示新建的CSS样式。二、CSS样式的创建、编辑与导出3.移动样式创建新CSS样式表右击“CSS样式”面板中要导出的内部样式，选择“移动CSS规则”命令，打开“移至外部样式表”对话框。选择“新样式表”单选按钮，单击“确定”按钮。在打开

7、的对话框中输入样式表名称，单击“保存”按钮即可。二、CSS样式的创建、编辑与导出4.链接或导入外部样式表单击“CSS样式”面板中的“附加样式表”按钮，打开“链接外部样式表”对话框。单击“浏览”按钮，打开“选择样式表文件”对话框，从中选择所需的外部样式表。单击“确定”按钮，返回“链接外部样式表”对话框。然后选择“添加为”选项组中任意选项，单击“确定”按钮。二、CSS样式的创建、编辑与导出5.编辑CS