CSS网页布局与浏览器兼容
上QQ阅读APP看书,第一时间看更新

1.8 CSS样式的特性与注意事项

CSS通过使用与HTML的文档结构相对应的选择符以达到控制页面表现的目的,在CSS样式的应用过程中,还需要注意CSS样式的一些特性和相关注意事项。

1.8.1 CSS样式的相关特性

1.继承性

在CSS语言中继承并不那么复杂,简单地说就是将各个HTML标签看作一个个大容器,其中被包含的小容器会继承包含它的大容器的风格样式。子标签还可以在父标签样式风格的基础上再加以修改,产生新的样式,而子标签的样式风格完全不会影响父标签。

2.特殊性

特殊性规定了不同的CSS规则的权重,当多个规则都应用在同一元素时,权重越高的CSS样式会被优先采用,如下面的CSS样式设置。

.font01 {

color: red;

}

p {

color: blue;

}

<p class="font01">内容</p>

那么,<p>标签中的文字颜色究竟应该是什么颜色呢?根据规范,标签选择符(如<p>)具有特殊性1,而类选择符具有特殊性10,id选择符具有特殊性100。因此,此例中p中的颜色应该为红色。而继承的属性,具有特殊性0,因此后面任何的定义都会覆盖掉元素继承来的样式。

特殊性还可以叠加,如下面的CSS样式设置。

h1 {

color: blue;     /*特殊性=1*/

}

p i {

color: yellow;    /*特殊性=2*/

}

.font01 {

color: red;      /*特殊性=10*/

}

#main {

color: black;     /*特殊性=100*/

}

3.层叠性

层叠就是指在同一个网页中可以有多个CSS样式存在,当拥有相同特殊性的CSS样式应用在同一个元素时,根据前后顺序,后定义的CSS样式会被应用,这是W3C组织批准的一个辅助HTML设计的新特性。它能够保持整个HTML的统一的外观,设计师可在设置文本之前就指定整个文本的属性,如颜色、字体大小等, CSS样式为设计制作网页带来了很大的灵活性。

由此可以推出一般情况下,CSS层次优先级为:内联CSS样式(写在标签内的)>内部CSS样式(写在文档头部的)>外部CSS样式(写在外部样式表文件中的)。

4.重要性

不同的CSS样式具有不同的权重,对于同一元素,后定义的CSS样式会替代先定义的CSS样式,但有时候设计师需要某个CSS样式拥有最高的权重,此时就要需要标出此CSS样式为“重要规则”,如下面的CSS样式设置。

.font01 {

color: red;

}

p {

color: blue; !important

}

<p class=”font01”>内容</p>

此时,<p>标签CSS样式中的color: blue将具有最高权重,<p>标签中的文字颜色为蓝色。

当设计师不指定CSS样式的时候,浏览器也可以按照一定的样式显示出HTML文档,这时浏览器使用自身内定的样式来显示文档。同时,访问者还可设定自己的样式表,例如视力不好的访问者会希望页面内的文字显示得大一些,因此其设定了一个属于自己的样式表保存在本机内。此时,浏览器的样式表权重最低,设计师的样式表会取代浏览器的样式表来渲染页面,而访问者的样式表则会优先于设计师的样式定义。

而用“!important”声明的规则将高于访问者本地样式的定义,困此需要谨慎使用。

1.8.2 CSS样式的注释

CSS样式中的注释与HTML代码中的注释不同,其格式如下。

/*注释内容*/

CSS样式中的注释内容可以放在单独的行内,也可以放在声明之后,如下面的代码。

/*主样式表*/

body {

font-size: 14px; /*设置页面默认字体大小*/

color: #000;   /*设置页面默认字体颜色*/

}

p {

line-height: 25px;

/*设置段落文字行高*/

}

/*CSS样式中的注释内容可以是单行

也可以是多行。

*/

提示

在CSS样式代码中合理地添加注释有助于后期对CSS样式设置进行修改和调整,不过对于大型网站来说,CSS样式表文件会比较复杂,建议撰写单独的说明文档。

1.8.3 CSS样式的缩写

浏览速度对于网站来说至关重要,而影响速度的因素有很多,包括网站服务器的整度、浏览者网络连接情况,以及浏览器必须下载的文件大小等。控制构成网站页面的文件大小对于降低网站数据流量、提高浏览速度也是非常重要的。

通过使用CSS样式缩放及其他一些简单的技巧,可以有效减少CSS样式表文件的大小。

1.使用CSS的缩写属性

CSS样式中某些属性是可以进行缩写的,用来代替多个相关属性的集合,如下面的CSS样式设置代码。

div {

margin-top: 10px;

margin-right: 20px;

margin-bottom: 25px;

margin-left: 15px;

}

可以缩写为如下形式。

div {

margin: 10px 20px 25px 15px;

}

类似的情况还有边框(border)、填充(padding)等,这些属性都包含4个边,可以合并写在一起,按照“上、右、下、左”的顺时针顺序来定义,值中间以空格来分隔,如“padding: 10px 20px 25px 15px;”。

当遇到如下情况时,值可以再缩写。

如果“上≠下”但是“左=右”,可以简写成3个值(上、左右、下),如“margin: 10px 20px 15px;”等同于“margin: 10px 20px 15px 20px;”。注意,如果“上=下”但是“左≠右”,则不可以缩写。

如上“上=下”并且“左=右”可以简写成两个值(上下、左右),如“margin: 10px 20px;”等同于“margin: 10px 20px 10px 20px;”。

如果上、下、左、右都相等,就可以合并成一个值,如“margin: 10px;”等同于“margin: 10px 10px 10px 10px;”。

而另一种情况,如背景(background)、字体(font)、列表(list-style)等,虽然没有4个边框,但是也可以缩写。如下面的CSS样式设置代码。

body {

background-color: #FF0000;

background-image: url(../images/bg.jpg);

background-repeat: repeat-x;

background-position: center top;

}

可以缩写为如下形式。

body {

background: #FF0000 url(../images/bg.jpg) repeat-x center top;

}

2.颜色值的缩写

CSS样式中的颜色值可以用十六进制的数字来表示,而类似于“#FF6600”这种两位重复的颜色值可以缩写为“#F60”。

3.利用继承

子元素自动继承父元素的属性值,如颜色、字体等,所以对于可以继承的CSS规则,不需要重新定义。

4.0px与0

CSS样式中的属性值无论是什么单位,0就是0,因此0px = 0pt = 0in = 0。