第18章 使用样式表

《第18章 使用样式表》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

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

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

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

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

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

6、4使用CSS样式面板在Dreamweaver中，可以使用CSS样式面板显示和编辑CSS样式，通过CSS样式面板编辑样式，可以更加方便直观，具体操作如下所示。1．打开CSS样式面板18.4使用CSS样式面板2．使用“全部”模式在“全部”模式下，如图18-20所示，CSS样式面板分为两个部分：上面是所有规则面板，下面是属性面板。在所有规则面板中，显示了页面以及链接文件中定义的所有CSS规则。18.4使用CSS样式面板3．使用“正在”模式在“正在”模式下，如图18-21所示，CSS样式面板分为三个部分：上面是所选内容摘要面板；中间是关于内容面板；下面是属性面板，其含义如下所示。18.4使用CSS样

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