开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第8天，点击查看活动详情
3.字体属性
字体属性包括：
字体系列，大小，粗细，文字样式（如斜体）
3.1 字体系列
CSS中使用 font-family 属性定义文本的字体系列
<head>
<style>
div {
font-family: arial, "微软雅黑";
}
</style>
</head>
<body>
<div> 小王 </div>
<div> 小周 </div>
</body>
1）各种字体之间必须用英文状态下的逗号隔开；
2）用空格隔开的多个单词组成的字体加引号（单双都可）
3）尽量使用系统默认自带字体，保证在每个用户的浏览器中都可以正常显示
3.2 字体大小
CSS中使用 font-size 属性定义文本的字体大小
div {
font-size: 20px；
}
1）px（像素）大小是网页的最常用单位；
2）谷歌浏览器的文字大小为16px；
3）不同的浏览器显示字号大小不一样，尽量自己明确值大小，不要默认大小
4）可以给body整个页面指定字体的大小，但标题标签不会随着body一起变化，标题需要单独指定文字大小
3.3 字体粗细
CSS中使用 font-weight 属性定义文本的字体粗细
div {
font-weight: bold；
}
属性值 作用
normal 默认值（不加粗）
bold 定义粗体（加粗）
100-900 400等同于不加粗，700等同于加粗（注意这两个数字后面不跟单位）
3.4 文字样式
CSS中使用 font-style 属性定义文本的字体的风格
div {
font-style: normal;
}
属性值 作用
normal 默认值，标准的字体样式
italic 斜体
注意：平时很少使文字加斜体，反而使斜体的文字改为不斜体（斜体标签有em，i）
3.5 字体的符合属性
字体属性可以把以上文字样式综合来写，这样更节省代码：
div {
/* font:font-style font -weight font-size/line-height font-family; */
font: italic 700 20px "微软雅黑";
}
注意
1）使用font属性时，必须按照上面的语法格式中的顺序书写，不能更换顺序，并且各个属性之间以空格隔开；
2）不需要设置的属性可以省略（取默认值），但需要保留 font-size 和 font-family 属性，否则 font 不起作用
4.文本属性
CSS文本属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本压缩、行间距等。
4.1 文本颜色
使用 color 属性定义文本的颜色
<head>
<style>
div {
color: red
}
</style>
</head>
<body>
<div> 小王 </div>
<div> 小周 </div>
</body>
表示方法 属性值
颜色值 red，green，blue
十六进制 #FF0000
RGB代码 rgb(255,0,0)
（不需要记，吸取使用即可）
4.2 装饰文本
text-decoration 属性添加对文本的修饰
div {
text-decoration: underline;
}
属性值 作用
none 默认，没有装饰线，经常用none给链接取消下划线
underline 下划线，链接a自带下划线
overline 上划线
line-through 删除线
4.3 对齐文本
text-align 属性用于设置文本的水平对齐方式
div {
text-align: center;
}
属性值 作用
left 左对齐（默认）
right 右对齐
center 居中
4.4 文本压缩
text-indent 属性用于指定文本地一样的缩进，通常将段落手段的首行进行缩进
p {
text-indent: 2em;
}
em使一个相对单位，为当前元素一个文字的大小
4.5 行间距
line-height属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离
p {
line-height: 26px;
}
行间距包括上间距和下间距，其次为文本高度
5.CSS引入方式
CSS样式上写的位置，可以分为三大类：
1）嵌入式
2）行内式
3）链接式
5.1 嵌入式
把所有代码放在 style 标签中
<style>
div {
text-align: center;
}
p {
text-indent: 2em;
}
</style>
1）style 标签理论上放在HTML文档的任何位置都可以，但一般放在文档的head标签中
2）方便控制当前整个页面中的元素样式设置
3）缺点：没有实现样式和结果后的完全分离
5.2 行内式
在元素标签内部的style属性中设置css样式
<div style="color: red; font-size: 12px;"> 小王 </div>
<p style="color: red; font-size: 12px;"> 小王 </p>
1）style是标签的属性
2）可以控制当前的标签设置样式
3）不推荐大量使用，只有对当前元素添加简单样式时，可以考虑使用
5.3 链接式
即外部新建文件，使用最多
实现开发都是外部样式表，适用于央视比较多的情况
核心： 样式独立卸载css文件中，之后把css文件引入到html页面中使用
引入外部样式表分为两步：
1）新建一个后缀名为 .css 的样式文件，把所有的css代码都放入此文件中
2）在 html页面head中，使用 link 标签引入这个文件
<link rel="stylesheet" href="css文件路径">
属性 作用
rel 定义当花钱文件与被连接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件
href 定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径
