在网页中使用CSS样式

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

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

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

4、常有以下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

5、selector styles)：CSS选择器样式重新定义了特殊的标记组以及包含特殊序列号(ID)属性标记。如<TD><H3>这样的标记组合表示在表格单元格中的文本应用二级标题；而#testStyle应用于所有包含属性值ID=“testStyle”的标记中。10.1.3 CSS样式的应用方式使用CSS的样式有以下几种方式。(1)局部套用：使用CSS语法定义HTML标签，这种方式应用的CSS样式只能影响该HTML标签。(2)内联式：将CSS语法写在文档头部的<STYLE>和</STYLE>标签中，这种方式应用的CSS样式将影响整个页面。(3)外联式

6、：将创建好的CSS样式保存为.css文件，在多个文档中链接此.css文件，而在文档中不会出现CSS语法。当.css文件被修改时，所有链接此.css文件的页面将同时被更新。10.1.4 CSS样式的冲突在同一个文本中应用两种或两种以上的CSS样式，这些样式会相互冲突产生不可预料的效果。浏览器根据以下规则显示样式属性。(1)如果在同一个文本中应用两种CSS样式，浏览器显示出两种样式中除冲突的属性之外的所有属性。(2)如果在同一个文本中应用两种CSS样式相互冲突，浏览器显示出最里面的样式属性。(3)如果存在直接冲突，自定义CSS样式的属性(应用CLASS属性的样式)将覆盖HTML标记样式的属性。10

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

8、接或导入外部的CSS样式表。(3)单击该面板底部工具栏上的“新建CSS样式”按钮，将打开“新建CSS样式”对话框，设置新建CSS样式表的类型。(4)单击该面板底部工具栏上的“编辑样式表.”按钮，将打开“编辑样式表”对话框，设置CSS样式表的属性。(5)单击该面板底部工具栏上的“删除CSS样式”按钮，将删除选定的CSS样式表，并删除应用该CSS样式表的格式。此外，用鼠标右击CSS样式面板中的样式名称，从弹出的快捷菜单中选择相关命令，也可以完成上面的操作，如图10-2所示。10.3 新建CSS样式上面介绍了CSS样式的类型、使用方式，以及操作CSS样式面板的基本方法。下面将了解新建CSS样式的方法

9、。具体操作步骤如下。(1)将光标插入点置于网页文档中的适当位置。(2)打开“CSS样式表”设置面板，单击“新建CSS样式”按钮，打开“新建CSS样式”对话框，如图10-3所示。图10-3 “新建CSS样式”对话框在“新建CSS样式”对话框中可以进行下列各项的设置。在“类型”区域中选择“创建自定义样式”选项，然后在“名称”下拉列表框中输入新建CSS样式的名称。在“类型”区域中选择“重定义HTML标签”选项，然后在“标签”下拉列表框中输入或从中选择一种HTML标签，如图10-4所示。图10-4 “重定义HTML标签”选项对话框在“类型”区域中选择“使用CSS选择器”选项，然后在“选择器”下拉列表框

10、中输入一个或多个HTML标签，也可以从下拉列表框中选择一种状态。如图10-5所示，共有以下4种状态。图10-5 “使用CSS选择器”选项对话框·a：link：超链接的正常显示状态。·a：visited：已访问超链接的状态。·a：hover：鼠标停留在超链接上时的状态。·a：active：表示超链接有激活状态。在“定义在”区域中选择新建CSS样式的位置。新建样式表文件：用于创建外部的样式表。仅对该文档：将新建的CSS样式嵌入到当前网页文档中。(3)单击“确定”按钮完成设置，同时打开“保存样式表文件为”对话框，如图10-6所示。选择要保存的位置，指定文件名(

11、默认的文件类型为.css)，然后单击“保存”按钮。图10-6 “保存样式表文件为”对话框(4)接着又弹出“CSS样式定义”对话框，如图10-7所示，可以定义CSS样式各项参数(具体方法见10.4节)。图10-7 “CSS样式定义”对话框(5)在“CSS样式定义”对话框中设置完成后，单击“确定”按钮，生成CSS样式，并在CSS样式面板中显示刚刚创建的CSS样式。10.4 设置“CSS样式定义”对话框参数通过设置“CSS样式定义”对话框，可以定义CSS样式表的格式化参数。在该对话框左侧的“分类”列表框中选择不同的属性进行设置。10.4.1 定义CSS样式的“类型”(Type)属性选择“CSS样式定

