利用CSS 制作特效菜单

摘要：CSS（Cascading Style Sheet，可译为“层叠样式表）是一组格式设置规则，用于控制Web页面的外观。通过使用CSS样式设置页面，首先可以确保文件结构的基础上有高自由度的设计性，其次提高了网页的维护性、可操控性，大大的提高了网页设计的工作效率。该文将介绍样式的分类，选择器的分类和作用，“盒子”的原理，重点在于介绍如何利用CSS样式制作特效的水平菜单。

中图分类号：TP311 文献标识码：A 文章编号：1009-3044（2014）10-2286-04

有两种被称为内部样式表的应用方法。一种方法是在要指定的元素中使用style属性直接记述。可是由于样式信息只在该页面中有效，对样式修改时也必须修改HTML文件本身等原因，这种做法不太常用。

还有一张方法是在head元素中使用style属性记述。这种方法也由于样式信息只在该页面中有效和在head元素中包含与HTML结构无关的记述而不怎么推荐。

外部样式表是使用head元素中的link元素指定并读取CSS文件。CSS文件（扩展名为.css）和HTML文件不同，是直接记述样式。在外部样式表中可分为链接式和导入式。

此外，采用这两种方式后的显示效果也略有区别。使用链接方式时，会在装载页面主体部分之前装在CSS文件，这样显示出来的网页从一开始就是带有样式效果的，而使用导入式时，会在整个页面装载完成后再装载CSS文件，对于有的浏览器来说，在一些情况下，吐过网页文件的体积比较大，则会出现先显示无样式的页面，闪烁以下之后再出现设置样式后的效果。

这里给大家的建议是，如果仅需要引入一个CSS文件，则使用链接方式；如果需要引入多个CSS文件，则首先用链接方式引入一个“目录”CSS文件，这个“目录”CSS文件中在使用导入式引入其他CSS文件。

但是如果希望通过JavaScript来动态决定引入哪个CSS文件，则必须使用链接方式才能实现。

选择器（selector）是CSS中很重要的概念，所有HTML语言中的标记样式都是通过不同的CSS选择器进行控制的。用户只需要通过选择器对不同的HTML标签进行选择，并赋予各种样式声明，即可实现各种效果。在CSS中，选择器可分为两大类：基本选择器和复合选择器。基本选择器有标记选择器、类选择器和ID选择器；复合选择器是通过对基本选择器进行组合而构成的。

一个HTML页面由很多不同的标记（标签）组成，CSS标记选择器用来声明哪些标记采用哪种CSS样式。定义标记选择器后可以将样式应用到所有的元素，作用于网页中出现该标签的地方。例如，table标签就是用于声明页面中所有

标记的CSS风格。如下所示：

2.2 类选择器（Class选择器）

类选择器名称可以由用户自定义，指定时要在class名前面添加“.”，在同一个HTML文件中可以重复指定相同的class名。希望在用相同class名指定的复数元素中应用同一个样式时，使用“.class名”来指定。

这个标题使用了Style。

这个标题没有使用Style。

2.3 ID选择器

使用HTML元素中的id属性将指定的id名作为选择器。指定时要在id名前面添加“#（井号）。由于在同一个HTML文件中不能重复指定相同的id名，所以只有“#id名”可以对指定的地方进行特别设定。因此尽管大多数情况只使用“#id名”的格式，不过在协同工作时为了让谁都能知道指定的是哪个元素。在HTML的标记中只需要利用ID属性，就可以直接调用CSS中的ID选择器。

#header{background-color：#999999；}

2.4 复合选择器

复合选择器就是两个或是多个基本选择器，通过不同方式连接而成的选择器。

2.4.1 “交集”选择器

“交集”复合选择器由两个选择器直接连接构成，其结果是选中二者各自元素范围的交集。其中第一个必须是标记选择器，第二个必须是类别选择器或ID选择器。这两个选择器之间不能有空格，必须连续书写，形式如下：

与交集选择器相对应，还有一种“并集”选择器，它的结果是同时选中各个基本选择器所选择的范围。任何形式的选择器（包括标记选择器、class类别选择器、ID选择器等）都可以作为并集选择器的一部分。

