CSStext（文本）属性可定义文本外观，比如文本颜色，对齐文本，装饰文本，文本缩进，行间距等
4.1文本颜色
color属性用于定义文本颜色。
div {
color: red;
}
颜色表示方法：
| 表示 | 属性值 |
| 预定义颜色值 | red，green，blue，pink |
| 十六进制 | #FF0000,#FF6600,#29D794 |
| RGB代码 | rgb(255,0,0)或rgb（100%，0%，0%） |
开发中最常用的是16进制
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS文本外观属性之颜色</title>
<style>
div {
/* color: pink; */
/* color: #ff0000; */
color: rgb(200,0,0);
}
</style>
</head>
<body>
<div>听说喜欢pink色的男生，都喜欢男人</div>
</body>
</html>
4.2 对齐文本
text-align 属性用于设置元素内文本内容的水平对齐方式。
div {
text-align: center;
}
| 属性值 | 解释 |
| left | 左对齐（默认值） |
|
right |
右对齐 |
| center | 居中对齐 |
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文字对齐</title>
<style>
h1 {
/* 本质是让h1盒子里面的文字水平居中对齐 */
text-align: center;
}
</style>
</head>
<body>
<h1>文本对齐</h1>
</body>
</html>
4.3装饰文本
text-decoration 属性规定添加到文本的修饰，可以给文本添加下划线，删除线，上划线等
| 属性值 | 描述 |
| none | 默认。没有装饰线（最常用） |
| underline | 下划线。链接a自带下划线（常用） |
| overline | 上划线（几乎不用） |
| line-through | 删除线（不常用） |
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS文本装饰之装饰文本</title>
<style>
div {
/* 下划线 */
/* text-decoration: underline; */
/* 删除线 */
text-decoration: line-through;
/* 上划线 */
/* text-decoration: overline; */
}
a {
/* 取消a默认的下划线 */
text-decoration: none;
}
</style>
</head>
<body>
<div>
粉红色的回忆
</div> <a href="#">粉红色的回忆</a>
</body>
</html>
4.4文本缩进
text-indent属性用来指定文本的第一行缩进，通常将段落的首行缩进
div {
text-indent： 10px;
}
通过设置该属性，所有元素的第一行都可以所及一个给定的长度，甚至该长度可以是负值
p{
text-indent: 2em;
}
em 是一个相对单位，就是当前元素（front-size）1个文字的大小，如果当前元素没有设置大小，则会按照父元素的1个文字大小
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本缩进</title>
<style>
p {
/* 文本的第一行缩进多少距离 */
text-indent: 20px;
}
h4 {
/* 如果此时写了2em 则是当前元素 2个文字大小的距离 */
text-indent: 2em;
} </style>
</head>
<body>
<p>生活不易，但是千万不能放弃</p>
<p>一定不能颓废，要努力</p>
<p>还要自信</p>
<h4>just learn---------------------------------------------------------------------------------------------------</h4>
</body>
</html>
4.5行间距
line-height属性用于设置行间距里（行高）。可以控制文字行与行之间的距离
p{
line-height: 26px;
}
上间距下间距共同构成line-height（行高）
代码示范
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>行间距</title>
<style>
div {
line-height: 26px;
}
</style>
</head>
<body>
<div>中国人</div>
</body>
</html>
4.6文本属性总结
| 属性 | 表示 | 注意点 |
|
color |
文本颜色 | 我们通常用16进制比如 而且是简写模式 #ff |
| text-align | 文本对齐 | 可以设定文字水平的对齐方式 |
| text-indent | 文本缩进 | 通常我们用于段落首行缩进2个字的距离 text-indent：2em; |
|
text-decoration |
文本修饰 | 记住添加下划线 underline 取消下划线none |
| line-height | 行高 | 控制行与行之间的距离 |