第6章CSS样式应用

1、第第6章章 css样式表样式表2022-3-5网页设计技术2本章内容本章内容 6.1 CSS样式概述样式概述 6.2 CSS样式定义样式定义 6.3 CSS样式的使用样式的使用 6.4 CSS属性属性6.5 在在Dreamweaver中编辑中编辑CSS样式样式6.6 CSS应用示例应用示例 上机内容上机内容小结小结2022-3-5网页设计技术36.1 CSS样式概述样式概述 nCSS（Cascading Style Sheets）又称层叠样式表层叠样式表，它是一系列格式规则集合，它能够定义网页元素的样式，如层、文本、表格、链接等元素的属性，一种样式信息与网页内容分离的标记性语言。n在CSS样式

2、出现以前，HTML标签样式被广泛应用，HTML标签样式用于控制单个文档中一定范围内文本的格式。n而CSS样式不同，它不仅可以控制单个文档中一定范围内网页元素的格式，而且可采用外部链接的方式，控制整个站点内所有网页的格式。这样既保证了站点风格的一致性，又提高了工作效率。nCSS样式生成样式表文件扩展名为.CSS，当对CSS规则修改后，所有链接该规则的文档格式会自动改变，简化了格式化网页的工作。返回返回2022-3-5网页设计技术4CSS样式由三部分组成：选择器、属性和值选择器、属性和值。语法格式：语法格式：选择器选择器 属性属性1:1:值值1;1;属性属性2:2:值值2 2 说明：说明：n选择器

3、用来标识格式元素，可分为3种基本类型：标签（html）选择器、ID选择器、类（class）选择器。除了基本类型外，还可把基本类型的选择器组合使用。n属性和属性值之间用冒号（:）隔开，定义多个属性时，属性之间用分号（;）隔开。n如: bodycolor:black 选择器body指页面主体部分，color颜色属性名，black颜色属性值，其效果是使页面中的文字为黑色。6.2 CSS样式定义样式定义例例6.16.1 在DW代码视图的编辑窗口输入以下代码，创建使用样式页面的文档css6_1.html。在标记符中直接嵌套样式信息 一代人 黑夜给了我黑色的眼睛我却用它寻找光明提示：style元素是HTM

4、L中的一个标记元素，提供了 一 组 对 应 于 浏 览 器 所 支 持 C S S 规 则 （ 如background 、font-size等），可以使用这个标记元素访问CSS样式属性。2022-3-5网页设计技术61.HTML1.HTML选择器选择器HTML选择器是最典型的选择器类型，网页设计者可为某个或某些HTML标记元素应用样式定义。pHTMLHTML选择器的定义方法：选择器的定义方法： tagproperty:value例如，例如，设置表格中单元格内的文字大小为9pt，颜色为蓝色的CSS代码： td font-size: 9pt; color: bluepCSS可以在一条语句中定义多个

5、选择器 例如，例如，将段落文本和单元格内的文字设置为蓝色的CSS代码： td,pcolor: bluep组合选择器组合选择器(逗号隔开)，其中所有标签都使用指定样式。p关联选择器关联选择器(空格隔开,pembackground:yellow) 表示段落中标签中背景为黄色，而其他地方出现的不受影响 （标记em用来表示强调，其默认样式为斜体）。6.2 CSS样式定义样式定义72.class2.class选择器（类选择器）选择器（类选择器） 相关的类选择器相关的类选择器。它只与一种HTML标记有关系，此类选择器仅为某个或某些标记符定义类。语法格式：语法格式：Tag.Classnameproperty

6、:value例如：例如： h1.redcolor:red应用：应用：在网页中需要使用该类的“h1标记元素内”用class属性引用 吉林省明日科技有限责任公司吉林省明日科技有限责任公司 独立独立classclass选择器选择器。可被任何HTML标记元素所应用。 语法格式：语法格式：.Classnameproperty:value 例如：例如： .blueonecolor:blue 应用：应用：需要引用该类的任意标记符内使用class属性 有雨的日子 不知是无意还是天意，有你的日子总有雨！不知是无意还是天意，有你的日子总有雨！ 6.2 CSS样式定义样式定义2022-3-5网页设计技术2022-3

