在网页中使用css样式

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

1、第十章在网页中使用CSS样式CSS即CascadingStyleSheets，称为层叠样式表，又称级联样式表。CSS技术是一种格式化网页的标准方式，它通过设置CSS属性使网页元素获得各种不同的效果。它扩展了HTML的功能，使网页设计者能够以更有效的方式设计网页属性。本章介绍CSS技术的概念和应用。通过本章的学习，读者应该掌握以下内容：·CSS样式的分类及应用方式·使用CSS样式表面板·建立CSS样式表·自定义CSS样式·链接外部CSS样式·复制CSS样式和导出CSS样式10.1CSS样式的分类及应用方式10.1.1CSS样式表概述使用CSS定义的网页风格可以控制HTML语言标志的一些诸如字

2、体、边框、颜色、背景等属性，也可以通过定义外部风格文件实现整个网站页面风格的统一。CSS不仅能定义文字格式，还可以为文字创造出丰富多彩的图形效果。使用文字加样式表来代替部分图形，以减少网页文件的字节数，提高网页的浏览速度，从而提高了网站的竞争力。使用CSS的滤镜功能，还可以直接对图形添加特效，就像图形处理软件一样，使网页更加绚丽。CSS样式为一组样式，它的属性在HTML标签中依次出现，并不显示在浏览器中。CSS样式可以定义在HUE文档的标记里，也可以在外部附加文档中作为外加文件。此外，一个样式表可以作用多个页面，乃至整个站点，因此具有更好的易用性和扩展性。使用CSS技术除了可以在单独网页中

3、应用一致的格式以外，对于大网站的格式设置和维护更具有重要意义。将CSS样式定义到样式表文件中，然后在多个网页中同时应用该样式表中的样式，就能确保多个网页具有一致的格式，并且能够随时更新(只要更改样式表文件就可以使所有网页自动更新)，从而大大降低了网站的开发和维护工作量。由于CSS具有以上这些优点，它已经成为一种应用非常广泛的网页设计技术，甚至可以说，如果不懂CSS技术就很难设计出专业化的网站。10.1.2CSS样式的分类DreamweaverMX可以定义几种不同类型的CSS样式，并且可以使用不同的方法将其应用在网页文档中。通常有以下3种CSS样式。(1)创建自定义样式(CustomCSSs

4、tyles)：自定义CSS样式可以应用于任何文本。若将自定义样式应用于整段文本，则会在该段文本的源代码中加入CLASS属性，例如PCLASS=“testStyle”；若将自定义样式应用于一行文本，则在选择的文本源代码的两边插入包含了CLASS属性的SPAN标记。(2)重定义HTML标签(HTMLtagstyles)：HTML标签样式为HTML标识符重新定义格式化，如

。当重新定义格式化

后，所有

应用标识符的文本都会改变而应用新的样式。(3)使用CSS选择器(CSSselectorstyles)：CSS选择器样式重新定义了特殊的标记组以及包含特殊序列号(ID)属性标记。如

5、

这样的标记组合表示在表格单元格中的文本应用二级标题；而#testStyle应用于所有包含属性值ID=“testStyle”的标记中。10.1.3CSS样式的应用方式使用CSS的样式有以下几种方式。(1)局部套用：使用CSS语法定义HTML标签，这种方式应用的CSS样式只能影响该HTML标签。(2)内联式：将CSS语法写在文档头部的标签中，这种方式应用的CSS样式将影响整个页面。(3)外联式：将创建好的CSS样式保存为.css文件，在多个文档中链接此.css文件，而在文档中不会出现CSS语法。当.css文件被修改时，所有链接此.css文件的页面

6、将同时被更新。10.1.4CSS样式的冲突在同一个文本中应用两种或两种以上的CSS样式，这些样式会相互冲突产生不可预料的效果。浏览器根据以下规则显示样式属性。(1)如果在同一个文本中应用两种CSS样式，浏览器显示出两种样式中除冲突的属性之外的所有属性。(2)如果在同一个文本中应用两种CSS样式相互冲突，浏览器显示出最里面的样式属性。(3)如果存在直接冲突，自定义CSS样式的属性(应用CLASS属性的样式)将覆盖HTML标记样式的属性。10.2使用CSS样式表面板使用CSS样式设置面板可以创建和管理CSS样式。通过下面的操作方法可以启用CSS样式表面板。·执行主菜单中的“窗口”→“CSS样式

7、”命令。·在网页文档窗口的右侧，单击“设计”浮动面板的下拉三角形按钮。·按组合键Shift+F11键。以上3种方法之一都可以打开CSS样式表面板，默认为“应用样式”视图，还可以切换到“编辑样式”视图，如图10-1所示。图10-1CSS样式表面板在CSS样式面板中可以进行下面的操作。(1)在列表中显示当前网页文档中的CSS样式。(2)单击该面板底部工具栏上的“附加样式表”按钮，将打开“链接外部样式表”对话框，链接或导入外部