4 CSS文本属性
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 | 行高 | 控制行与行之间的距离 |