7、-5网页设计技术83.ID3.ID选择器选择器p其实与独立的class选择器的功能一样，区别在于语法和用法不同。p语法格式语法格式：#IDnameproperty:valuep用法用法:在HTML标记元素中应用ID属性引用CSS样式。p例如：例如：#redonecolor:redp应用：应用：红色热情p提示：提示：使用.classname和使用#IDname这两种方式在效果上并没有区别，但最好只使用其中之一，以免造成混淆。6.2 CSS样式定义样式定义综合举例综合举例6.26.2：在DW代码视图的编辑窗口输入以下代码，创建综合几种选择器类型的页面css6_2.html：选择器举例选择器举例标题

8、标题1的使用的使用测试关联选择器（没有关联）测试关联选择器（没有关联）测试关联选择器组合（具有关联关系）测试关联选择器组合（具有关联关系）这是黄河的水这是黄河的水这句话才使用了类这句话才使用了类“hello”的效果。的效果。这里危险这里危险css6_2.htmlcss6_2.html2022-3-5网页设计技术10返回返回2022-3-5网页设计技术11一般情况下，CSS样式使用有四种方式。 1.1.内联式样式内联式样式表表 在现有HTML元素的基础上，用style属性把特殊的样式直接加入到那些标记元素中。 例如例如：内联式样式表 说明：说明：使用内联样式，必须在该文件的头部对整个网页文档进行

9、单独的样式表语言声明：meta http-equiv=text/css这种样式表只对使用它的元素起作用，而不会影响其它元素，通常用在需要特殊格式的某个网页对象。这种样式表将样式和要展示的内容混在一起，失去了样式表的优点，一般不采用。6.3 CSS样式使用样式使用2022-3-5网页设计技术12 2. 2. 嵌入式样式嵌入式样式表表又又称内部样式表，称内部样式表，包含在HTML文件头部HEADHEAD的stylestyle标签内的一系列CSS规则。书写格式：书写格式：6.3 CSS样式使用样式使用说明：说明：在此格式中，stylestyle的typetype属性值须设为text/csstext/

10、css，表示定义的是一个CSS。当不支持CSS的浏览器读到这个属性时，自动忽略这个样式表。标记内定义的前后加上注释符，其作用是使不支持CSS的浏览器忽略样式表的定义。注意：注意：在定义嵌入式样式表时，一定要放在和标记之间。嵌入样式表的作用范围是在本HTML文档内。2022-3-5网页设计技术133. 3. 链接外部样式文件链接外部样式文件p先将样式表写在一个扩展名为.CSS文件中，样式在样式表文件中的定义和嵌入式样式表的定义是一样的，此时只是不需要style元素。p在HEAD标记符内使用link标记元素，通过指定相应属性链接到外部样式表文件。代码格式： p说明：说明：标签定义了当前文档与其他文

11、档的链接信息 rel：表示其它文档将以何种方式与HTML文档结合 href：目标文档的URL6.3 CSS样式使用样式使用144. 4. 导入外部样式文件导入外部样式文件p这种方式是在HTML文件的头部标记之间，用CSS样式表的import声明引入外部样式表文件。其格式： import URL(外部样式文件名);p引入外部样式表的使用与链接到外部样式表很相似，都是将样式定义保存为单独文件。p区别：区别：导入方式在浏览器下载HTML文件时将样式文件的全部内容拷贝到import关键字位置，以替换该关键字；而链接外部样式文件仅在HTML文件需要引用CSS样式文件中的某个样式时，浏览器才链接样式文件，

