【个人整理加借鉴】CSS三大机制以及文本的形式笔记总结

CSS三大机制（重点！）

1.CSS样式来源

CSS中的样式一共有三种来源：创作人员、读者和用户代理。

1. 创作人员的样式 > 读者人员的样式 > 用户代理的默认样式
2. 标记为重要声明（!important）的读者样式 > 一切样式

2.CSS三大机制

css的三大机制是:特殊性[冲突]、继承、层叠。

2.1.特殊性

所谓的特殊性，其实是CSS样式一种计算声明权重的规则。特殊性是由规则的选择器确定的，然后用户代理会将计算出来的特殊性 附加给相应的每一个声明上。

权重计算规则:

第一等：代表内联样式，如: style=””，权值为1000。

第二等：代表ID选择器，如：#content，权值为0100。

第三等：代表类，伪类和属性选择器，如.content，权值为0010。

第四等：代表元素选择器和伪元素选择器，如div p，权值为0001。

通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。

重要性！important:

有时某些声明可能非常重要超过了其他所有生命。这时就可以在声明的结束分号之前插入! important来标志。

2.2继承

CSS还有一个继承机制，即样式不仅会应用到指定的样式，而且会应用到其后代的元素。

继承的机制需要注意的点:

并不是所有的属性都可以继承，一般的，大多数框模型属性（包括外边距、内边距、背景、边框）都不能继承。

2.3层叠

样式的呈现只有一种效果，而仅仅通过特殊性来决定权重并不能完全解决冲突。想象一下，如果两条作用于同一元素的声明，它 的特殊性相同，也就是它们的权重相同时，浏览器应该用哪一条声明呢？这个就与CSS的层叠机制有关了。

文本

1.文本颜色

英文颜色名称

1. 优点：方便快捷而且特定颜色比较准确。
2. 缺点：表示颜色数量有限，不支持透明度的表示。

十六进制方式

1. 颜色值由十六进制来表示红、绿、蓝（RGB）。每个颜色的最低值为 0(十六进制为 00)，最高值为 255(十六进制为 FF)。十六进制值的写法为 # 号后跟三个或六个十六进制字符。
2. 三位数表示法为：#RGB，转换为6位数表示为：#RRGGBB。
3. 优点：表示颜色种类多，使用较方便。
4. 缺点：不支持透明颜色。

.RGB方式:三原色配色方式

1. 颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。每种颜色的最小值是0（十六进 制：#00）。最大值是255（十六进制：#FF）。三种颜色 红，绿，蓝的组合从0到255，一共有1600万种不同颜色(256 x 256 x 256)。
2. 优点：表示颜色种类多，使用较方便
3. 缺点：不支持透明颜色。
4. 每个参数 (red、green 以及 blue) 定义颜色的强度，可以是介于 0 与 255 之间的整数，或者是百分比值（从 0% 到 100%）。

<color> 属性用于设置文本的颜色。颜色由以下值指定：

• 颜色名 - 比如 red
• 十六进制值 - 比如 #ff0000
• RGB 值 - 比如 rgb(255, 0, 0)

2.文本对齐

<text-align> 属性用于设置文本的水平对齐方式。

文本可以左对齐或右对齐，或居中对齐。

当 <text-align> 属性设置为 <justify> 后，将拉伸每一行，以使每一行具有相等的宽度，并且左右边距是直的（就像在杂志和报纸中）

3.垂直对齐

vertical-align 属性设置元素的垂直对齐方式。

vertical-align常用属性值

1. baseline：默认值，元素放置在父元素的基线上。
2. top：把元素的顶端与行中最高元素的顶端对齐
3. middle：把此元素放置在父元素的中部。
4. bottom：把元素的顶端与行中最低的元素的顶端对齐。

4.文本装饰

text-decoration 属性用于设置或删除文本装饰。

text-decoration: none; 通常用于从链接上删除下划线：

5.文本缩进

text-indent 属性用于指定文本第一行的缩进。

p {
text-indent: 2em;
}

6.字符间距

letter-spacing 属性用于指定文本中字符之间的间距。

7.文本阴影

text-shadow 属性为文本添加阴影。

h1.simple {
  text-shadow: 2px 2px;
}

向阴影添加颜色

h1.{
  text-shadow: 2px 2px blue;
}

向阴影添加模糊效果（5px）

h1.{
  text-shadow: 2px 2px 5px blue;
}