揭开CSS的神秘面纱

潘俊斌

摘要：网页制作技术是“互联网+”时代人必备的一项技能，CSS是网页表现的核心基础。该文从CSS规则作用范围、作用对象、优先级三方面基础知识的入手，揭开CSS运用的神秘面纱。

关键词：网页制作；CSS规则；作用范围；作用对象；优先级

中图分类号：TP37 文献标识码：A 文章编号：1009-3044（2015）03-0219-02

随着互联网技术应用的深入和普及，网页制作技术成为现代人必备的一项技能。如同缝纫衣服必须要关注针线的细节一样，网页制作也必须时刻关注html+CSS+Javascript代码。表现与内容分离是网页制作的基本理念，而CSS正是网页表现的核心基础。很多网页制作初学者容易被CSS所迷惑而不得其道，最终失去信心。本文通过对CSS基础三个难点的分析，帮助大家理清思路，抓住其规律，掌握其用法。

1 CSS代码出现的位置与其作用范围

总的来说有三种位置可以出现CSS代码：

1）与HTML代码混合，这不符合“表现与内容分离”的要求。例如：

新闻标题

2）在HTML文档的文件头标签中。如：

3）在专门的CSS文件中

/* CSS Document style.css <--（文件名）*/

. newstitle { color：blue； font-size：26px； } /* 这是“类”*/

CSS代码出现在以上三种位置，都可以表现出“蓝色26像素”的文字，他们的区别在于作用的范围不同。

出现在第（1）种位置只能作用于该标记里面的“新闻标题”四个字。

出现在第（2）种位置代码可以作用于本文档的多个对象，但是要求在Html代码里面加以套用，如：

新闻标题<！—以“类” 方式套用--> 行业动态 <！—以“类” 方式套用-->

上面

…标记里面的“新闻标题”和…标记里面的“行业动态”处于同一个html文档的不同的标记内，都可以通过class=”newstitle”来套用“类”的表现。

出现在第（3）种位置的CSS代码，可以作用于多个文档的多个对象，但是要求需要套用这种表现的文档导入或链接这个CSS文档。

上述是导入CSS文档的代码。通常情况下使用链接比用导入好，当许多文件链接相同CSS文档的代码时，可以避免相同代码反复传输。链接CSS文档的方式如下：/* 链接的语句*/

只要在某个HTML文档中导入或者链接过一次该CSS文档，就可以像本HTML文档中的其他CSS代码一样来套用该CSS文档中的规则。其套用CSS的方式与出现在第（2）种位置中套用的方式相同，在此不再赘述。

2 CSS选择器与其作用的对象

CSS有四种选择器：类、ID、标签、复合。与上面出现位置呼应，四种选择器都可以出现在第（2）种位置即本文档，也可以出现在第（3）种位置独立的CSS文档中，再在相应的HTML文档链接之。

1）类：其代码和套用的形式如前所述，在此不再赘述。

2）ID，举例如下：

/* CSS Document style.css <--（文件名） */

# newstitle { color：blue； font-size：26px； } /*定义了名称为newstitle的id*/

其套用形式为：

新闻标题

<！—以“id” 方式套用-->

辨析：（a）同一个文档ID不能同名，因此只有一个对象可以套用；

（b）在其他链接了相同CSS文档的HTML文档中如果有同名的ID，则不同文档中的同名ID的表现是一样的。

例如：在news.html中有：

新闻标题

<！—以“id” 方式套用-->

在guide.html中也可以有： 行业动态 <！—以“id” 方式套用-->

如果news.html和guide.html同时链接了style.css，则它们都套用了“蓝色26像素”的表现。

3）标签，举例如下：

h3 { color：blue； font-size：26px； } /*定义了h3标签*/

这种选择器，只要在html代码使用h3标记的地方，就会套用“蓝色26像素”的表现。H3是html的标签，不能像类和ID一样自己命名。其套用形式为：

新闻标题

<！—以“标签” 方式套用 -->

上面代码已经可以使“新闻标题”表现为“蓝色26像素”。