12、读取需要的内容并不进行替换。6.3 CSS样式使用样式使用2022-3-5网页设计技术15例例6.36.3 CSS CSS样式文件样式文件应用应用在DW的代码视图编辑窗口输入以下代码，创建外部样式表文件sheet1.css、sheet2.css和页面文件css6_3.html。sheet1.css代码代码/* CSS Document */h1font-size: 36px;font-family: 隶书;font-weight: bold;color: #993366;h2 b color:blue.water font-family:隶书; font-size:24px; text-ali

13、gn:righth3.hello font-family:隶书; text-align:center; font-size:36px6.3 CSS样式使用样式使用2022-3-5网页设计技术2022-3-5网页设计技术16sheet2.css代码代码/* CSS Document */#danger color:#990000;font-family:华文彩云;font-size:24pxa:linkcolor:red; text-decoration: none;/*未访问的链接*/a:visitedcolor:blue; text-decoration: none;/*已访问的链接*/a:

14、activecolor:yellow;text-decoration: none;/*活动链接*/a:hover color:#990000;text-decoration:underline/*鼠标指针移到上面链接的颜色*/h2 b color:green6.3 CSS样式使用样式使用2022-3-5网页设计技术17css6_3.html代码代码 导入链接外部样式表 标题1的使用。测试上下选择器（具有上下文）这是黄河的水这句话才使用了类“hello”的效果。这里危险。测试链接的颜色6.3 CSS样式使用样式使用2022-3-5网页设计技术186.3 CSS样式使用样式使用2022-3-5网页

15、设计技术195. 5. 样式样式表的优先级表的优先级p同时使用多层样式表，很可能的情况是在一个网页中既定义了内联式样式表和嵌入式样式表又链接了外部样式表，这时网页会变得怎么样？p三种样式表具有不同的优先级: 内内联式样式联式样式表表 嵌入嵌入式样式式样式表表 外部外部式样式式样式表表 所以某个元素在挑选多层样式表时，会首先选择优先级最高的样式，即就近原则就近原则。6.3 CSS样式使用样式使用返回返回2022-3-5网页设计技术20n 字体属性 n 文本属性 n 颜色和背景属性 n 容器属性 n 列表属性 n 鼠标属性 n 定位和显示 n CSS滤镜 6.4 CSS属性属性2022-3-5网页

16、设计技术216.4 CSS属性属性2022-3-5网页设计技术226.4 CSS属性属性返回返回2022-3-5网页设计技术231 1. .创建创建CSSCSS样式样式p单击“CSS样式”面板右下角的“新建CSS规则”按钮 6.5 在在Dreamweaver中编辑中编辑CSS样式样式（1 1）定义）定义的的位置位置仅对该仅对该文档文档：此时CSS样式的 代 码 会 嵌 套 在 网 页和标签中。新建样式表文件：新建样式表文件：则弹出“保存样式表文件为”对话框，选择样式文件的存储路径和文件名，将CSS样式代码单独存放在一个CSS文件中。已有的某已有的某CSSCSS文件：文件：将新建的CSS样式规则

17、写入已有的CSS文件中。其代码会嵌套在网页和标签中。2022-3-5网页设计技术24（2 2）选择器的类型）选择器的类型 类类自定义CSS规则，可应用于网页任何标签。在应用时，它会在HTML标签内加入一个类（class）来规定标签中的格式。比如,将类的样式mystylemystyle定义于某个标题，代码：标题1应用自定义样式 标签标签重新定义特定标签的外观，如创建或更改h1标签的CSS样式，所有应用h1标签的文本都会立即更新。 高级高级在CSS选择器中，它的功能最为强大，可定义链接的特效，定义特定元素组合的格式设置（如body,table,td,用逗号隔开），定义嵌套的样式（td img 空格

18、隔开），定义包含特定id属性的标签的格式设置。6.5 在在Dreamweaver中编辑中编辑CSS样式样式2022-3-5网页设计技术25a:linka:link 链接文本普通状态的外观a:activea:active 当前活动的超级链接文本的外观a:hovera:hover 鼠标悬停状态下超级链接文本的外观a:visited a:visited 已经访问的超级链接文本的外观 CSSCSS超级链接样式超级链接样式6.5 在在Dreamweaver中编辑中编辑CSS样式样式2. “CSSCSS”样式面板样式面板正在正在模式：只显示当前文档中页面元素CSS规则全部全部模式：显示整个网页文件所涉及的

