一、继承
概念:CSS的某些样式是具有继承性的,继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代。比如下面代码:如某种颜色应用于p标签,这个颜色设置不仅应用p标签,还应用于p标签中的所有子元素文本,这里子元素为span标签。
二、特殊性
当我们为同一个元素设置了不同的CSS样式代码,浏览器是根据权值来判断使用哪种css样式的,哪种权值高就使用哪种css样式。
权值的规则:
标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100。
注意:还有一个权值比较特殊--继承也有权值但很低,有的文献提出它只有0.1,所以可以理解为继承的权值最低。
三、层叠
概念:层叠就是在html文件中对于同一个元素可以有多个css样式存在,当有相同权重的样式存在时,会根据这些css样式的前后顺序来决定,处于最后面的css样式会被应用。可以理解为后面的样式会覆盖前面的样式。
四、重要性
适用情况:
我们在做网页代码的时,有些特殊的情况需要为某些样式设置具有最高权值,这时候我们可以使用!important来解决。
注意样式优先级为:浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式,但!important优先级样式是个例外,权值高于用户自己设置的样式。
语法格式:p{color:red!important;}
注意important要写在分号的前面
五、CSS格式化排版
1.文字排版-字体
语法:body{font-family:"Microsoft Yahei"}或body{font-family:”宋体“}
2.文字排版-字号
语法:body{font-size:12px;color:#666}
3.文字排版-下划线
语法:p{ text-decoration:underline;}
4.文字排版-删除线
.oldPrice{text-decoration:line-through;}
5.文字排版-粗体
语法:body{font-weight:bold;}
6.段落排版-缩进
中文文字中的段前习惯空两个文字的空白,这个特殊的样式可以用下面代码来实现:
p{text-indent:2em;}
注意:2em的意思就是文字的2倍大小。
7.段落排版-行间距
语法:p{line-height:1.5em;}
8.段落排版-中文字间距,字母间距
如果想在网页排版中设置文字间隔或者字母间隔就可以使用letter-spacing来实现,如下面代码:
调整中文字/字母间距:p{letter-spacing:50px;}
调整单词间距:用word-spacing p{word-spacing:50px;}
9.段落排版-对齐
想为块状元素中的文本、图片设置居中样式吗?可以使用text-align样式代码,如下代码可实现文本居中显示。
语法:p{text-align:right/left/center;}