012层叠样式表.ppt

1、第12章 层叠样式表 重点内容： 创建与编辑CSS样式 导入与链接样式 应用类样式 设置CSS样式属性,一、 层叠样式表概述 1.什么是CSS CSS全称Cascading Style Sheets，中文名为层叠样式表，也可简称为样式表，以下简称为CSS样式。CSS样式本身是一组格式设置规则，用于控制Web页内容的外观。网页设计最初用HTML标记来定义页面文档及格式，如标题、段落等，但这些标记不能满足更多的文档样式需求。为了解决这个问题，在1997公布了有关样式表的第一个标准CSS1，自CSS1的版本之后，又在1998年5月发布了CSS2版本，样式表得到了更多的充实。,一、 层叠样式表概述 2

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

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

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

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

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

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

8、“编辑样式”按钮，打开“CSS规则定义”对话框，在其中更改样式的各属性；或选择“CSS样式”面板中要编辑的CSS样式，然后单击要更改的属性，更改完毕按Enter键。,三、 应用类样式 1.应用自定义CSS样式 从属性面板“样式”下拉列表框中选择要应用样式。 在文档窗口中右击所选文本，选择“CSS样式”命令，从弹出的下级菜单中选择要应用的样式。 切换至“CSS样式”面板“全部”模式，右击要应用的样式，从弹出的快捷菜单中选择“套用”命令。 单击“CSS样式”面板中的 图标，从弹出的菜单中选择“套用”命令。 选择“文本”|“CSS样式”命令，从下级菜单中选择要应用的样式。,三、 应用类样式 2.删除

9、自定义CSS样式 单击“CSS样式”面板右下角的“删除”按钮。 在样式上右击，从弹出的快捷菜单中选择“删除”命令。 单击“CSS样式”面板右上角的 按钮，从弹出的快捷菜单中选择“删除”命令。,四、 设置CSS样式属性 1.设置“类型”属性 打开“CSS规则定义”对话框，确认当前显示“类型”选项卡，该选项卡可用于设置文本的相关属性：字体、大小、粗细、样式、变体、行高、大小写、修饰、颜色。,四、 设置CSS样式属性 2.设置“背景”属性 打开“CSS规则定义”对话框，选择“分类”列表框中的“背景”选项，该选项卡可用于设置网页背景属性：背景颜色/图像、重复、附件、水平和垂直位置。,四、 设置CSS样

10、式属性 3.设置“区块”属性 打开“CSS规则定义”对话框，选择“分类”列表框中的“区块”选项，该选项卡可用于设置区块的相关属性：单词间距、字母间距、垂直对齐、文本对齐、文字缩进、空格和显示。,四、 设置CSS样式属性 4.设置“方框”属性 打开“CSS规则定义”对话框，选择“分类”列表框中的“方框”选项，该选项卡可用于设置方框的相关属性： 宽、高、浮动、清除、填充和边界。,四、 设置CSS样式属性 5.设置“边框”属性 打开“CSS规则定义”对话框，选择“分类”列表框中的“边框”选项，该选项卡可用于设置边框的相关属性：上、下、左、右边框的“样式”、“宽度”和“颜色”。,四、 设置CSS样式属性 6.设置“列表”属性 打开“CSS规则定义”对话框，选择“分类”列表框中的“列表”选项，该选项卡中各选项的功能如下:类型、项目符号图像、位置。,四、 设置CSS样式属性 7.设置“定位”属性 打开“CSS规则定义”对话框，选择“分类”列表框中的“定位”选项，该选项卡可用于设置定位相关属性：类型、显示、宽、高、Z轴、溢出、定位和剪辑。,四、 设置CSS样式属性 8.设置“扩展”属性 打开“CSS规则定义”对话框，选择“分类”列表框中的“扩展”选项