19、全部CSS规则“显示类别视图显示类别视图”按钮按钮 按类别显示DW所支持的所有CSS属性“显示列表视图显示列表视图”按钮按钮 按字母顺序显示DW所支持的所有属性“设置属性视图设置属性视图”按钮按钮 仅显示已设置的属性，默认视图“附加样式表附加样式表”铵钮铵钮 选择要链接或导入到当前文档中的外 部样式表“新建新建CSSCSS规则规则”铵钮铵钮“编辑样式编辑样式”按钮按钮“删除删除CSSCSS规则规则”按钮按钮6.5 在在Dreamweaver中编辑中编辑CSS样式样式2022-3-5网页设计技术27 3. 3. CSSCSS样式定义对话框（样式定义对话框（CSSCSS属性）属性） 创建了新样式后

20、，即可在“CSS样式定义”对话框中进行设置，CSS样式属性的8大类型。 6.5 在在Dreamweaver中编辑中编辑CSS样式样式2022-3-5网页设计技术28CSSCSS属性属性8 8大类型大类型说明：说明：类型格式：类型格式：此类属性用于定义网页中文本的字体、大小、颜色、文本链接的修饰线等格式。背景格式：背景格式：为整段文字或其它页面元素加入背景格式，如背景色或图像。区块格式：区块格式：控制文本的间距、缩进或对齐方式等。方框格式：方框格式：控制网页中的块元素，方框共分为4个部分：边界、边框、填充、方框内容。边框格式：边框格式：为任何网页元素加上边框（如宽度、颜色和样式），且边框的样式多

21、样（粗细、凹下等）。如宽度、颜色。列表格式：列表格式：可以设置项目符号的样式（如项目符号大小和类型），还可以用图片来代替项目符号。6.5 在在Dreamweaver中编辑中编辑CSS样式样式2022-3-5网页设计技术29定位格式定位格式： 提供网页元素的相对位置或绝对位置的设置，甚至可以将两个元素重叠在一起。这对于一些固定元素（如表格）来说，是一种功能的扩展，而对于浮动元素来说，却是有效的、用于精确控制其位置的方法。扩展格式：扩展格式： 设置页面打印的分页效果和网页视觉效果，其属性包含两部分：分页分页为打印的页面设置分页符；视觉视觉效果效果为网页元素施加特殊效果。【光标光标】 ：可指定在某个

22、元素上要使用的光标形状，共有15种选择方式，分别代表鼠标指针的各种形状。【滤镜滤镜】：特殊效果有阴影、模糊、透明、光晕等。这些效果在DW的设计视图中是显现不出来的，只有在浏览器中浏览时才能看到。6.5 在在Dreamweaver中编辑中编辑CSS样式样式2022-3-5网页设计技术30(1)(1)导出导出样式表样式表文件文件在当前文档中设置的样式只在该文档中有效。要使当前文档中的样式应用到其他文档，则可以考虑将其中的样式导出为样式表文件，这样，DW就可以通过样式表链接，使整个站点具有相同的样式设置。 单击“文件”的“导出”命令，选择“CSS”样式或在CSS样式面板中，执行“右键”菜单的“导出”

23、命令。 在对话框中设置好保存的文件名及路径。4.CSS4.CSS样式导入与导出样式导入与导出6.5 在在Dreamweaver中编辑中编辑CSS样式样式2022-3-5网页设计技术31(2)(2)链接链接或导入外部样式表文件或导入外部样式表文件样式表文件是一个仅包含样式规则的文本文件。通过“附加样式表”命令可将其他页面中的样式应用到当前页面中，具体操作： 在“CSS样式”面板中，单击“附加样式表”按钮，打开“链接外部样式表”对话框。 在“选择样式表文件”对话框中，指定样式表的路径及名称，则创建的外部链接样式表显示在“CSS样式”面板中。 注意：编辑外部样式表将影响到所有链接引用它的文编辑外部样

