视频加载中...
文字样式针对的是“文字本身”，而文本样式针对的是“整个段落”。
一、常用的文本样式属性
1、text-indent 首行缩进
2、text-align 水平对齐
3、text-decoration 文本修饰
4、text-transform 大小写转换
5、line-height 行高
6、letter-spacing 字母间距
7、word-spacing 词间距
二、首行缩进 text-indent
语法：
text-indent:像素值;
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>12CSS</title>
<style type="text/css">
p
{
font-size: 7px;
text-indent:14px;
}
</style>
</head>
<body>
<h5>特殊任务</h5>
<p>
10月31日，神舟十六号载人飞船返回舱在东风着陆场成功着陆。有别于之前的神舟飞船撤离过程，神舟十六号飞船需要执行一次绕飞任务，
从径向停泊点绕飞至前向，再从前向绕飞至后向撤离。飞船经过空间站正上方时，航天员通过舷窗，首次获取以地球为背景的空间站组合体全貌图像。
</p>
</body>
</html>
三、水平对齐 text-align
语法：
text-align-取值；
属性值：
left 左对齐（默认值)
center 居中对齐
right 右对齐
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>12CSS</title>
<style type="text/css">
#p1{text-align: left;}
#p2{text-align: center;}
#p3{text-align: right;}
</style>
</head>
<body>
<div id=p1>你是我的小呀小苹果</div>
<div id=p2>你是我的小呀小苹果</div>
<div id=p3>你是我的小呀小苹果</div>
</body>
</html>
四、文本修饰：text-decoration
语法：
text-decoration: 取值;
属性值：
none 去除所有的划线效果（默认值）
underline 下划线
line-through 中划线
overline 顶划线
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>12CSS</title>
<style type="text/css">
#p1{text-decoration: none;}
#p2{text-decoration: underline;}
#p3{text-decoration: line-through;}
#p4{text-decoration: overline;}
</style>
</head>
<body>
<div id=p1>去掉所有划线效果</div>
<div id=p2>下划线</div>
<div id=p3>中划线</div>
<div id=p4>顶划线</div>
</body>
</html>
五、大小写： text-tranform(这个属性是针对英文的)
语法：
text-transform: 取值;
属性值：
1、none 无转换（默认值）
2、uppercase 转换为大写
3、lowercase 转换为小写
4、capitalize 只将每个英文单词首字母转换为大写
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>12CSS</title>
<style type="text/css">
#p1{text-transform: none;}
#p2{text-transform: uppercase;}
#p3{text-transform: lowercase;}
#p4{text-transform: capitalize;}
</style>
</head>
<body>
<div id=p1>whatever is worth doing is worth doing well</div>
<div id=p2>whatever is worth doing is worth doing well</div>
<div id=p3>whatever is worth doing is worth doing well</div>
<div id=p4>whatever is worth doing is worth doing well</div>
</body>
</html>
六、行高 line-height
语法：
line-height: 像素值;
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>12CSS</title>
<style type="text/css">
#p1{line-height: 10px;}
#p2{line-height: 20px;}
#p3{line-height: 30px;}
#p4{line-height: 40px;}
</style>
</head>
<body>
<div id=p1>大势所趋</div>
<div id=p2>大势所趋</div>
<div id=p3>大势所趋</div>
<div id=p4>大势所趋</div>
</body>
</html>
七、字间距：letter-spacing （可以是中文，也可以是英文）
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>12CSS</title>
<style type="text/css">
#p1{letter-spacing: 0px;}
#p2{letter-spacing: 5px;}
#p3{letter-spacing: 10px;}
#p4{letter-spacing: 15px;}
</style>
</head>
<body>
<div id=p1>abc efg higk lmn 你好，嘻嘻</div>
<div id=p2>abc efg higk lmn 你好，嘻嘻</div>
<div id=p3>abc efg higk lmn 你好，嘻嘻</div>
<div id=p4>abc efg higk lmn 你好，嘻嘻</div>
</body>
</html>
八、词间距word-spacing（只针对英文）
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>12CSS</title>
<style type="text/css">
#p1{word-spacing: 0px;}
#p2{word-spacing: 5px;}
#p3{word-spacing: 10px;}
#p4{word-spacing: 15px;}
</style>
</head>
<body>
<div id=p1>abc efg higk lmn 你好，嘻嘻</div>
<div id=p2>abc efg higk lmn 你好，嘻嘻</div>
<div id=p3>abc efg higk lmn 你好，嘻嘻</div>
<div id=p4>abc efg higk lmn 你好，嘻嘻</div>
</body>
</html>