并集选择器是多个选择器通过逗号连接而成的，在声明各种CSS选择器时，如果某些选择器的风格是完全相同的，或者部分相同，这时可以利用并集选择器同时声明风格相同的CSS选择器。

后代选择器是利用HTML的树结构来特别设置要指定元素的方法，以“母元素-子元素”的形式来指定。

ooooo

000000

在多个p元素中，只想指定p元素的样式时，使用母元素div来指定。通过使用后代选择器，即使不增加id名和class名，也能精确地进行特别指定。

伪类的代表，是和链接有关的伪类“：link”和“visited”的形式使用。使用HTML中的alink属性和vlink 属性可以改变链接是的文字颜色和访问后链接的文字颜色，而在CSS中使用该链接的伪类来指定。当然不只是文字颜色，各种各样的性质都可以用来装饰有a元素标识的内容。另外还可以通过将a元素用于链接伪类之外的活动伪类“：hover”、“：active”进行鼠标悬浮在上或点击瞬间的设定。这两种伪类也可用于a元素之外。

在选择器相同的情况下，CSS的记述中后被读取的样式具有更高的优先级。虽然浏览器也预先设定了样式，但由于后被读取的制作者样式的优先级高，可能会出现样式被覆盖变更的结果。在制作CSS的时候，要理解这个“读取顺须”，注意避免无用的覆盖。相反，理解并合理利用覆盖的结构可以作出巧妙的记述。

由于一个CSS文件是从上到下读取，后面记述的内容优先级要高。如果是多个CSS文件，HTML的link标签也是从上到下读取，所以最后指定的文件拥有最高优先级。

优先级还要根据“选择器特殊性”来决定。当选择器不同而指定了同样的元素时，哪一方的优先级高呢？ CSS2的规格书中规定了全局选择器=0分，类型选择器=1分，class选择器=10分，id选择器=100分，分数高的选择器优先级也高。

属性值中，母元素设定的值既有会被子元素继承的，也有不会被继承的。例如，如果指定由boby元素继承的属性②，也会反映到其他元素中。需要注意如果能巧妙地利用就不必重复相同的记述，但要是指定有误也可能会出现意想不到的结果。

什么是CSS的盒子模式呢？先说说我们在网页设计中常听的属性名：内容领域（content）、填充领域（padding）、边框领域（border）、边界领域（margin）， CSS盒子模式都具备这些属性。

一个盒子实际所占有的宽度（或高度）是由“内容+内边框+边框+外边框”组成的。在CSS中可以通过设定width和height的值来控制内容所占的矩形的大小，并且对于任何一个盒子，都可以分别设定4条边各自的border、padding和margin。因此只要利用好这些属性，就能够实现各种各样的排版效果。

Margin：包括margin-top， margin-right， margin-bottom， margin-left，控制块级元素之间的距离，它们是透明不可见的。

Padding：包括padding-top，padding-right，padding-bottom，padding-left，控制块级元素内部， content与border之间的距离。

核心的思想就是利用边框的接角位置构造出一个斜角，然后通过使用“钩子”的方法，挂到每一个菜单项的左上角处。

对于每一个菜单项的a元素，放置一个span元素，设为corner类别，并作为css“钩子”，用于实现斜角效果。

首先设置#menu容器，只设置文字的样式。然后设置每一个菜单项的基本属性；其中将a元素设置为块级元素，并向左浮动。

注：这里通过position属性将每个菜单项的定位方式设置为相对定位，目的不是要移动菜单项本身，而是通过这个设置将自身变为“包含块”，从而才能使挂在上面的斜角元素以它为基准来定位。

其中，“top：0”、“left：0”这两行的作用是进行斜角的定位。由于前面的a元素已经设置为相对定位，而这个span是a的下级元素，又设置为绝对定位，因此这个斜角将以a元素的位置为基准进行定位。

使用CSS样式表，不仅可以提高网页的维护更新效率，同时。CSS样式可以把网页整体布局和整体风格统一化，让网页看起来更加整洁，更加雅观。随着互联网和网站技术的不断发展，CSS样式将得到更加广泛的应用。

[2] 桧山佐知子.网络设计的原理[M].周淳，译.北京：中信出版社，2011.

[3] 郑耀涛，孙甲泉.网页美工实例教程[M].北京：高等教育出版社，2010.