目录
一、CSS笔记
1.1、CSS文本颜色
1.2、CSS字母大小写
1.3、CSS文本对齐
1.4、CSS文本缩进、间距、行高
（1）如何计算行高？？？
1.5、CSS文本装饰线
1.6、CSS字体和字号
（1）谷歌字体
一、CSS笔记
1.1、CSS文本颜色
CSS中，颜色可以使用四种格式，分别是：
表示颜色的单词。十六进制的颜色数字。rgb格式。rgba格式，添加了透明度。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS</title><style>.box1 {color: red;}.box2 {color: #0f7b2e;}.box3 {color: rgb(26, 187, 201);}.box4 {color: rgba(255, 0, 255, .2);}</style></head><body><div class="box1">单词表示的颜色</div><div class="box2">十六进制的颜色</div><div class="box3">rgb的颜色</div><div class="box4">rgba的颜色</div></body></html>
1.2、CSS字母大小写
CSS提供了【text-transform】属性，可以用于转换字母的大小写，取值有三种：
【text-transform】属性：
uppercase：转换为大写字母。lowercase：转换为小写字母。capitalize：每个单词的首字母大写。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS</title><style>.box1 {text-transform: uppercase;}.box2 {text-transform: lowercase;}.box3 {text-transform: capitalize;}</style></head><body><div class="box1">css 字母 大写</div><div class="box2">CSS 字母 小写</div><div class="box3">html javaScript css 字母单词首字母大写</div></body></html>
1.3、CSS文本对齐
文本水平对齐属性：【text-align】，取值：
left左对齐。right右对齐。center居中对齐。justify文本左右两端对齐。
文本垂直对齐属性：【vertical-align】，取值：
baseline基线对齐。text-top文本顶部对齐。text-bottom文本底部对齐。sub下角标对齐。supper上角标对齐。
基线对齐是按照四线三格来计算的，并且这只对英文有效，英文字母位于四线三格中的第二格，第三条线就是叫做基线，如下所示。
1.4、CSS文本缩进、间距、行高
设置文本缩进：【text-indent】属性，可以使用【px、em】，一般使用【2em】，表示两个字母宽度。设置文字间距：【letter-spacing】属性，具体数字。设置单词间距：【word-spacing】属性，这个只对英文有效。设置文本的行间距、行高：【line-height】属性，取值：normal表示正常行高，数字、px。设置文本空白：【white-space】属性，取值：nowrap表示不换行。（1）如何计算行高？？？
CSS中行高，也是按照四线三格来计算的，如下所示：
注意：
当line-height设置为1的时候，这个时候行距就等于0。
1.5、CSS文本装饰线
【text-decoration-line】属性，设置文本装饰线，取值三个：
overline：上划线。line-through：删除线。underline：下划线。
【text-decoration-style】属性，设置装饰线的类别，取值：
solid：实线。double：双实线。dotted：圆点线。dashed：虚线。
【text-decoration-thickness】属性，设置装饰线的粗细，取值：
auto：默认属性。px：使用像素设置线条粗细。百分比%：根据文字的高度计算。
上面几个属性值可以简写成一个属性【text-decoration】。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS</title><style>div {color: red;font-size: 20px;margin: 20px 0;}.a {text-decoration-line: line-through;}.b {color: blue;text-decoration-line: overline;text-decoration-style: dotted;}.c {text-decoration-line: underline;text-decoration-style: dashed;text-decoration-thickness: 4px;}.d {color: green;text-decoration: line-through red double 4px;}</style></head><body><div class="a">文本装饰线</div><div class="b">文本装饰线</div><div class="c">文本装饰线</div><div class="d">文本装饰线</div></body></html>
1.6、CSS字体和字号
【font-family】属性，用于设置字体，可以使用多个属性值，采用逗号隔开。
【font-size】属性，设置字体大小，可以使用【px】像素单位；可以使用【em】相对单位，1em等于16px；可以使用【rem】相对单位。
【font-style】属性，设置字体的风格，例如：normal正常显示、italic斜体。
【font-weight】属性，设置字体粗细，例如：lighter细体、normal正常、bold加粗、bolder更加加粗，或者使用数字：100、200、300、400、500、600、700、800、900。
（1）谷歌字体
google谷歌字体是免费使用的，支持1000多种字体，使用的时候，只需要在HTML里面引入即可。
<!-- 引入谷歌字体 Sofia --><link rel="stylesheet" href="/css?family=Sofia">
需要使用多种字体，那就可以在family后面使用【|】竖线将多种字体分隔即可。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>font字体</title><!-- 引入谷歌字体 Sofia --><link rel="stylesheet" href="/css?family=Sofia|Trirong"><style>div {font-size: 30px;color: green;font-family: "Sofia", serif;}.b {font-family: "Trirong", serif;}</style></head><body><div class="a">谷歌字体</div><div class="b">谷歌字体</div></body></html>