24、式表将影响到所有链接引用它的文档。用户可以将档。用户可以将CSSCSS样式表文件复制到自己的站点内编样式表文件复制到自己的站点内编辑。辑。6.5 在在Dreamweaver中编辑中编辑CSS样式样式返回返回6.6 CSS应用示例应用示例 例例6.4 设置文字样式设置文字样式 2022-3-5网页设计技术32设置文字效果p font-family:黑体; /* 文字字体 */ font-size:35px; /* 文字大小 */ color:#0033CC; /* 颜色 */ font-weight:bold; /* 粗体 */ font-style:italic; /* 斜体 */ text-

25、decoration:line-through; /* 删除线 */CSS设置文字效果2022-3-5网页设计技术336.6 CSS应用示例应用示例 l段落是由一个个文字组合而成的，同样是网页中最重要的组成部分之一，因此前面提到的文字属性，对于段落同样适用。但CSS针对段落也提供了很多样式属性。l在使用Word编辑文档时，可以很轻松的设置行间距，在CSS中通过“line-heightline-height”属性同样可以轻松地实现行距的设置。在CSS中“line-height”的值表示的是两行文字之间基线的距离。如果给文字加上下划线，那么下划线的位置就是文字的基线。l “line-height”

26、的值跟CSS中所有设定具体数值的属性一样，可以设定为相对数值，也可以设定为绝对数值。在静态页面中，文字大小固定时常常使用绝对数值，达到统一的效果。而对于论坛、博客这些可以由用户自定义字体大小的页面，通常设定为相对数值，可以随着用户自定义的字体大小而改变相应的行距。CSS文字段落文字段落例例6.5 设置文字段落设置文字段落 行间距line-height 冬至，是我国农历中一个非常重要的节气，也是一个传统节日，至今仍有不少地方有过冬至节的习俗。冬至俗称“冬节”、“长至节”、“亚岁”等。早在二千五百多年前的春秋时代，我国已经用土圭观测太阳测定出冬至来了，它是二十四节气中最早制订出的一个。时间在每年的

27、阳历12月22日或者23日之间。 冬至是北半球全年中白天最短、黑夜最长的一天，过了冬至，白天就会一天天变长。古人对冬至的说法是：阴极之至，阳气始生，日南至，日短之至，日影长之至，故曰“冬至”。冬至过后，各地气候都进入一个最寒冷的阶段，也就是人们常说的“进九”，我国民间有“冷在三九，热在三伏”的说法。在我国古代对冬至很重视，冬至被当作一个较大节日，曾有“冬至大如年”的说法，而且有庆贺冬至的习俗。汉书中说：“冬至阳气起，君道长，故贺。”人们认为：过了冬至，白昼一天比一天长，阳气回升，是一个节气循环的开始，也是一个吉日，应该庆贺。晋书上记载有“魏晋冬至日受万国及百僚称贺其仪亚于正旦。”说明古代对冬至

28、日的重视。2022-3-5网页设计技术35行间距行间距示例示例 例例6.6 制作首字下沉效果制作首字下沉效果许多报刊、杂志的文章第一个字都很大，并且向下浮动，这种首字放大的效果，同样可以方便地应用在网页中。在CSS中首字下沉的效果是通过对第一个字进行单独设置样式风格来实现的。首字放大 端午节是古老的传统节日，始于中国的春秋战国时期，至今已有2000多年历史。据史记“屈原贾生列传”记载，屈原，是春秋时期楚怀王的大臣。他倡导举贤授能，富国强兵，力主联齐抗秦，遭到贵族子兰等人的强烈反对，屈原遭馋去职，被赶出都城，流放到沅、湘流域。他在流放中，写下了忧国忧民的离骚、天问、九歌等不朽诗篇，独具风貌，影响

