网页制作技术第10章.pptVIP

第 10 章 在网页中使用CSS样式 10.1 CSS样式的分类及应用方式 10.2 使用CSS样式表面板 10.3 新 建 CSS样式 10.4 设置“CSS样式定义”对话框参数 10.5 自定义CSS样式 10.6 链接外部CSS样式 10.7 编 辑 CSS 样 式 10.8 复 制 CSS 样 式 10.9 导 出 CSS 样 式 10.10 CSS样式转化为HTML标签 CSS即Cascading Style Sheets，称为层叠样式表，又称级联样式表。CSS技术是一种格式化网页的标准方式，它通过设置CSS属性使网页元素获得各种不同的效果。它扩展了HTML的功能，使网页设计者能够以更有效的方式设计网页属性。 10.1 CSS样式的分类及应用方式 10.1.1 CSS样式表概述 使用CSS定义的网页风格可以控制HTML语言标志的一些诸如字体、边框、颜色、背景等属性，也可以通过定义外部风格文件实现整个网站页面风格的统一。CSS不仅能定义文字格式，还可以为文字创造出丰富多彩的图形效果。使用文字加样式表来代替部分图形，以减少网页文件的字节数，提高网页的浏览速度，从而提高了网站的竞争力。 CSS样式为一组样式，它的属性在HTML标签中依次出现，并不显示在浏览器中。 使用CSS技术除了可以在单独网页中应用一致的格式以外，对于大网站的格式设置和维护更具有重要意义。将CSS样式定义到样式表文件中，然后在多个网页中同时应用该样式表中的样式，就能确保多个网页具有一致的格式，并且能够随时更新（只要更改样式表文件就可以使所有网页自动更新），从而大大降低了网站的开发和维护工作量。 10.1.2 CSS样式的分类 Dreamweaver MX可以定义几种不同类型的CSS样式，并且可以使用不同的方法将其应用在网页文档中。通常有以下3种CSS样式。 （1）创建自定义样式 （Custom CSS styles） （2）重定义HTML标签 （HTML tag styles） （3）使用CSS选择器 （CSS selector styles） 10.1.3 CSS样式的应用方式 使用CSS的样式有以下几种方式。 （1）局部套用 （2）内联式 （3）外联式 10.1.4 CSS样式的冲突 在同一个文本中应用两种或两种以上的CSS样式，这些样式会相互冲突产生不可预料的效果。 10.2 使用CSS样式表面板 使用CSS样式设置面板可以创建和管理CSS样式。 10.3 新 建 CSS样式 在“新建CSS样式”对话框中可以进行下列各项的设置。 10.4 设置“CSS样式定义”对话框参数 通过设置“CSS样式定义”对话框，可以定义CSS样式表的格式化参数。 10.4.1 定义CSS样式的“类型”（Type）属性 选择“CSS样式定义”对话框中“分类”列表中的“类型”选项，可以对CSS样式的“类型”属性进行设置 。 10.4.2 定义CSS样式的“背景”（Background）属性 选择“CSS样式定义”对话框中“分类”列表中的“背景”选项，可以对CSS样式的“背景”属性进行设置 。 10.4.3 定义CSS样式的“区块”（Block）属性 选择“CSS样式定义”对话框中“分类”列表中的“区块”选项，可以对CSS样式的“区块”属性进行设置 。 10.4.4 定义CSS样式的“盒子”（Box）属性 选择“CSS样式定义”对话框中“分类”列表中的“盒子”选项，可以对CSS样式的“盒子”属性进行设置 。 10.4.5 定义CSS样式的“边框”（Border）属性 选择“CSS样式定义”对话框中“分类”列表中的“边框”选项，可以对CSS样式的“边框”属性进行设置 。 10.4.6 定义CSS样式的“列表”（List）属性 选择“CSS样式定义”对话框中“分类”列表中的“列表”选项，可以对CSS样式的“列表”属性进行设置 。 10.4.7 定义CSS样式的“定位”（Positioning）属性 选择“CSS样式定义”对话框中“分类”列表中的“定位”选项，可以对CSS样式的“定位”属性进行设置 。 10.4.8 定义CSS样式的“扩展”（Extensions）属性 选择“CSS样式定义”对话框中“分类”列表中的“扩展”选项，可以对CSS样式的“扩展”属性进行设置 。 10.5 自定义CSS样式 自定义CSS样式是惟一可以应用在网页文档中所有文本上的CSS样式，在CSS样式面板中的“应用样式”视图下显示所有与网页文档关联的自定义样式。当然，如果文本中应用多个CSS样式，就会引起样式冲突，产生意想不到的后果。 10.5.1 应用自定义