Dreamweaver CS3中文版012.ppt

Dreamweaver CS3中文版应用教程 第12章 层叠样式表 重点内容： 创建与编辑CSS样式 导入与链接样式 应用类样式 设置CSS样式属性 一、 层叠样式表概述 1.什么是CSS CSS全称Cascading Style Sheets，中文名为层叠样式表，也可简称为样式表，以下简称为CSS样式。CSS样式本身是一组格式设置规则，用于控制Web页内容的外观。网页设计最初用HTML标记来定义页面文档及格式，如标题h1、段落p等，但这些标记不能满足更多的文档样式需求。为了解决这个问题，在1997公布了有关样式表的第一个标准CSS1，自CSS1的版本之后，又在1998年5月发布了CSS2版本，样式表得到了更多的充实。 一、 层叠样式表概述 2.CSS的作用 具有良好的兼容性:CSS样式表的代码有良好的兼容性，只要是可以识别CSS样式表的浏览器就可以正常应用。 页面内容与表示形式分离:页面内容存放在HTML文件中，而用于定义代码表示形式的CSS规则存放在另一个文件或HTML文档的另一部分中。 提供更快的下载速度:CSS样式表只是简单的文本，它不需要图像，不需要执行程序，不需要插件;CSS样式还可以减少表格标签及其他加大HTML文件大小的代码，极大地缩减了文件大小，可以制作出文件更小、下载速度更快的网页。 一、 层叠样式表概述 3.CSS的语法规则 CSS样式由两部分组成：选择器和声明。选择器是标识已设置格式元素的术语（如p、h1、类名称或ID），而声明块则用于定义样式属性。例如： h1{ font-size:16pixels; font-family:Helvetica; } 其中，h1是选择器，介于大括号（{}）之间的所有内容都是声明。各个声明均由两部分组成：属性（如font-family）和值（如16pixels），中间用冒号（:）分隔。 一、 层叠样式表概述 4. CSS样式的优先顺序 将两个或多个样式应用于同一文本时，样式间可能会发生冲突，浏览器根据以下规则将CSS样式应用于文本。 （1）将多种样式应用于同一文本，浏览器显示样式的所有属性，除非某个特定的属性发生冲突。 （2）应用于同一文本的多种样式属性发生冲突时，浏览器显示最里面的样式（离文本本身最近的样式）的属性。 （3）CSS样式间若发生直接冲突，则使用class属性应 用的样式中的属性将取代HTML标记样式中的属性。 二、 CSS样式的创建、编辑与导出 用户在为文本设置字体、字号、颜色等操作时会自动生成名为style的样式，如style n（n为从1开始的自然数序列），且自动显示在属性面板的“样式”下拉列表框（见左图）和“CSS”面板组中的“CSS样式”面板（见右图）中。 二、 CSS样式的创建、编辑与导出 1.认识“CSS样式”面板 “CSS样式”面板集成在“CSS”面板组中，默认状态下“CSS”面板为隐藏状态，只显示面板标题栏，如左图。单击“CSS”标题栏中的“CSS”字样或向右的三角按钮，展开“CSS”面板。若当前网页中不包含CSS样式，则显示“CSS样式”面板，如右图。 二、 CSS样式的创建、编辑与导出 1.认识“CSS样式”面板 “CSS样式”面板底部含有7个按钮，利用这些按钮可以以不同的类别显示CSS样式，为CSS样式附加样式表，或者编辑、创建、删除样式等。 二、 CSS样式的创建、编辑与导出 1.认识“CSS样式”面板 默认状态下“CSS样式”面板中显示的是“正在”选项卡，若当前打开的文档中已含有样式，则显示如左图所示的“CSS样式”面板，该选项卡分为3栏。“全部”选项卡的列表框中显示出当前文档中所包含的CSS样式，如右图。 二、 CSS样式的创建、编辑与导出 2.创建CSS样式 Dreamweaver允许用户自定义CSS样式，如果要自定义CSS样式，应先打开“新建CSS规则”对话框，选择要定义的“选择器类型”、定义“名称”和“定义在”后，单击“确定”按钮。 二、 CSS样式的创建、编辑与导出 2.创建CSS样式 打开“CSS规则定义”对话框，在该对话框中用户可根据需要定义CSS样式属性，如类型、背景、区块 、方框边框、列表、定位和扩展。完成后单击“确定 ”按钮即可在CSS样式面板中显示新建的CSS样式。 二、 CSS样式的创建、编辑与导出 3.移动样式创建新CSS样式表 右击“CSS样式”面板中要导出的内部样式，选择“移动CSS规则”命令，打开“移至外部样式表”对话框。选择“新样式表”单选按钮，单击“确定”按钮。在打开的对话框中输入样式表名称，单击“保存”按钮即可。 二、 CSS样式的创建、编辑与导出 4.链接或导入外部样式表 单