29、深远（因而，端午节也称诗人节）。公元前278年，秦军攻破楚国京都。屈原眼看自己的祖国被侵略，心如刀割，但是始终不忍舍弃自己的祖国，于五月五日，在写下了绝笔作怀沙之后，抱石投汨罗江身死，以自己的生命谱写了一曲壮丽的爱国主义乐章。 传说屈原死后，楚国百姓哀痛异常，纷纷涌到汨罗江边去凭吊屈原。渔夫们划起船只，在江上来回打捞他的真身。有位渔夫拿出为屈原准备的饭团、鸡蛋等食物，“扑通、扑通”地丢进江里，说是让鱼龙虾蟹吃饱了，就不会去咬屈大夫的身体了。人们见后纷纷仿效。一位老医师则拿来一坛雄黄酒倒进江里，说是要药晕蛟龙水兽，以免伤害屈大夫。后来为怕饭团为蛟龙所食，人们想出用楝树叶包饭，外缠彩丝，发展成棕子

30、。说明： 在CSS定义中属于一个行内元素,在行内定义一个区域，也就是一行内可以被 划分成好几个区域，从而实现某种特定效果。 本身没有任何属性。 在p span 的 css规则定义：分类方框-浮动-左对齐 在CSS定义中属于一个块级元素 。 可以包含段落、标题、表格甚至其它部分。这使DIV便于建立不同集成的类，如章节、摘要或备注。在页面效果上，使用 会自动换行，使用 就会保持同行。例例6.7 CSS设置图片效果设置图片效果边框39例例6.8 制作图文混排网页制作图文混排网页图文混排河马，偶蹄目、河马科，英文名hoppopotamus。原来遍布非洲所有深水的河流与溪流中，现在范围已缩小，主要居住在

31、非洲热带的河流间。它们喜欢栖息在河流附近沼泽地和有芦苇的地方。生活中的觅食、交配、产仔、哺乳也均在水中进行。河马的特点是吻宽嘴大，四肢短粗、躯体象个粗圆桶。胃3室不反刍。鼻孔在吻端上面，与上方的眼睛和耳朵呈一条直线。这样它全体潜伏水中只须将头顶露出水面就能嗅、视、听兼呼吸了。体长3.75-4.6米，尾长约56厘米，肩高约1.5米，体重3-4.6吨，下犬齿长约60厘米，可重达3公斤。河马皮肤排出的液体含红色色素，经皮肤反射显得象是红色的，引起了河马出“血汗”的说法。河马极善游泳，在受惊时，一般避入水中。每天大部分时间在水中，潜伏水下时一般每3、5分钟把头露出水面呼吸一次，但可潜伏约半小时不出水面

32、来换气。它们的皮肤长时间离水会干裂。河马成对或结成小群活动，老年雄性常单独活动。夜行性：它们几乎整个白天都在河水中或是河流附近睡觉或休息，晚上出来吃食，有时会顺水游出30多公里觅食。主要以水生植物为食；偶食陆地作物，以草为主，有时到田地去吃庄稼，食物短缺时，它们也吃肉，据称，河马是路地上最大的食肉动物(杂食)。河马无定居：不在一个地方长期停留，每隔数日便迁到新地方去。 河马繁殖期不固定,全年均繁殖,每产一仔,孕期227-240天，仔兽出生时体重27-45公斤。在人为饲养下约3岁性成熟，在野外5、6岁成熟。寿命40-50年。河马的皮下脂肪约5厘米厚。人们常猎杀它取其脂肪、肉和厚皮。脂肪可得90公

