CSS的文本样式
- 文本样式
-
- 设置文本颜色
- 设置元素水平对齐方式
- 设置首行文本的缩进
- 设置文本的行高
- 设置文本的装饰
文本样式
| 属性名 | 含义 | 举例 |
|---|---|---|
| color | 设置文本颜色 | color:#00C |
| text-align | 设置元素水平对齐方式 | text-align:right |
| text-indent | 设置首行文本的缩进 | text-indent:20px |
| line-height | 设置文本的行高 | line-height:25px |
| text-decoration | 设置文本的装饰 | text-decoration:underline |
设置文本颜色
取值方法：
1.颜色名字
2.十六进制记法
3.R G B 三原色
4.RGBA 三原色，A是控制透明度 Alpha 0 -1 , 1完全不透明，0 完全透明
<p style="color: red;">使用颜色名称</p>
<p style="color: #006699;">使用十六进制</p>
<p style="color: rgb(0,0,0);">使用十六进制</p>
<p style="color: rgba(0,0,0,1);">rgba透明度为1</p>
<p style="color: rgba(0,0,0,0);">rgba透明度为0</p>
样例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p style="color: red;">使用颜色名称</p>
<p style="color: #006699;">使用十六进制</p>
<p style="color: rgb(0,0,0);">使用十六进制</p>
<p style="color: rgba(0,0,0,1);">rgba透明度为1</p>
<p style="color: rgba(0,0,0,0);">rgba透明度为0</p>
</body>
</html>
效果截图：
最后一行是完全透明看不到↓
这样就可以看到了↓
设置元素水平对齐方式
文本的对齐方式 left right center
<p style="text-align: left;">文字对齐方向 left</p>
<p style="text-align: right;">文字对齐方向 right</p>
<p style="text-align: center;">文字对齐方向 center</p>
样例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p style="text-align: left;">文字对齐方向 left</p>
<p style="text-align: right;">文字对齐方向 right</p>
<p style="text-align: center;">文字对齐方向 center</p>
</body>
</html>
效果截图：
设置首行文本的缩进
<p style="text-indent: 50px;">这里写一段话</p>
样例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p >中国专业IT社区CSDN (Chinese Software Developer Network) 创立于1999年，致力于为中国软件开发者提供知识传播、在线学习、职业发展等全生命周期服务。
旗下拥有：专业的中文IT技术社区： CSDN.NET；移动端开发者专属APP： CSDN APP、CSDN学院APP；
新媒体矩阵微信公众号：CSDN资讯、程序人生、GitChat、CSDN学院、AI科技大本营、区块链大本营、CSDN云计算、GitChat精品课、人工智能头条、CSDN企业招聘；
IT技术培训学习平台： CSDN学院；技术知识移动社区： GitChat；IT人力资源服务：科锐福克斯；
高校IT技术学习成长平台：高校俱乐部。</p>
<p style="text-indent: 50px;">中国专业IT社区CSDN (Chinese Software Developer Network) 创立于1999年，致力于为中国软件开发者提供知识传播、在线学习、职业发展等全生命周期服务。
旗下拥有：专业的中文IT技术社区： CSDN.NET；移动端开发者专属APP： CSDN APP、CSDN学院APP；
新媒体矩阵微信公众号：CSDN资讯、程序人生、GitChat、CSDN学院、AI科技大本营、区块链大本营、CSDN云计算、GitChat精品课、人工智能头条、CSDN企业招聘；
IT技术培训学习平台： CSDN学院；技术知识移动社区： GitChat；IT人力资源服务：科锐福克斯；
高校IT技术学习成长平台：高校俱乐部。</p>
</body>
</html>
效果截图：
效果很明显吧，第一段话没有加缩进，第二段话加了缩进
设置文本的行高
行高,一般用于配合着垂直居中使用, 将文本的 line-height 和容器的高度一致
<div style="border: solid 1px red;height: 100px;line-height: 100px;">
CSDN
</div>
样例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div style="border: solid 1px red;height: 100px;line-height: 100px;">
CSDN
</div>
</body>
</html>
效果截图：
设置文本的装饰
| text-decoration-line属性值 | 说明 |
|---|---|
| none | 默认值定义的标准文本 |
| underline | 设置文本的下划线 |
| overline | 设置文本的上划线 |
| line-through | 设置文本的删除线 |
| text-decoration-style属性值 | 说明 |
|---|---|
| solid | 默认值线条将显示为单线 |
| double | 线条将显示为双线 |
| dotted | 线条将显示为点状线 |
| dashed | 线条将显示为虚线 |
| wavy | 线条将显示为波浪线 |
| text-decoration-color属性值 | 说明 |
|---|---|
| 选择颜色 | 线条显示相应的颜色 |
样例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div style="text-decoration-line: none;">CSDN</div><br/>
<div style="text-decoration-line: line-through;">CSDN</div><br/>
<div style="text-decoration-line: underline;">CSDN</div><br/>
<div style="text-decoration-line: overline;">CSDN</div><br/>
<div style="text-decoration-line: underline;text-decoration-style: solid;">CSDN</div><br/>
<div style="text-decoration-line: underline;text-decoration-style: dashed;">CSDN</div><br/>
<div style="text-decoration-line: underline;text-decoration-style: dotted;">CSDN</div><br/>
<div style="text-decoration-line: underline;text-decoration-style: wavy;">CSDN</div><br/>
<div style="text-decoration-line: underline;text-decoration-style: unset;">CSDN</div><br/>
<div style="text-decoration-line: underline;text-decoration-style: double;">CSDN</div><br/>
<div style="text-decoration-line: underline;text-decoration-style: none;">CSDN</div><br/>
<div style="text-decoration-line: underline;text-decoration-style: solid;text-decoration-color: red;">CSDN</div><br/>
</body>
</html>
效果截图：
效果可以叠加使用，如上↑
写作不易，读完如果对你有帮助，感谢点赞支持！
如果你是电脑端，看见右下角的“一键三连”了吗，没错点它[哈哈]
加油！
共同努力！
Keafmd
