开发者学堂课程【前端开发CSS基础：CSS 属性_字体文本文本装饰 】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/361/detail/4258
CSS 属性_字体文本文本装饰
内容介绍：
一、字体
二、文本
三、文本装饰
一、字体
属性 |
描述 |
font |
复合属性。设置或检索对象中的文本特性 |
font-style |
设置字体样式（斜体，人为斜体，以及正常） |
font-size |
设置字体大小 |
font-weight |
设置字体粗细 |
font-family |
设置文本的字体名称（宋体、微软雅黑等） |
font 是复合属性，下面这些属性都可以写在它之后，整合为一条语句。
1、font 在代码中的应用：
首先打开开发工具，创建一个 html 文件，命名为 font ，写入一个 p 标签，给它一个内容。
2、font-size 在代码中的应用：
设置字体要用 font-size ，设置成 30px ，执行刷新。字体变大了。
< !DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
P{
font-size: 30px;
}
3、font-style 在代码中的应用：
输入 font-style，第一个值 italic 代表斜体，normal 代表正常，oblique 代表人为斜体，首先点击斜体，执行。
<meta charset="UTF-8">
<title></title>
<style>
P{
font-size: 30px;
font-style: normal;
}
再比较一下它与人为斜体的区别。刷新，可以看到倾斜度发生了改变。
设置成正常即不倾斜，刷新。这就是 font-style。
4、font-weight 在代码中的应用：
font-weight 它用来设置字体的粗细，有 normal，100-900 以及 bold，首先选择normal ，即不加粗，默认值。再选择700，执行。< !DOCTYPE
P{
font-size: 30px;
font-style: normal;
font-weight: 700;
}
可以看到字体加粗了。
一般使用的值就是 700，它相当于 bold ，刷新没有任何改变。
5、font-family 在代码中的应用：
输入 font-family，系统已经提供了几种字体，随意选择一种。
P{
font-size: 30px;
font-style: normal;
font-weight: 700;
font-family: fantasy;
}
以前必须要使用一个安全的字体，它是为了使用户在使用时电脑也有这个字体，在css3 之后，对字体有了一个很大的改进，，可以使用 @font-face 这个方式来引入字体，输入 font-family 添加自定义字体名称，例如 myfont，引入一个已经下载好的字体，此时就可以应用这个字体了，上传的时候就可以直接把这个字体放在服务器上即可，用户访问时就可以直接看见字体。
二、文本
属性 |
描述 |
color |
文本颜色 |
text-align |
文本水平对齐方式 |
vertical-align |
垂直对齐方式 |
line-height |
行高 |
text-transform |
设置文本大小写 |
text-indent |
文本缩进 |
1、color 在代码中的应用：
color 属性是具有继承性的。
<title></title>
<link href="style.css" rel="stylesheet" type="text/css"/>
< /head>
<body>
<p>文本颜色测试</p>
< /body>
< /html>
Body{
color :red;
}
2、text-align 在代码中的应用：
Body{
color: red ;
}
P{
width: 300px;
background-color: aquamarine ;
text-align: center ;
}
它还可以使文字居左 left，居右 right。刷新，文字居右。默认值为居于左侧， left。这就是 text-align ，它有三个属性值，分别为居中，居左，居右。
3、text-indent 在代码中的应用：
设置首行缩进，比如写一个段落，段落的首行通常要缩进两个字符，首先多复制几个文字，让它变成一个段落，给 p 标签一个高度，设置为 200px 。此时为了段落美观，首行缩进两个字符，使用 text-indent ，设置为 2em，em 是相对长度单位，相当于当前对象内文档的字体尺。
4、text-transform 在代码中的应用：
它用来设置文本的大小写，有多个属性值。具体代码如下：
#ca{
text-transform: capitalize;
}
#up{
text-transform: uppercase ;
}
#low[
text-transform:lowercase;
}
此时就可以看到它每个属性值所代表的意思，第一个是每个单词的首字母变成大写，第二个代表将每个单词的每个字母都变成大写，第二个代表将每个单词的每个字母都变成小写，所以有时为了规范化会使用这个属性。
5、line-height 在代码中的应用：
行高：line-height 顾名思义指的是一行文字的高度，具体是指两行文字间的基线之间的距离。功能是它可以使单行文本垂直居中。需要注意它的作用对象是指单行文本，多行文本不可以。
div{
width:200px;
height: 300px;
background-color: aquamarine ;
font-size: 20px ;
三、文本装饰
属性 |
描述 |
text-decoration
|
复合属性。检索或设置对象中的文本的装饰。 |
text-decoration-line |
文本装饰线条的位置 |
text-decoration-color |
文本装饰线条的颜色 |
text-decoration-style |
文本装饰线条的形状 |
texct-shadow |
阴影 |
1、text-decoration-line 在代码中的应用：
写入一个 p 标签，给它一个内容，为其添加样式，一个属性是 text-decoration-line ，它是用来设置文本线条的，文本线条有上划线，下划线，贯穿线，首先点击下划线 underline 。此时可以看见这行文字下面有一条下划线。
2、text-decoration-color 在代码中的应用：
设置为蓝色，要注意设置文本装饰线条的颜色，首先需要有一个文本装饰线条，刷新执行，可以看到这条线变成了蓝色。
3、text-decoration-style 在代码中的应用：
它有多个属性值，第一个dashed为虚线，第二个 dotted 点状线，第三个 double 为双线，第四个 solid 为实线，最后一个 wavy 为波浪线，贯穿线的样式不太明显，可以换成下划线，刷新执行，可以看到这个线的样式变成了虚线状。
4、texct-shadow 在代码中的应用：
设置文本的阴影，它有四个参数值，第一个 inset 是水平位移，第二个 length 垂直位移，第三个 none 模糊度，第四个 choose color 颜色。