33、斤。当地人非常珍视它的肉，肉味略同于野猪肉。牙齿质量也很好,是珍贵的雕刻材料，可作为象牙替代品。例例6.9 设置背景颜色。设置背景颜色。在CSS中页面的背景颜色就是简单的通过设置“body”标签的“background-color”属性来实现的，几乎所有HTML元素的背景色都可以通过它来设定。因此很多网页都通过设定不同HTML元素的各种背景色来实现分块的目的。利用背景颜色分块 首页分类讨论谈天说地精华区我的信箱休闲娱乐立即注册离开本站正文内容. 例例6.10 设置背景图片。设置背景图片。背景图片背景背景图案图案 竖直竖直方向上重复方向上重复例例6.11 设置按钮效果的超级链接。设置按钮效果的超

34、级链接。普通普通的超链接的超链接按钮按钮式超链接式超链接html按钮超链接 首页 一起走到 从明天起 纸飞机 下一站 其它例例6.12 CSS制作实用菜单制作实用菜单 作为一个成功的网站，导航菜单是永远不可缺少的。导航菜单的样式风格往往也决定了整个网站的样式风格，因此很多设计者都会投入很多时间和精力来制作各式各样的导航条，从而体现网站的整体构架。本例围绕菜单的制作，介绍相关的项目列表、菜单变换、导航栏等内容。 当项目列表的项目符号可以通过”list-style-type”设置为“none”时，制作各式各样的菜单、导航条成了项目列表的最大用处之一，通过各种CSS属性变换可以达到很多意想不到的导航

35、效果。（1）建立HTML相关结构，将菜单的各个项目用项目列表表示，同时设置页面的背景颜色。 bodybackground-color:#ffdee0;HomeMy BlogFriendsNext StationContact Me（2）设置整个”块的宽度为固定像素，并设置文字的字体；设置项目列表的属性，将项目符号设置为不显示。#navigation width:200px;font-family:Arial;#navigation ul list-style-type:none; /* 不显示项目符号 */margin:0px;padding:0px;（3）为标签添加下划线，以分割各个超链接，

36、并且对超链接标签进行整体设计。#navigation li border-bottom:1px solid #ED9F9F;/* 添加下划线 */#navigation li adisplay:block; /* 区块显示 */padding:5px 5px 5px 0.5em;text-decoration:none;border-left:12px solid #711515; /* 左边的粗红边 */border-right:1px solid #711515; /* 右侧阴影 */ 说明：通过“display:block”语句，超链接被设置成了块元素，当鼠标进入该块的任何部分时都会被激

37、活，而不是仅仅在文字上方时才被激活。（4）设置超链接的3个伪属性，以实现动态菜单的效果。#navigation li a:link, #navigation li a:visitedbackground-color:#c11136;color:#FFFFFF;#navigation li a:hover/* 鼠标经过时 */background-color:#990020;/* 改变背景色 */color:#ffff00; /* 改变文字颜色 */说明：用IE6.0查看时，必须将鼠标移动到文字的上面才能激活菜单项，这是IE6.0存在的错误导致的，在IE7中修正了这个错误。为了避免这个错误，可以

38、将下面的代码：#navigation li adisplay:block; /* 区块显示 */padding:5px 5px 5px 0.5em;text-decoration:none;border-left:12px solid #711515; /* 左边的粗红边 */border-right:1px solid #711515; /* 右侧阴影 */#navigation li adisplay:block; /* 区块显示 */padding:5px 5px 5px 0.5em; width:200px;text-decoration:none;border-left:12px s

39、olid #711515; /* 左边的粗红边 */border-right:1px solid #711515; /* 右侧阴影 */修改为：无需表格的菜单 HomeMy BlogFriendsNext StationContact Me例例6.13 用用DIV容器和容器和CSS样式表实现结构与表现的分离。样式表实现结构与表现的分离。当今的网页制作讲当今的网页制作讲究结构与表现的分究结构与表现的分离。离。所有的网页元素都所有的网页元素都用 一 个 一 个 的用 一 个 一 个 的容器包装起容器包装起来 ， 并 给 每 个来 ， 并 给 每 个容器一个容器一个ID标识符，这些标识符，这些按顺序排列按顺序排列构成网页的结构。构成网页的结构