如何多重CSS样式定义

html-css07

如何多重CSS样式定义,第1张

如果某些属性在不同的样式表中被同样的选择器定义,那么属性值将从更具体的样式表中被继承过来。

例如,外部样式表拥有针对 h3 选择器的三个属性:

h3 { color: redtext-align: leftfont-size: 8pt}而内部样式表拥有针对 h3 选择器的两个属性:

h3 { text-align: rightfont-size: 20pt}假如拥有内部样式表的这个页面同时与外部样式表链接,那么 h3 得到的样式是:

color: redtext-align: rightfont-size: 20pt即颜色属性将被继承于外部样式表,而文字排列(text-alignment)和字体尺寸(font-size)会被内部样式表中的规则取代。

CSS 允许应用纯色作为背景,也允许使用背景图像创建相当复杂的效果。

CSS 在这方面的能力远远在 HTML 之上。

问题1,很显然是不合理的,增加一个属性可以,改变就不行。如果硬要这样做,可以采取细一点的方式,例如为a定义一个样式: .apage a 和 .bpage a 在A页面是<div class="apage"><a ...>...</a></div>而在B页面 则是 <div class="bpage"><a ...>...</a></div>

问题2,尽量将所有的样式表都放在一个单独的CSS文件里,网站所有的页面都调用这一个文件。要明白,CSS、HTML 都不是运行程序,而只是代码,效率和文件的大小有很直接的关系,如果10个页面10个CSS,明显的没有达到这样的目的。

浏览器打开一个页面时,同时也下载了CSS到IE的临时文件夹中(除非CSS不是一个单独的文件),再打开其他页面,如果引用的是同一个CSS,就不会再进行下载。显而易见,下载10个文件要比下载1个文件效率低得多,即使这1个文件比10文件加起来还大。

回复楼下的看法:一个网站的所有页面不可能有非常多的区别,况且CSS是在客户端执行,完全不涉及到服务端,况且浏览器是先看样式名,再根据样式名去查找相符合的样式。不是把所有的样式都遍历一次,你所说的打开页面慢、CUP频率高貌似不大可能出现。即使有,那也不是因为样式表很大的缘故,即使是因为样式表非常大,这样的影响也小到可以忽略,即使明显,也只是在客户端,和客户机有较大关系,对服务端不会造成任何压力。

如果你很不喜欢这样的方式,至少可以把布局大致相同的页面引用某一个CSS,完全不相同的引用另一个CSS。但是一个页面一个CSS,绝对更不可取。