CSS（四）：Text（文本）属性
CSS Text（文本）属性用于定义文本的外观，比如文本的颜色，对齐文本，装饰文本，文本颜色，行间距等
color（文本颜色）
color属性用于定义文本的颜色
基本语法
div {
color: 属性值;
}
| 表示 | 属性值 |
|---|---|
| 预定义颜色 | red，green，blue ... |
| 十六进制 | #FF0000, #FF6600, #cc00ff ... |
| RGB代码 | rgb(255,0,0) 或rgb(100%,0%,0%) |
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS文本外观属性之颜色</title>
<style>
div {
/* color: deeppink; */
/* color: #cc00ff; */
color: rgb(255, 0, 255);
}
</style>
</head>
<body>
<div>听说点关注的人，都是帅哥美女</div>
</body>
</html>
text-align（文本对齐）
text-align属性用于设置元素内文本内容的水平对齐方式。
基本语法
div {
text-align: 属性值;
}
| 属性值 | 解释 |
|---|---|
| left | 左对齐（默认值） |
| center | 居中对齐 |
| right | 右对齐 |
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS文本外观之文字对齐</title>
<style>
h1 {
/* 本质是让h1盒子里面的文字水平居中对齐 */
/* text-align: center; */
text-align: right;
}
</style>
</head>
<body>
<h1>我是谁，我在那</h1>
</body>
</html>
text-decortion（文本装饰）
text-decortion属性规定添加到文本的修饰，可以给文本添加下划线，删除线，上划线等.
基本语法
div {
text-decoration: 属性值;
}
| 属性值 | 描述 |
|---|---|
| none | 默认，没有装饰线 |
| underline | 下划线 |
| overline | 上划线 |
| line-throgh | 删除线 |
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS文本外观之装饰文本</title>
<style>
div {
/* 下划线 */
/* text-decoration: underline; */
/* 删除线 */
text-decoration: line-through;
/* 上划线 */
text-decoration: overline;
}
a {
/* 取消a默认的下划线 */
text-decoration: none;
color: #333;
}
</style>
</head>
<body>
<div>粉红色的回忆</div>
<a href="#">粉红色的回忆</a>
</body>
</html>
text-indent（文本缩进）
text-indent属性用来指定文本第一行的缩进，通常是将段落的首行缩进。
基本语法
div {
text-indent: 10px;
}
通过设置该属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。
p {
text-indent: 2em;
}
em是一个相对单位，就是当前元素（fone-size）1个文字的大小，如果当前元素没有设置大小，则会按照父元素的1个文字大小（这里涉及到CSS的继承后面会说）。
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS文本外观之文本缩进</title>
<style>
p {
font-size: 24px;
/* 文本的第一行首行缩进 多少距离 */
/* text-indent: 20px; */
/* text-indent: -20px; */
/* 如果此时写了2em 则是缩进当前元素 2个文字大小的距离 */
text-indent: 2em;
}
</style>
</head>
<body>
<p>打开北京、上海与广州的地铁地图，你会看见三张纵横交错的线路网络，这代表了中国最成熟的三套城市轨道交通系统。</p>
<p>可即使这样，在北上广生活的人依然少不了对地铁的抱怨，其中谈及最多的问题便是拥挤——对很多人而言，每次挤地铁的过程，都像是一场硬仗。更何况，还都是败仗居多。</p>
<p>那么，当越来越多的二线甚至三线城市迎接来了自己的地铁，中国哪里的地铁是最拥挤的呢？</p>
</body>
</html>
line-height（行间距）
line-height属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离。
基本语法
p {
line-height: 26px;
}
- 行间距由上间距，文本高度，下间距组成
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS文本外观之行间距</title>
<style>
div {
line-height: 26px;
}
p {
line-height: 25px;
}
</style>
</head>
<body>
<div>中国人</div>
<p>打开北京、上海与广州的地铁地图，你会看见三张纵横交错的线路网络，这代表了中国最成熟的三套城市轨道交通系统。</p>
<p>可即使这样，在北上广生活的人依然少不了对地铁的抱怨，其中谈及最多的问题便是拥挤——对很多人而言，每次挤地铁的过程，都像是一场硬仗。更何况，还都是败仗居多。</p>
<p>那么，当越来越多的二线甚至三线城市迎接来了自己的地铁，中国哪里的地铁是最拥挤的呢？</p>
</body>
</html>
总结
| 属性 | 表示 | 注意点 |
|---|---|---|
| color | 文本颜色 | 常用十六进制 比如#fff |
| text-align | 文本对齐 | 可以设定文字的对齐方式 |
| text-indent | 文本缩进 | 通常用于段落首行缩进2个字的距离，text-indent: 2em; |
| text-decoration | 文本装饰 | 添加下划线 underline 取消下划线 none |
| line-height | 行高 | 控制行与行之间的距离 |
