1.outline是不占空间的,既不会增加额外的width或者height(这样不会导致浏览器渲染时出现reflow或是repaint)
2.outline有可能是非矩形的(火狐浏览器下)
链接样式的顺序记忆:
L(link)OV(visited)E and H(hover)A(active)TE
汉字的间隔调节也是用 letter-spacing 来实现的。
因为中文段落里字与字之间没有空格,因而 word-spacing 通常起不到调整间距的作用。
letter-spacing 与 word-spacing:
h1{ letter-spacing:30px; } ... <h1>letter spacing</h1>
letter-spacing 这个样式使用在英文单词时,是设置字母与字母之间的间距。
如果想设置英文单词之间的间距,可以使用 word-spacing 来实现。如下代码:
h1{ word-spacing:30px; } ... <h1>word spacing</h1>
优先级是浏览器是通过判断哪些属性值与元素最相关以决定并应用到该元素上的。优先级仅由选择器组成的匹配规则决定的。
优先级就是分配给指定的CSS声明的一个权重,它由匹配的选择器中的每一种选择器类型的数值决定。
下列是一份优先级逐级增加的选择器列表:
当 !important 规则被应用在一个样式声明中时,该样式声明会覆盖CSS中任何其他的声明, 无论它处在声明列表中的哪里. 尽管如此, !important规则还是与优先级毫无关系.使用 !important 不是一个好习惯,因为它改变了你样式表本来的级联规则,从而使其难以调试。
一些经验法则:
!important
解释:
利用选择器的权值进行计算比较,em 显示蓝色,示例如下:https://c.facesoho.com/codedemo/3048
感谢您的支持,我会继续努力的!
支付宝扫一扫,即可进行扫码打赏哦
432CSS轮廓(outline)属性
1.outline是不占空间的,既不会增加额外的width或者height(这样不会导致浏览器渲染时出现reflow或是repaint)
2.outline有可能是非矩形的(火狐浏览器下)
431CSS链接(link)
链接样式的顺序记忆:
430CSSText(文本)
汉字的间隔调节也是用 letter-spacing 来实现的。
因为中文段落里字与字之间没有空格,因而 word-spacing 通常起不到调整间距的作用。
429CSSText(文本)
letter-spacing 与 word-spacing:
letter-spacing 这个样式使用在英文单词时,是设置字母与字母之间的间距。
如果想设置英文单词之间的间距,可以使用 word-spacing 来实现。如下代码:
428CSS创建
多重样式优先级深入概念
优先级是浏览器是通过判断哪些属性值与元素最相关以决定并应用到该元素上的。优先级仅由选择器组成的匹配规则决定的。
优先级就是分配给指定的CSS声明的一个权重,它由匹配的选择器中的每一种选择器类型的数值决定。
优先级顺序
下列是一份优先级逐级增加的选择器列表:
!important 规则例外
当 !important 规则被应用在一个样式声明中时,该样式声明会覆盖CSS中任何其他的声明, 无论它处在声明列表中的哪里. 尽管如此, !important规则还是与优先级毫无关系.使用 !important 不是一个好习惯,因为它改变了你样式表本来的级联规则,从而使其难以调试。
一些经验法则:
!important
!important
!important
!important
权重计算:
解释:
利用选择器的权值进行计算比较,em 显示蓝色,示例如下:https://c.facesoho.com/codedemo/3048
CSS 优先级法则:
结果:在Firefox 下显示为蓝色;在IE 6 下显示为红色;
这里引入一张流行的CSS权重关系图:
更多参考资料