CSS和层叠

##常见的CSS属性##

color：red  设置元素内容的颜色

<br>text-align:center&nbsp;&nbsp;设置文字的对齐方式（例：centeer&nbsp;居中）

<br>font-size&nbsp;&nbsp;设置文字大小

<br>font-weight:&nbsp;&nbsp;设置文字粗细

<br>background:&nbsp;&nbsp;设置文字背景颜色

##通配选择器##

写法：*{}

<br>通配选择器会选择body中所有内容。

##伪类选择器##

写法：.weilei{}=>.weilei:hover{}

<br>必须两个同时写，一前一后，鼠标放在上面会从第一个慢慢变成第二个。

##伪元素选择器##

写法：.weilei::hover

<br>元素的选择器

##声明##

###作者样式表###

主要推荐，由网页开发者书写的样式表。

###浏览器默认样式###

浏览器的默认样式，若没有强制更改，则会显示为浏览器的默认样式。

###用户样式表###

用户所用的样式表，不需要过多关注。

##层叠过程##

###比较优先级###

每一个声明都有一个优先级，当发生冲突时，优先级高的会保留，优先级低的会被淘汰，一个声明的优先级，与它的来源和重要性有关。

<br>1.浏览器默认样式表中的声明(优先级由高到低)

<br>2.作者样式表中的普通声明

<br>3.作者样式表中的重要声明

###比较特殊性###

每一个声明都有一个特殊性，当发生冲突时，特殊性高的会保留，特殊性低的会被淘汰，一个声明的特殊性，取决于规则适用范围的大小，规则适用范围越大，特殊性越低，适用范围越小，特殊性越高

<br>1.行内样式（特殊性由高到低）

<br>2.ID选择器

<br>3.类选择器

<br>4.元素选择器

<br>5.通配符选择器

<br>在比较特殊性时，每一个冲突的声明，会生成4个数字(a,b,c,d)，以比较特殊性，a越大，特殊性越高，若a相同，比较b，b越大，特殊性越高，依次类推...

<br>a: 若声明是行内样式，则为1，否则为0

<br>b: 规则中ID选择器的个数

<br>c: 规则中类选择器、伪类选择器和属性选择器的个数

<br>d: 规则中元素选择器、伪元素选择器的个数

<br>注：如果优先级相同才比较特殊性

###比较源次序###

最后出现的声明胜出，其他的全部淘汰

<br>注：只有在特殊性相同的时候才会比较源次序

<br>注2：该规则的实际应用CSS Reset代码前置

<br>注3：该规则的实际应用a元素的伪类书写顺序

####a元素的伪类书写顺序####

1.:hover：鼠标悬停到元素上的样式，适用于其他元素

<br>2.:link：链接未被访问过的样式

<br>3.:visited：链接已被访问过的样式

<br>4.:active：链接被激活时的样式

<br>注：必须a元素的伪类书写顺序按照此顺序书写

##继承##

###什么是继承###

继承，是指子元素会自动（继承是自动发生的，开发者不需要书写任何额外的代码）拥有父元素的某些CSS属性（并不不是所有CSS属性都可以被子元素继承）。

<br>注：继承须有传递性

<br>注2：有些属性在页面的某个区域中具有通用性

<br>注3：若没有继承，则必须为该区域的每个元素指定样式，导致代码重复臃肿

###继承要求###

一个元素的某个CSS属性，只有满足下面两个条件，才会继承父元素：

<br>1.该属性是可继承的属性

<br>2.该属性在样式表中没有声明

###强制继承###

强制继承，也叫做显式继承，是指将CSS属性值设置为：！inherit

<br>这样做，通常有两个原因：

<br>1.为了继承有些不可继承的属性

<br>2.为了继承已被声明过的属性

##属性值的计算过程###

属性值的计算过程就是由：无属性值通过CSS的属性值计算得出每个属性都有值。

CSS属性值计算过程：

<br>1.确定声明值：参考样式表中没有冲突的声明，作为CSS属性值

<br>2.层叠冲突：对样式表有冲突的声明使用层叠规则，确定CSS属性值（通过比较优先级，特殊性和源次序）

<br>3.使用继承：对仍然没有值的属性，若可以继承，则继承父元素的值

<br>4.使用默认值：对仍然没有值的属性，使用默认值

##表格##

写法：< table >表格，< tr >行，< td >列

<br>注：必须行中加列。

<br>< td colspan/rowspan="数字" >表示一个格子占几行/列