1 CSS权重
1.1 权重规则
CSS匹配的选择器中每一种选择器类型的数组决定了选择器的权重,CSS的优先级规则:
权重高的样式会被应用到元素上。如果权重相同则使用最后声明的样式。属性后加上!important,无条件优先
1.2 权重计算
内联样式的权重:1000
ID选择器的权重:100
类选择器、属性选择器、伪类选择器的权重:10
元素选择器的权重:1
通配符*、子选择器>、兄弟选择器+的权重:0
/* ul=1 + #nav=100 + li=1 + .active=10 + a=1 = 113*/ul#nav li.active a {}
2 CSS的继承
继承是指子元素继承父元素的样式,下面列举有继承性的属性:
2.1 字体属性
fontfont-familyfont-weightfont-sizefont-stylefont-variant2.2 文本属性
text-indent:文本缩进text-align:文本水平对齐line-height:行高word-spacing:字间距letter-spacing:字符间距text-transform:文本大小写direction:文本书写方向color:文本颜色2.3 其他
元素可见性:visibility表格布局属性列表布局属性:ist-style-type、list-style-image、list-style-position、list-style光标属性:cursor:页面样式属性3 CSS引入方式
内联样式<p style="color:red">红色的字</p>
内部样式表
<style>p {color:red;}</style>
外部样式表
链接式:<link type="text/css" rel="styleSheet" href="CSS文件路径" />
导入式:
<style type="text/css">@import url("css文件路径");</style>
链接式的语法是属于HTML的,优先加载CSS文件到页面
导入式的语法属于CSS,先加载HTML结构再加载CSS文件