4）复合，在此着重介绍分组选择符和后代选择符

①当你想为html中多个标签元素设置同一个样式时，可以使用分组选择符（，），举例如下：

h3 ， .newstitle { color：blue； font-size：26px； } /*一个标签，一个类*/

在html代码中：

新闻标题

<！—以“标签” 方式套用 --> 行业动态 <！—以“类” 方式套用-->

以上两处地方都会套用“蓝色26像素”的CSS规则。

② 加入空格可以使用后代选择又称包含选择，限定样式的作用范围，举例如下：

.newstitle h3 { color：blue； font-size：26px； } /*父容器中使用了类的h3标签*/

在html代码中：

<！—父容器 -->

新闻标题

<！—以“标签” 方式套用 -->

在这里，不仅使用了h3标签，而且是被使用了 .newstitle类的容器所包含，才能表现出“蓝色26像素”的样式。

3 CSS代码层叠性、顺序、选择器与其优先级关系

层叠就是在多个css规则同时作用于一个对象，多个规则中的各个没有重复定义属性作为一个集合共同作用，对于重复定义的属性，则根据优先级最终只有其中一个起作用，重复定义的其余属性将被遮掩不予表现。举例如下：

#huang { color ： yellow ； } /* ID的优先级最高，放在前面一样其作用*/

.lvse { color：green； } /* 类的优先级比标签高*/

h3 { color：blue； font-size：26px； } /*第1个h3规则：定义了颜色和字号两个属性*/

h3 { color：red； } /*第2个h3规则：重复定义了颜色属性，遮盖前面相同标签的颜色属性*/

这里定义了三个CSS规则，在下面的html中都起作用。

红色26 <！—最外层父容器 -->

黄色绿色<！—最里层子容器 -->

辨析如下：“红色26”4个字表现为“红色26像素”，分别是第2个h3规则定义的颜色和第2个h3规则定义的大小，由两个规则中起作用的属性组合而成，这就是CSS规则的层叠性。文字颜色被重复定义，在这种情况下，根据优先级后面定义的红色red最将终起作用，第一个h3规则中定义的蓝色被遮掩不予表现。只有重复定义的CSS属性才需要考虑优先级，相关的优先级有：

1）在相同的选择器（如：类、ID或标签）中重复定义的，由出现的顺序来决定，最后定义的那个将最终表现出来。如上诉举例中的“红色26”，有两个h3标签定义了颜色属性，前面定义为蓝色，后面定义为红色，最终表现为红色。

2） 在不同的选择器中重复定义的， “ID”〉“类”〉“标签”，不受CSS规则出现顺序的影响。如前例中“黄色”两字，其本身所处的span标签同时定义了“ID”和“类”两个规则，构成对颜色的重复定义，这时由“ID”决定其表现为黄色。

3） “绿色”两字表现为“绿色26像素”，这属于父子容器继承的情况。“绿色”所处的容器是被“黄色”所处容器所包含的。在本容器中，以“类”的方式套用规则，父代定义的颜色属性被取代，父代定义的字号属性因为没有重新定义则得到继承。

在网页制作的过程中，CSS的表现与HTML结构同等重要，CSS纷繁众多的属性比html更加难以掌握，是横在初学者面前的一道门槛。最近新兴的响应式Web设计（Responsive Web design）的理念是，页面的设计与开发应当根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相应的响应和调整，不必为不断到来的新设备做专门的版本设计和开发了。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。有时候需要根据不同设备为同一个html结构设计多套不同的CSS规则，可见CSS的在网页制作中将会占据举足轻重的地位。总而言之，学习CSS基础要弄清楚规则的作用范围、作用对象、重叠性和优先级这几个难点，才能在网页制作中得心应手地运用CSS规则，才能提高代码的可重用效率和形成站内页面的统一风格。

参考文献：

[1] 传智博客研发部.网页设计与制作html+CSS[M]. 北京：中国铁道出版社， 2014.

[2] 冯永滔. 网页制作[M]. 北京：高等教育出版社， 2011.