- CSS网页布局与浏览器兼容
- 张晓景
- 1954字
- 2021-01-08 17:58:59
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。