【HTML/CSS】CSS权重、继承及引入方式

1 CSS权重

1.1 权重规则

CSS匹配的选择器中每一种选择器类型的数组决定了选择器的权重，CSS的优先级规则：

1. 权重高的样式会被应用到元素上。
2. 如果权重相同则使用最后声明的样式。
3. 属性后加上!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 字体属性

1. font
2. font-family
3. font-weight
4. font-size
5. font-style
6. font-variant

2.2 文本属性

1. text-indent：文本缩进
2. text-align：文本水平对齐
3. line-height：行高
4. word-spacing：字间距
5. letter-spacing：字符间距
6. text-transform：文本大小写
7. direction：文本书写方向
8. color：文本颜色

2.3 其他

1. 元素可见性：visibility
2. 表格布局属性
3. 列表布局属性：ist-style-type、list-style-image、list-style-position、list-style
4. 光标属性：cursor：
5. 页面样式属性

3 CSS引入方式

1. 内联样式

<p style="color:red">红色的字</p>

2. 内部样式表

<style>
	p {
     
     
		color:red;
	}
</style>

3. 外部样式表
   链接式：<link type="text/css" rel="styleSheet" href="CSS文件路径" />
   导入式：

   <style type="text/css">
    @import url("css文件路径");
   </style>
   

   链接式的语法是属于HTML的，优先加载CSS文件到页面
   导入式的语法属于CSS，先加载HTML结构再加载CSS文件