第18章 使用样式表.ppt

1、第18章 使用样式表,使用样式表，不但可以定义文本等内容的格式，同时也可以对页面进行布局。在W3C发布的Web标准中，推荐使用CSS进行布局代替传统的表格布局。下面详细讲解关于CSS样式表的知识。,使用样式表，不但可以定义文本等内容的格式，同时也可以对页面进行布局。在W3C发布的Web标准中，推荐使用CSS进行布局代替传统的表格布局。下面详细讲解关于CSS样式表的知识。,18.1 样式表简介,本节主要讲解样式表的基础知识，其中包括样式表的概念、样式表的作用，以及Web标准的基础知识。,18.1.1 样式表的概念,级联样式表又称为CSS，是Cascading Style Sheet的缩写，通常也

2、简称为样式表，是W3C组织制定的，是用于控制网页样式的一种标记性语言，包括CSS1和CSS2两个部分，其中CSS2是1998年5月发布的，包含了CSS1的内容，也是现在通用的标准。,18.1.2 样式表的作用,样式表的主要作用是用来定义元素的显示效果。其中包括定义元素的大小、边框、边界、补白、背景等。同时样式表还可以定义元素内部文本的显示效果，包括字体的选择、字体的大小、字体的样式、行高、缩进等。除此之外，使用样式表还可以定义元素的显示位置、浮动效果，以及链接内容的显示效果等。使用样式表可以完成文档中所有内容的布局和修饰效果。,18.1.3 W3C推荐的页面布局,Web标准可以分为三方面：结构

3、标准语言（主要包括XHTML和XML）、表现标准语言（主要包括CSS）、行为标准（主要包括对象模型、ECMAScript）。下面简单介绍一下这些标准。 1结构标准语言 结构标准语言包括两个部分：XML、XHTML。其具体区别如下所示。,18.1.3 W3C推荐的页面布局,2表现标准语言 CSS是Cascading Style Sheet（层叠样式表）的缩写。目前推荐遵循的是W3C于1998年5月12日推出的CSS2。CSS标准建立的目的是CSS进行网页布局，控制网页的表现。CSS标准布局与XHTML结构语言相结合，可以实现表现与结构相分离，提高网站的使用性和可维护性。,18.1.3 W3C推荐

4、的页面布局,3行为标准 行为标准也包括两个部分：DOM、ECMAScript。其具体区别如下所示。 DOM是Document Object Model（文档对象模型）的缩写。W3C建立的W3C DOM是建立网页与 Script（或程序语言）沟通的桥梁。其实现了访问页面中标准组件的一种标准方法。,18.2 创建CSS样式,使用Dreamweaver新建CSS样式时，可以选择CSS的类型，其中每种类型的作用和注意事项都不相同。下面分别进行讲解。,18.2.1 新建CSS样式,在Dreamweaver中新建CSS样式的方法，如下所示。,18.2.2 使用类,在Dreamweaver中，类型样式可以使

5、用在多个内容上。具体操作如下所示。,18.2.3 使用标签,在Dreamweaver中的标签类型样式，可以使用在所有相同标签内容上。具体操作如下所示。,18.2.4 使用高级,在Dreamweaver中，高级类型样式在文档中是唯一标识的标签内容，同时会为相应标签添加唯一标识的ID。具体操作如下所示。,18.3 新建CSS样式文件和附加样式,在Dreamweaver中，可以新建独立的CSS样式文件，并通过附加样式的方法，使用文档外独立的样式文件。下面分别进行讲解。,18.3.1 新建CSS样式文件,在Dreamweaver中新建CSS样式文件的操作，如下所示。,18.3.2 使用附加样式,在Dr

6、eamweaver中，可以通过附加样式的方法，使用文档以外的CSS样式文件，具体操作如下所示。,18.4 使用CSS样式面板,在Dreamweaver中，可以使用CSS样式面板显示和编辑CSS样式，通过CSS样式面板编辑样式，可以更加方便直观，具体操作如下所示。 1打开CSS样式面板,18.4 使用CSS样式面板,2使用“全部”模式 在“全部”模式下，如图18-20所示，CSS样式面板分为两个部分：上面是所有规则面板，下面是属性面板。 在所有规则面板中，显示了页面以及链接文件中定义的所有CSS规则。,18.4 使用CSS样式面板,3使用“正在”模式 在“正在”模式下，如图18-21所示，CSS

7、样式面板分为三个部分：上面是所选内容摘要面板；中间是关于内容面板；下面是属性面板，其含义如下所示。,18.4 使用CSS样式面板,4使用属性面板 在属性面板的底部，含有更改面板显示和操作的按钮，其中部分按钮的作用，如下所示。,18.5 设置CSS属性,在Dreamweaver中，可以定义的CSS属性有很多，其中包括类型、背景、区块、方框、边框、列表、定位、扩展等8个类别。下面通过示例，讲解每种类别中各个属性使用的属性值和效果。其中示例中使用的元素和内容，在未定义任何样式时，显示效果如图所示。,18.5.1 类型属性,在CSS规则定义对话框中，选择分类中的“类型”选项，打开“类型”选项对话框，在

8、“类型”选项中，可以定义元素三个部分的显示效果，分别为定义字体的相关属性、定义段落的相关属性、定义文本的样式。下面分别进行讲解。 1定义字体的相关属性,18.5.1 类型属性,2定义段落的相关属性 段落的相关属性，主要是指段落中文本的行高属性，具体操作如下所示。,18.5.1 类型属性,3定义文本的样式 文本的样式是指段落中文本的下划线、上划线或者删除线等属性，具体操作如下所示。,18.5.2 背景属性,在CSS规则中，背景属性用来定义元素使用的背景颜色、背景图像，以及背景图像的显示位置、重复效果等，具体操作如下所示。,18.5.3 区块属性,在CSS规则中，区块属性用来定义元素中文本的文字间

9、距、对齐效果、文本缩进、空格的显示等，具体操作如下所示。,18.5.4 方框属性,在CSS规则中，方框属性用来定义元素的宽度、高度、元素和内容之间的距离、元素和其他元素之间的距离，以及浮动和清除等，具体操作如下所示。,18.5.5 边框属性,在CSS规则中，边框属性用来定义元素边框的显示效果、边框宽度、边框颜色等，具体操作如下所示。,18.5.6 列表属性,在CSS规则中，列表属性用来定义列表元素中项目符号的显示效果、项目符号的替代图像、项目符号的显示位置等，具体操作如下所示。,18.5.7 定位属性,在CSS规则中，定位属性用来定义元素边框的显示效果、边框宽度、边框颜色等，具体操作如下所示。,18.5.8 扩展属性,在CSS规则中，扩展属性用来定义打印时的分页效果、光标的显示效果、CSS滤镜等，具体操作如下所示。,18.5.9 CSS滤镜,在Dreamweaver中，选择分类中的“扩展”选项，打开CSS规则定义对话框，在“过滤器”选项中可以定义各种CSS滤镜，其中部分滤镜的使用方法如下所示。 1“透明度”滤镜,18.5.9 CSS滤镜,2“模糊”滤镜,18.5.9 CSS滤镜,3“波浪”滤镜,18.6 定义链接的样式,在Dreamweaver中，可以使用CSS样式定义链接内容使用的样式，具体操作如下所示。,18.7 专家总结,CSS样式表的内容很多，也较为复杂，其主要作