CSS 学习笔记(七)
CSS 的三大特性
CSS 有非常重要的三个特性:层叠性、继承性、优先级
层叠性
我们如果给相同的选择器设置相同的样式,那么一个样式就会覆盖另一个冲突的样式。那么层叠性主要就是解决样式的冲突问题。
层叠性对应着有一些原则:
样式冲突,遵循的原则是就近原则,那个样式离结构近,就会执行哪个样式。
样式不冲突,就不会层叠
举个简单的例子:
知道了层叠性对应的原则后,我们就可以知道“它是什么颜色的呢”的文字是粉色的啦!再仔细看看,第一个样式我们还给它设置了字体属性,由于第二个样式并没有给它设置,即没有发生冲突,所以就不会发生层叠。
继承性
CSS 中的继承是指子标签会继承父标签的某些样式,比如 text-,font-,line-这些元素开头的可以继承,以及 color 属性。 比如说:
div 标签是 body 的子标签,因此 div 标签就会继承父标签行高 1.5,这个 1.5 就是说当前元素文字大小 font-size 的 1.5 倍,即 14*1.5。
优先级
当一个元素指定多个选择器的时候,就会有优先级的产生。
选择器相同时,就会根据层叠性的原则执行层叠性。
选择器不同时,就会根据选择器的权重执行。
具体的选择器权重如下:
继承或者* < 元素选择器 <类选择器或伪类选择器 < id 选择器 < 行内样式 style="" < !important 重要的
举一个例子简单理解一下:
那么我们就思考下,“你真好看”到底是什么颜色的呢?根据优先级,我们可以知道最终的颜色为蓝色,如果我们在元素选择器中添加!important
则会先执行这个,最后的颜色就会成为粉色。
CSS 文本属性
除了字体,文本也是修饰文字段落的重要属性,比如为了搭配不同的背景颜色,我们常常使用文本属性修改文字的颜色,除此之外还有文本的颜色、对齐文本、装饰文本、文本缩进、行间距等,有了这些我们就可以轻松让我们的段落变得更好看!
文本颜色
在前文有提到过,color 属性用于定义文本的颜色,基本格式如下:
我们有三种方法来表示颜色分别是:
1.预定义的颜色值
属性值为 pink,blue 等
2.十六进制
属性值为 #FF0000,#29D794 等
3.RGB 代码
rgb(255,0,0)或 rgb(100%,0%,0%)
版权声明: 本文为 InfoQ 作者【lxmoe】的原创文章。
原文链接:【http://xie.infoq.cn/article/513221dee130c81b69a6d38c9】。文章转载请联系作者。
评论