第8章 修饰网页元素.pptVIP

* 第8章 修饰网页元素 本章将系统的介绍CSS样式的语法、规则定义和布局方法，以及使用Dreamweaver CS4通过可视化的方式编辑CSS样式的技巧等内容。除此之外，本章还将介绍CSS的进阶用法，即CSS的各种滤镜功能，帮助用户为网页添加丰富的视觉效果。 本章学习要点： * CSS样式表基础 使用CSS样式表 CSS语法 编辑CSS样式 CSS滤镜 8.1 CSS样式表基础 * CSS样式表是设计网页的一种重要工具，是CSS样式表是Web标准化体系中最重要的组成部分之一。因此，只有了解了CSS样式表，才能制作出符合Web标准化的网页。 8.1.1 CSS样式简介 * CSS（Cascading Style Sheets，层叠样式表）是一种应用于网页的标记语言，其作用是为HTML、XHTML以及XML等标记语言提供样式描述。当网页浏览器读取HTML、XHTML或XML文档时，同时将加载相对应的CSS样式，即将按照样式描述的格式显示网页内容。 根据CSS样式表存放的位置以及其应用的范围，可以将CSS样式表分为三种。 * 1．外部CSS 2．内部CSS 3．内联CSS 外部CSS是一种独立的CSS样式。其一般将CSS代码存放在一个独立的文本文件中，扩展名为“.css”。 内部CSS与内联CSS类似，都是将CSS代码放在XHTML文档中。但是内部样式并不是放在其设置的XHTML标签中，而是放在统一的style标签中。 内联CSS是利用XHTML标签的style属性设置的CSS样式，又称嵌入式样式。 8.1.2 CSS样式表语法 作为一种具有严格规范的数据表，CSS样式表具有独特的语句结构体系。在使用CSS样式表修饰网页元素时，应首先了解CSS样式表的语法。 * 1．CSS样式书写格式 2．属性值的使用 一条完整的CSS语句，通常由选择器、属性以及属性值组成。 CSS中的属性值主要分为3种，即数值、关键字以及特定意义的字符串等。 3．注释 CSS代码的注释分为两种，即单行注释以及多用途注释。 8.2 添加CSS样式 作为一种网页设计软件，Dreamweaver提供了强大的编辑CSS样式的功能。使用Dreamweaver CS4，用户既可以可视化的方式编辑CSS样式，也可以通过输入代码的方式编写CSS代码。 * 8.2.1 【CSS样式】面板 在Dreamweaver CS4中，提供了【CSS样式】面板，帮助用户添加和删除当前网页的CSS样式。 * CSS面板按钮 按钮11 名称 功能 切换到所有（文档）模式 显示当前网页中所有的CSS规则 切换到当前选择模式 显示当前选择的网页对象拥有的CSS规则 显示类别视图 显示所有CSS样式的属性 显示列表视图 显示当前选择的网页对象可使用的CSS规则 只显示设置属性 显示当前选择的网页对象已使用的CSS规则 附加样式表 为网页添加外部CSS样式链接 新建CSS规则 为网页创建CSS样式 编辑样式 编辑当前选择的CSS样式 删除CSS规则 删除当前选择的CSS样式 8.2.2 新建CSS样式规则 在Dreamweaver中，允许用户为任何网页标签、类或ID等创建CSS规则。在【CSS样式】面板中单击【新建CSS规则】按钮 ，即可打开【新建CSS规则】对话框。 * 新建CSS规则的属性 属性名 作用 选择器类型 类（可应用于任何HTML元素） 创建一个类选择器。选择该选项，则选择器名称的列表将保留为空以待用户输入类的名称 ID（仅应用于一个HTML元素） 创建一个ID选择器。选择该选项，则选择器名称的列表将保留为空以待用户输入ID的名称 标签（重新定义HTML元素） 创建一个标签选择器。选择该选项，则选择器名称的列表中将显示所有XHTML标签，同时在下方的文本域中将提供标签的简单介绍 复合内容（基于选择的内容） 创建一个应用选择方法或伪类、伪对象的选择器。选择该选项，则选择器名称的列表中将显示body标签及4种伪类选择器，同时在下方的文本域中将提供body标签的简单介绍 选择器名称 提供选择器名称的列表或输入文本域供用户选择或输入，随【选择器类型】的下拉列表而更新 规则定义 （仅限该文档） 创建一个内部的CSS样式规则 （新建样式表文件） 创建一个外部的CSS样式规则 8.2.3 附加CSS样式规则 使用Dreamweaver，用户还可以方便地将外部的CSS文件链接到当前打开的XHTML文档中。 CSS可应用的媒体类型 媒体类型 说明 媒体类型 说明 all 用于所有设备类型 projection 用于投影图像，如幻灯片 aural 用于语音和