CSS和层叠

2019-06-04 12:04:20 作者：互联网

##常见的CSS属性## color：red  设置元素内容的颜色 text-align:center  设置文字的对齐方式（例：centeer 居中） font-size  设置文字大小 font-weight:  设置文字粗细 background:  设置文字背景颜色 ##通配选择器## 写法：*{} 通配选择器会选择body中所有内容。 ##伪类选择器## 写法：.weilei{}=>.weilei:hover{} 必须两个同时写，一前一后，鼠标放在上面会从第一个慢慢变成第二个。 ##伪元素选择器## 写法：.weilei::hover 元素的选择器 ##声明## ###作者样式表### 主要推荐，由网页开发者书写的样式表。 ###浏览器默认样式### 浏览器的默认样式，若没有强制更改，则会显示为浏览器的默认样式。 ###用户样式表### 用户所用的样式表，不需要过多关注。 ##层叠过程## ###比较优先级### 每一个声明都有一个优先级，当发生冲突时，优先级高的会保留，优先级低的会被淘汰，一个声明的优先级，与它的来源和重要性有关。 1.浏览器默认样式表中的声明(优先级由高到低) 2.作者样式表中的普通声明 3.作者样式表中的重要声明 ###比较特殊性### 每一个声明都有一个特殊性，当发生冲突时，特殊性高的会保留，特殊性低的会被淘汰，一个声明的特殊性，取决于规则适用范围的大小，规则适用范围越大，特殊性越低，适用范围越小，特殊性越高 1.行内样式（特殊性由高到低） 2.ID选择器 3.类选择器 4.元素选择器 5.通配符选择器 在比较特殊性时，每一个冲突的声明，会生成4个数字(a,b,c,d)，以比较特殊性，a越大，特殊性越高，若a相同，比较b，b越大，特殊性越高，依次类推... a: 若声明是行内样式，则为1，否则为0 b: 规则中ID选择器的个数 c: 规则中类选择器、伪类选择器和属性选择器的个数 d: 规则中元素选择器、伪元素选择器的个数 注：如果优先级相同才比较特殊性 ###比较源次序### 最后出现的声明胜出，其他的全部淘汰 注：只有在特殊性相同的时候才会比较源次序 注2：该规则的实际应用CSS Reset代码前置 注3：该规则的实际应用a元素的伪类书写顺序 ####a元素的伪类书写顺序#### 1.:hover：鼠标悬停到元素上的样式，适用于其他元素 2.:link：链接未被访问过的样式 3.:visited：链接已被访问过的样式 4.:active：链接被激活时的样式 注：必须a元素的伪类书写顺序按照此顺序书写 ##继承## ###什么是继承### 继承，是指子元素会自动（继承是自动发生的，开发者不需要书写任何额外的代码）拥有父元素的某些CSS属性（并不不是所有CSS属性都可以被子元素继承）。 注：继承须有传递性 注2：有些属性在页面的某个区域中具有通用性 注3：若没有继承，则必须为该区域的每个元素指定样式，导致代码重复臃肿 ###继承要求### 一个元素的某个CSS属性，只有满足下面两个条件，才会继承父元素： 1.该属性是可继承的属性 2.该属性在样式表中没有声明 ###强制继承### 强制继承，也叫做显式继承，是指将CSS属性值设置为：！inherit 这样做，通常有两个原因： 1.为了继承有些不可继承的属性 2.为了继承已被声明过的属性 ##属性值的计算过程### 属性值的计算过程就是由：无属性值通过CSS的属性值计算得出每个属性都有值。 CSS属性值计算过程： 1.确定声明值：参考样式表中没有冲突的声明，作为CSS属性值 2.层叠冲突：对样式表有冲突的声明使用层叠规则，确定CSS属性值（通过比较优先级，特殊性和源次序） 3.使用继承：对仍然没有值的属性，若可以继承，则继承父元素的值 4.使用默认值：对仍然没有值的属性，使用默认值 ##表格## 写法：< table >表格，< tr >行，< td >列 注：必须行中加列。 < td colspan/rowspan="数字" >表示一个格子占几行/列

标签：层叠,样式表,特殊性,##,CSS,选择器,###,属性
来源： https://www.cnblogs.com/html-he-css/p/10972663.html