12、义”对话框中“分类”列表中的“类型”选项，可以对CSS样式的“类型”属性进行设置，如图10-8所示。图10-8 定义CSS样式的“类型”属性在该对话框中可以对“类型”属性进行如下设置。(1)在“字体”下拉列表框中选择需要的字体。(2)在“大小”下拉列表框中设置字体的大小。可以选择参数值，也可以直接输入数值，并从其右侧的单位设置框中选择适合的参数值。(3)在“样式”下拉列表框中设置字体的风格。·正常：设置文本为正常字体。·斜体：设置文本为斜体字体。·偏斜体：设置文本为倾斜字体。(4)在“行高”下拉列表框中设置文本的高度。正常：自动指定文本行的高度。值：直接输入参数值

13、来设置文本行的高度，其右侧可以选择高度参数的单位。(5)在“粗细”下拉列表框中设置字体的粗细。可以从中选择相对的参数，如“粗体”：也可以直接选择参数值，如“600”。(6)在“变量”下拉列表框中设置文本的变形格式。需要说明的是，Internet Explorer支持文本的变形格式，Netscape Navigator不支持文本的变形格式。(7)在“大小写”下拉列表框中设置文本中字母的格式。·首字母大写：每个单词的第一个字母都要大写。·大写：所有字母都为大写。·小写：所有字母都为小写。·无：字母保持原有的格式。(8)在“修饰”选择域中设置文本的修饰形式。&

14、#183;下划线：为文本添加下划线。·上划线：为文本添加上划线。·删除线：为文本添加删除线。·闪烁：设置文本为闪烁。·无文本：不需要任何修饰。(9)在“颜色”调色板中可以为文本选择一种颜色。10.4.2 定义CSS样式的“背景”(Background )属性选择“CSS样式定义”对话框中“分类”列表中的“背景”选项，可以对CSS样式的“背景”属性进行设置，如图10-9所示。图10-9 定义CSS样式的“背景”属性在该对话框中可以对“背景”属性进行如下设置。(1)在“背景颜色”调色板中可以为样式选择一种合适的背景色。(2)在“背景图像”下拉列表框中选择或搜

15、索所需的背景图像。(3)在“重复”下拉列表框中选择背景图像的重复显示方式。·无重复：只在应用样式的元素前端显示一次图像。·重复：在应用样式的元素背景上的垂直和水平方向上重复显示图像。·横向重复：在应用样式的元素背景上的水平方向上重复显示图像。·纵向重复：在应用样式的元素背景上的垂直方向上重复显示图像。(4)在“附件”下拉列表框中选择背景图像的显示形式。·固定：背景图像固定在原始位置。·滚动：背景图像以滚动的形式显示。(5)在“水平位置”下拉列表框中选择背景图像相对于元素的水平位置。·左对齐：背景图像相对于元素为左对齐。

16、83;右对齐：背景图像相对于元素为右对齐。·居中：背景图像相对于元素为居中对齐。·值：输入参数值用于确定背景图像在水平方向上相对于元素的位置。(6)在“垂直位置”下拉列表框中选择背景图像相对于元素的垂直位置。·顶端：背景图像与元素的顶部对齐。·居中：背景图像相对于元素为居中对齐。·底部：背景图像与元素的底部对齐。·值：输入参数值用于确定背景图像在垂直方向上相对于元素的位置。10.4.3 定义CSS样式的“区块”(Block)属性选择“CSS样式定义”对话框中“分类”列表中的“区块”选项，可以对CSS样式的“区块”属性进行设置，如图10

17、-10所示。图10-10 定义CSS样式的“区块”属性在该对话框中可以对“区块”属性进行如下设置。(1)在“单词间距”下拉列表框中设置单词的间距。有“正常”和“值”两种选项，若选择了“值”项，则可以在其右侧的下拉列表框中选择一个合适的单位。(2)在“字母间距”下拉列表框中设置字符的问距。有“正常”和“值”两种选项，若选择了“值”项，则可以在其右侧的下拉列表框中选择一个适合的单位。若输入负的参数值，则可以减小字符的间距。(3)在“垂直对齐”下拉列表框中设置元素相对于其父级元素在垂直方向上的对齐方式。(4)在“文本对齐”下拉列表框中设置文本相对于其他元素的对齐方式。(5)在“文字缩进”文本框中输入

18、参数值及指定右侧的单位，可以设置文本的首行缩进量。(6)在“空格”下拉列表框中选择处理空格的方式。·正常：将多个空格合并为一个空格。·保留：保留元素的预格式化形式。·不换行：设置文本为不自动换行，只有当用户使用<BR>标签时才强制换行。(7)在“显示”下拉列表框中指定要显示的元素。10.4.4 定义CSS样式的“盒子”(Box)属性选择“CSS样式定义”对话框中“分类”列表中的“盒子”选项，可以对CSS样式的“盒子”属性进行设置，如图10-11所示。图10-11 定义CSS样式的“盒子”属性在该对话框中可以对“盒子”属性进行如下设置。(1)在“宽”和“

