搜索
网站建设章使用样式表使用样式表，不但可以定义文本等内容的格式，同时也可以对页面进行布局。在W3C发布的Web标准中，推荐使用CSS进行布局代替传统的表格布局。下面详细讲解关于CSS样式表的知识。网站建设样式表简介本节主要讲解样式表的基础知识，其中包括样式表的概念、样式表的作用，以及Web标准的基础知识。网站建设样式表的概念级联样式表又称为CSS，是CascadingStyleSheet的缩写，通常也简称为样式表，是W3C组织制定的，是用于控制网页样式的一种标记性语言，包括CSS1和CSS2两个部分，其中CSS2是1998年5月发布的，包含了CSS1的内容，也是现在通用的标准。网站建设样式表的作用样式表的主要作用是用来定义元素的显示效果。其中包括定义元素的大小、边框、边界、补白、背景等。同时样式表还可以定义元素内部文本的显示效果，包括字体的选择、字体的大小、字体的样式、行高、缩进等。除此之外，使用样式表还可以定义元素的显示位置、浮动效果，以及链接内容的显示效果等。使用样式表可以完成文档中所有内容的布局和修饰效果。网站建设推荐的页面布局Web标准可以分为三方面：结构标准语言（主要包括XHTML和XML）、表现标准语言（主要包括CSS）、行为标准（主要包括对象模型、ECMAScript）。下面简单介绍一下这些标准。1．结构标准语言结构标准语言包括两个部分：XML、XHTML。其具体区别如下所示。网站建设推荐的页面布局2．表现标准语言CSS是CascadingStyleSheet（层叠样式表）的缩写。目前推荐遵循的是W3C于1998年5月12日推出的CSS2。CSS标准建立的目的是CSS进行网页布局，控制网页的表现。CSS标准布局与XHTML结构语言相结合，可以实现表现与结构相分离，提高网站的使用性和可维护性。网站建设推荐的页面布局3．行为标准行为标准也包括两个部分：DOM、ECMAScript。其具体区别如下所示。DOM是DocumentObjectModel（文档对象模型）的缩写。W3C建立的W3CDOM是建立网页与Script（或程序语言）沟通的桥梁。其实现了访问页面中标准组件的一种标准方法。网站建设样式使用Dreamweaver新建CSS样式时，可以选择CSS的类型，其中每种类型的作用和注意事项都不相同。下面分别进行讲解。网站建设样式在Dreamweaver中新建CSS样式的方法，如下所示。网站建设使用类在Dreamweaver中，类型样式可以使用在多个内容上。具体操作如下所示。网站建设使用标签在Dreamweaver中的标签类型样式，可以使用在所有相同标签内容上。具体操作如下所示。网站建设使用高级在Dreamweaver中，高级类型样式在文档中是唯一标识的标签内容，同时会为相应标签添加唯一标识的ID。具体操作如下所示。网站建设样式文件和附加样式在Dreamweaver中，可以新建独立的CSS样式文件，并通过附加样式的方法，使用文档外独立的样式文件。下面分别进行讲解。网站建设样式文件在Dreamweaver中新建CSS样式文件的操作，如下所示。网站建设使用附加样式在Dreamweaver中，可以通过附加样式的方法，使用文档以外的CSS样式文件，具体操作如下所示。网站建设样式面板在Dreamweaver中，可以使用CSS样式面板显示和编辑CSS样式，通过CSS样式面板编辑样式，可以更加方便直观，具体操作如下所示。1．打开CSS样式面板网站建设样式面板2．使用“全部”模式在“全部”模式下，如图18-20所示，CSS样式面板分为两个部分：上面是所有规则面板，下面是属性面板。在所有规则面板中，显示了页面以及链接文件中定义的所有CSS规则。网站建设样式面板3．使用“正在”模式在“正在”模式下，如图18-21所示，CSS样式面板分为三个部分：上面是所选内容摘要面板；中间是关于内容面板；下面是属性面板，其含义如下所示。网站建设样式面板4．使用属性面板在属性面板的底部，含有更改面板显示和操作的按钮，其中部分按钮的作用，如下所示。网站建设属性在Dreamweaver中，可以定义的CSS属性有很多，其中包括类型、背景、区块、方框、边框、列表、定位、扩展等8个类别。下面通过示例，讲解每种类别中各个属性使用的属性值和效果。其中示例中使用的元素和内容，在未定义任何样式时，显示效果如图所示。网站建设类型属性在CSS规则定义对话框中，选择分类中的“类型”选项，打开“类型”选项对话框，在“类型”选项中，可以定义元素三个部分的显示效果，分别为定义字体的相关属性、定义段落的相关属性、定义文本的样式。下面分别进行讲解。1．定义字体的相关属性网站建设类型属性2．定义段落的相关属性段落的相关属性，主要是指段落中文本的行高属性，具体操作如下所示。网站建设类型属性3．定义文本的样式文本的样式是指段落中文本的下划线、上划线或者删除线等属性，具体操作如下所示。网站建设背景属性在CSS规则中，背景属性用来定义元素使用的背景颜色、背景图像，以及背景图像的显示位置、重复效果等，具体操作如下所示。网站建设区块属性在CSS规则中，区块属性用来定义元素中文本的文字间距、对齐效果、文本缩进、空格的显示等，具体操作如下所示。网站建设方框属性在CSS规则中，方框属性用来定义元素的宽度、高度、元素和内容之间的距离、元素和其他元素之间的距离，以及浮动和清除等，具体操作如下所示。网站建设边框属性在CSS规则中，边框属性用来定义元素边框的显示效果、边框宽度、边框颜色等，具体操作如下所示。网站建设列表属性在CSS规则中，列表属性用来定义列表元素中项目符号的显示效果、项目符号的替代图像、项目符号的显示位置等，具体操作如下所示。网站建设定位属性在CSS规则中，定位属性用来定义元素边框的显示效果、边框宽度、边框颜色等，具体操作如下所示。网站建设扩展属性在CSS规则中，扩展属性用来定义打印时的分页效果、光标的显示效果、CSS滤镜等，具体操作如下所示。网站建设滤镜在Dreamweaver中，选择分类中的“扩展”选项，打开CSS规则定义对话框，在“过滤器”选项中可以定义各种CSS滤镜，其中部分滤镜的使用方法如下所示。1．“透明度”滤镜网站建设滤镜2．“模糊”滤镜网站建设滤镜3．“波浪”滤镜网站建设定义链接的样式在Dreamweaver中，可以使用CSS样式定义链接内容使用的样式，具体操作如下所示。网站建设专家总结CSS样式表的内容很多，也较为复杂，其主要作用是用来定义页面中各种元素的显示效果。在学习CSS样式表的内容时，主要掌握各种CSS属性的表现效果及其定义方法。另外，要注意部分CSS样式表在不同的浏览器中有不同的解释方式。最后的CSS滤镜内容，由于只能在IE浏览器的各个版本中才能正常显示，所以在实际应用中，尽量避免使用（站点不考虑兼容其他浏览器的情况除外）。