文本样式

属性名	含义	举例
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>
复制代码