19、高”下拉列表框中设置元素的宽度和高度值及度量单位。(2)在“浮动”下拉列表框中选择元素的浮动位置。通过设置可以将元素移动到页面之外，使之浮动于页面的左边缘或右边缘。(3)在“清除”下拉列表框中选择不允许层应用该CSS样式的元素边界。(4)在“填充”选择区域中设置元素和元素边界之间空白的大小，用以确定元素和元素边界之间的距离。(5)在“边界”选择区域中设置元素和其他元素之间空白的大小，用以确定元素之间的距离。(6)如果选中“全部相同”复选框，则采用相同的设置。10.4.5 定义CSS样式的“边框”(Border)属性选择“CSS样式定义”对话框中“分类”列表中的“边框”选项，可以对CSS样式的“

20、边框”属性进行设置，如图10-12所示。图10-12 定义CSS样式的“边框”属性在该对话框中可以对“边框”属性进行如下设置。(1)在“样式”选择区域中设置边框的风格，如果选择“全部相同”复选框，将设置元素顶部、底部、左边、右边框为同一风格。下面是可供选择的边框风格。·无：不需要设置边框。·虚线：设置边框为点线。·点划线：设置边框为短划线。·实线：设置边框为实线。·双线：设置边框为双线。·槽状：设置边框为凹线。·脊状：设置边框为波浪线。·凹线：设置边框为内嵌线。·凸线：设置边框为外嵌线。(2)在“宽度”选

21、择区域中可以分别设置元素的顶部、右边、底部和左边的边框的宽度。若选中“全部相同”复选框，则可以将它们的边框都设置成相同的宽度。·细：设置边框宽度为细。·中：设置边框宽度为中等粗细。·粗：设置边框宽度为浏览器的默认粗细。·值：输入具体参数值来定义边框的宽度。(3)在“颜色”选择区域中设置元素顶部、右边、底部和左边边框的颜色。10.4.6 定义CSS样式的“列表”(List)属性选择“CSS样式定义”对话框中“分类”列表中的“列表”选项，可以对CSS样式的“列表”属性进行设置，如图10-13所示。图10-13 定义CSS样式的“列表”属性在该对话框中可以对“

22、列表”属性进行如下设置。(1)在“类型”下拉列表框中选择无序列表的项目符号以及有序列表的项目编号类型。共有以下几种选项。·无：不设置无序列表的项目符号。·圆点：采用圆点作为无序列表的项目符号。·圆圈：采用圆环作为无序列表的项目符号。·方块：采用方块作为无序列表的项目符号。·数字：采用数字作为无序列表的项目符号。·小写罗马数字：采用小写罗马数字作为有序列表的项目编号。·大写罗马数字：采用大写罗马数字作为有序列表的项目编号。·小写字母：采用小写希腊数字作为有序列表的项目编号。·大写字母：采用大写希腊数字作为有

23、序列表的项目编号。(2)在“项目符号图像”下拉列表框中选择或浏览搜索指定的图像作为无序列表的项目符号。(3)在“位置”下拉列表框中设置列表项的换行位置。有下列两个选项。内：当列表项超出范围后自动换行，并以缩进的形式显示。外：当列表项超出范围后自动换行，显示在旁边的空白上，没有任何缩进。10.4.7 定义CSS样式的“定位”(Positioning )属性选择“CSS样式定义”对话框中“分类”列表中的“定位”选项，可以对CSS样式的“定位”属性进行设置，如图10-14所示。图10-14 定义CSS样式的“定位”属性在该对话框中可以对“定位”属性进行如下设置。(1)在“类型”下拉列表框中设置层的放

24、置方式。·绝对：是以页面的左上角为坐标基准。·相对：是以页面上的对象或文字为坐标基准。·静止：保持原来的位置不变。(2)在“显示”下拉列表框中设置层的初始化显示属性。·继承：可以继承父级层的可见性。·可见：可以显示层。·隐藏：将层隐藏起来。(3)在“宽”和“高”下拉列表框中可以指定层的大小。(4)在“Z轴”下拉列表框中可以设置层的重叠顺序。z轴可以是正数，也可以是负数，其参数值的相对大小决定了层的重叠顺序，值越大则该层的顺序越靠前；若值取负数，则将该层置于文本等其他元素的下面。(5)在“溢出”下拉列表框中设置当前层中的内容超过层的范围

25、时的显示方式。·可见：层将自动扩展以显示整个内容。·隐藏：层的大小保持不变，不显示超出的部分。·滚动：层的大小保持不变，只是出现滚动条，拖动滚动条可以显示超出的内容。·自动：根据浏览器的默认设置显示超出的内容。(6)在“定位”选择区域中可以设置层的上、下、左、右的位置。(7)在“剪辑”选择区域中可以设置层的显示区域。10.4.8 定义CSS样式的“扩展”(Extensions )属性选择“CSS样式定义”对话框中“分类”列表中的“扩展”选项，可以对CSS样式的“扩展”属性进行设置，如图10-15所示。图10-8 定义CSS样式的“扩展”属性在该对话框中可

