CSS2基础（2）一.CSS三大特性 1. 层叠性概念：如果发生了样式冲突，那就会根据一定的规则（选择器优先级），进行

一.CSS三大特性

1. 层叠性

概念：如果发生了样式冲突，那就会根据一定的规则（选择器优先级），进行样式的层叠（覆盖）。

什么是样式冲突？ ——— 元素的同一个样式名，被设置了不同的值，这就是冲突。

2. 继承性

概念：元素会自动拥有其父元素、或其祖先元素上所设置的某些样式。
规则：优先继承离得近的。

3. 优先级

!important > 行内样式 > ID选择器 > 类选择器 > 元素选择器 > * > 继承的样式。

二.CSS常用属性

1. 像素的概念

概念：我们的电脑屏幕是，是由一个一个“小点”组成的，每个“小点”，就是一个像素（px）。

2. 颜色的表示

1.颜色名(略)

2.rgb 或 rgba

编写方式：使用 (红、绿、蓝) 这三种光的三原色进行组合。

(r,g,b)
r 表示 红色
g 表示 绿色
b 表示 蓝色
a 表示 透明度

/* 使用 0~255 之间的数字表示一种颜色，透明度a默认为0 */
color: rgb(255, 0, 0);/* 红色 */
color: rgb(100%, 0%, 0%);/* 红色 */
color: rgb(0, 255, 0);/* 绿色 */
color: rgb(0, 0, 255);/* 蓝色 */
color: rgb(0, 0, 0);/* 黑色 */
color: rgb(255, 255, 255);/* 白色 */
color: rgba(100%, 0%, 0%,50%);/* 半透明的红色 */

小规律：

若三种颜色值相同，呈现的是灰色，值越大，灰色越浅。
rgb(0, 0, 0) 是黑色， rgb(255, 255,255) 是白色。
对于 rbga 来说，前三位的 rgb 形式要保持一致，要么都是 0~255 的数字，要么都是百分比。

3.HEX 或 HEXA

HEX 的原理与 rgb 一样，依然是通过：红、绿、蓝色进行组合，只不过要用 6位（分成3组）来表达格式：#rrggbb

每一位都是十六进制值
最小值00 最大值ff

color: #ff0000;/* 红色 */
color: #00ff00;/* 绿色 */
color: #0000ff;/* 蓝色 */
color: #000000;/* 黑色 */
color: #ffffff;/* 白色 */
color: #ff998866;/* 可简为：#f986 */

4.HSL 或 HSLA（略）

3. CSS字体属性

1.字体大小

属性名： font-size
作用：控制字体的大小。
注意：由于字体设计原因，文字最终呈现的大小，并不一定与 font-size 的值一致，可能大，也可能小。
语法：

div {
    font-size: 40px;
}
1. Chrome 浏览器支持的最小文字为 12px ，默认的文字大小为 16px ，并且 0px 会自动消失。
2. 不同浏览器默认的字体大小可能不一致，所以最好给一个明确的值，不要用默认大小。
3. 通常以给 body 设置 font-size 属性，这样 body 中的其他元素就都可以继承了。

2.字体族

属性名： font-family
作用：控制字体类型。
语法：

div {
    font-family: "STCaiyun","Microsoft YaHei",sans-serif
}
1. 使用字体的英文名字兼容性会更好，具体的英文名可以自行查询，或在电脑的设置里去寻找。
2. 如果字体名包含空格，必须使用引号包裹起来。
3. 可以设置多个字体，按照从左到右的顺序逐个查找，找到就用，没有找到就使用后面的，且通常在最后写上 serif （衬线字体）或 sans-serif （非衬线字体）。
4. windows 系统中，默认的字体就是微软雅黑。

3.字体风格

属性名： font-style
作用：控制字体是否为斜体。
常用值：

1. normal ：正常（默认值）
2. italic ：斜体（使用字体自带的斜体效果,常用）
3. oblique ：斜体（强制倾斜产生的斜体效果）

4.字体粗细

属性名：font-weight
作用：控制字体的粗细。

常用值：

关键词

1. lighter ：细
2. normal ：正常
3. bold ：粗
4. bolder ：很粗 （多数字体不支持）

数值

1. 100~1000 且无单位，数值越大，字体越粗 （或一样粗，具体得看字体设计时的精确程度）。
2. 100~300 等同于 lighter ， 400~500 等同于 normal ， 600 及以上等同于bold 。

5.字体复合写法

4.CSS文本属性

1.文本颜色

属性名： color
作用：控制文字的颜色。

2.文本间距

字母间距： letter-spacing
单词间距： word-spacing （通过空格识别词）
属性值为像素（ px ），正值让间距增大，负值让间距缩小。

3.文本修饰

属性名： text-decoration
作用：控制文本的各种装饰线。
可选值:

1. none：无装饰线（常用）
2. underline：下划线（常用）
3. overline：上划线
4. line-through：删除线

4.文本缩进

属性名： ext-indent
作用：控制文本首字母的缩进。
属性值： css 中的长度单位，例如： px

5.文本对齐_水平

属性名： text-align
作用：控制文本的水平对齐方式。
常用值：

1. left ：左对齐（默认值）
2. right ：右对齐
3. center ：居中对齐
div {
    text-align: center;
}

6.行高

属性名： line-height
作用：控制一行文字的高度。
可选值：
1. normal ：由浏览器根据文字大小决定的一个默认值。
2. 像素( px )。
3. 数字：参考自身 font-size 的倍数（很常用）。
4. 百分比：参考自身 font-size 的百分比。
行高注意事项：

1. line-height 过小会怎样？—— 文字产生重叠，且最小值是 0 ，不能为负数。
2. line-height 是可以继承的，且为了能更好的呈现文字，最好写数值。
3. line-height 和 height 是什么关系？
设置了 height ，那么高度就是 height 的值。
不设置 height 的时候，会根据 line-height 计算高度。

应用场景：

对于多行文字：控制行与行之间的距离。
对于单行文字：让 height 等于 line-height ，可以实现文字垂直居中。

7.文本对齐_垂直

顶部：无需任何属性，在垂直方向上，默认就是顶部对齐。
居中：对于单行文字，让 height = line-height 即可。