在网页中使用CSS样式.docVIP

第十章在网页中使用CSS样式 CSS 即 Cascading Style Sheets，称为层叠样式表，又称级联样式表。CSS技术是一种格式化网页的标准方式，它通过设置CSS属性使网页元素获得各种不同的效果。它扩展了HTML的功能，使网页设计者能够以更有效的方式设计网页属性。本章介绍CSS技术的概念和应用。通过本章的学习，读者应该掌握以下内容： ·CSS样式的分类及应用方式 ·使用CSS样式表面板 ·建立CSS样式表 ·自定义CSS样式 ·链接外部CSS样式 ·复制CSS样式和导出CSS样式 10.1 CSS样式的分类及应用方式 10.1.1 CSS样式表概述 使用CSS定义的网页风格可以控制HTML语言标志的一些诸如字体、边框、颜色、背景等属性，也可以通过定义外部风格文件实现整个网站页面风格的统一。CSS不仅能定义文字格式，还可以为文字创造出丰富多彩的图形效果。使用文字加样式表来代替部分图形，以减少网页文件的字节数，提高网页的浏览速度，从而提高了网站的竞争力。使用CSS的滤镜功能，还可以直接对图形添加特效，就像图形处理软件一样，使网页更加绚丽。 CSS样式为一组样式，它的属性在HTML标签中依次出现，并不显示在浏览器中。CSS样式可以定义在HUE文档的标记里，也可以在外部附加文档中作为外加文件。此外，一个样式表可以作用多个页面，乃至整个站点，因此具有更好的易用性和扩展性。 使用CSS技术除了可以在单独网页中应用一致的格式以外，对于大网站的格式设置和维护更具有重要意义。将CSS样式定义到样式表文件中，然后在多个网页中同时应用该样式表中的样式，就能确保多个网页具有一致的格式，并且能够随时更新(只要更改样式表文件就可以使所有网页自动更新)，从而大大降低了网站的开发和维护工作量。由于CSS具有以上这些优点，它已经成为一种应用非常广泛的网页设计技术，甚至可以说，如果不懂CSS技术就很难设计出专业化的网站。 10.1.2 CSS样式的分类 Dreamweaver MX可以定义几种不同类型的CSS样式，并且可以使用不同的方法将其应用在网页文档中。通常有以下3种CSS样式。 (1)创建自定义样式(Custom CSS styles)：自定义CSS样式可以应用于任何文本。若将自定义样式应用于整段文本，则会在该段文本的源代码中加入CLASS属性，例如PCLASS=“testStyle”；若将自定义样式应用于一行文本，则在选择的文本源代码的两边插入包含了CLASS属性的SPAN标记。 (2)重定义HTML标签(HTML tag styles)：HTML标签样式为HTML标识符重新定义格式化，如H3。当重新定义格式化H3后，所有H3应用标识符的文本都会改变而应用新的样式。 (3)使用CSS选择器(CSS selector styles)：CSS选择器样式重新定义了特殊的标记组以及包含特殊序列号(ID)属性标记。如TDH3这样的标记组合表示在表格单元格中的文本应用二级标题；而#testStyle应用于所有包含属性值ID=“testStyle”的标记中。 10.1.3 CSS样式的应用方式 使用CSS的样式有以下几种方式。 (1)局部套用：使用CSS语法定义HTML标签，这种方式应用的CSS样式只能影响该HTML标签。 (2)内联式：将CSS语法写在文档头部的STYLE和/STYLE标签中，这种方式应用的CSS样式将影响整个页面。 (3)外联式：将创建好的CSS样式保存为.css文件，在多个文档中链接此.css文件，而在文档中不会出现CSS语法。当.css文件被修改时，所有链接此.css文件的页面将同时被更新。 10.1.4 CSS样式的冲突 在同一个文本中应用两种或两种以上的CSS样式，这些样式会相互冲突产生不可预料的效果。浏览器根据以下规则显示样式属性。 (1)如果在同一个文本中应用两种CSS样式，浏览器显示出两种样式中除冲突的属性之外的所有属性。 (2)如果在同一个文本中应用两种CSS样式相互冲突，浏览器显示出最里面的样式属性。 (3)如果存在直接冲突，自定义CSS样式的属性(应用CLASS属性的样式)将覆盖HTML标记样式的属性。 10.2 使用CSS样式表面板 使用CSS样式设置面板可以创建和管理CSS样式。通过下面的操作方法可以启用CSS样式表面板。 ·执行主菜单中的“窗口”→“CSS样式”命令。 ·在网页文档窗口的右侧，单击“设计”浮动面板的下拉三角形按钮。 ·按组合键Shift+F11键。 以上3种方法之一都可以打开CSS样式表面板，默认为“应用样式”视图，还可以切换到“编辑样式”视图，如图10-1所示。 图10-1 CSS样式表面板 在CSS样式面板中可以进行下面的操作。 (1)在列表中显示当前网页文档中的CSS样式。 (