26、以对“扩展”属性进行如下设置。(1)在“分页”选择区域中可以设置打印页面时有关分页的参数。·之前：可以在分页符之前分页，有自动、始终、左对齐和右对齐选项。·之后：可以在分页符之前分页，有自动、始终、左对齐和右对齐选项。(2)在“视觉效果”选择区域中可以设置可视化的效果，用于改变鼠标的外观，也可以为文本和图像添加滤镜效果。·光标：可以从下拉列表框中选择一种光标的方案。·过滤器：可以从下拉列表框中选择一种滤镜效果，并设置滤镜参数。10.5 自定义CSS样式自定义CSS样式是惟一可以应用在网页文档中所有文本上的CSS样式，在CSS样式面板中的“应用样式”视图下

27、显示所有与网页文档关联的自定义样式。当然，如果文本中应用多个CSS样式，就会引起样式冲突，产生意想不到的后果。10.5.1 应用自定义CSS样式下面是应用自定义CSS样式的方法。(1)先要选中网页文档中需应用CSS样式的文本。选中文本，CSS样式将应用在选中的文本上。将插入点置于段落中，CSS样式将应用于整个段落文本中。在网页文档窗口下面的标签栏中选择HTML标签，CSS样式将应用于标签对应的文本中。(2)再执行下面的操作之一，将CSS样式应用在选中的文本中。在CSS样式面板中单击选中的CSS样式。鼠标右击选中的文本，从弹出的快捷菜单中选择“CSS样式”命令，然后从级联的子菜单中选择需要应用的

28、CSS样式。执行主菜单中的“文本”“CSS样式”命令，从子菜单中选择需要应用的CSS样式。单击文本“属性”面板上的“切换CSS/HTML模式”按钮，将“属性”面板切换到CSS模式，然后在CSS样式下拉列表框中选择需要应用的CSS样式，如图10-16所示。图10-16 文本“属性”面板的CSS模式10.5.2 删除己应用的自定义CSS样式对于不需要的自定义CSS样式，可以将应用在文本中的自定义CSS样式移除。具体操作方法如下。(1)选中应用了自定义CSS样式的文本。(2)采用下列方法之一就能将自定义的CSS样式删除。将文本“属性”面板切换到CSS样式模式，从下拉列表框中选择“无CSS样式”选项。

29、在CSS样式控制面板中单击无CSS样式标记。10.6 链接外部CSS样式链接外部CSS样式是应用CSS样式的主要方法之一，链接外部CSS样式后，在页面中并不出现CSS语法。如果要链接外部CSS样式，可以执行下面的操作。(1)打开要链接外部CSS样式的页面。(2)单击CSS样式面板底部工具栏上的“附加样式表”按钮，或执行主菜单中的“文本”“CSS样式”命令，从子菜单中选择“附加样式表”命令。(3)打开“链接外部样式表”对话框，如图10-17所示。图10-17 “链接外部样式表”对话框在“链接外部CSS样式表”对话框中进行如下的设置。在“文件/URL”选择区域中指定外部CSS样式文件。单击“浏览”

30、按钮，选择CSS样式文件，或在文本框中输入该文件的路径。在选择区域中选择链接外部CSS样式的方式：·选择“链接”选项后，将在页面代码中生成<Link>标签。·选择“导入”选项后，将在页面代码中生成<Import>标签。说明：Internet Explorer和Netscape Navigator都支持链接方式，Netscape Navigator不支持Import方式。搜索并载入外部CSS样式文件后，单击“确定”按钮，将选中的CSS样式链接到当前网页文档中。下面给出两种不同链接外部CSS样式后的代码。生成<Link>标签的代码：<R

31、EAD><TITLE> css style </TITLE><META http-equiv="Content-Type" content="text/html；charset=gb2312"><LINK href="css/common.css" rel="stylesheet" type="text/css"></HEAD>生成<Import>标签的代码：<HEAD><TITLE> css

32、style </TITLE><META http-equiv="Content-Type" content="text/html；charset=gb2312"><STYLE type="text/css"><!-IMPORT url("css/common.css")；-></STYLE></HEAD>10.7 编辑CSS样式如果需要对已经创建的CSS样式进行编辑，应该先在CSS样式控制面板中选择需编辑的CSS样式，再执行下面的操作之一，都可以打开“CSS样式定义”对话框，对CSS样式中的相关属性进行编辑。(1)双