4.文本样式-CSS基础
在前端开发中，对于外观控制一般用CSS来实现的，而不是用标签来实现，这更加符合结构和样式分离的原则，提高可读性和可维护性。
一、文本样式
字体样式：注重个体，针对的是文字本身效果。 文本样式：注重整体，针对的是整个段落的排版效果。 在
CSS中，使用font和text两个前缀来区分这两类样式。
1.常用的文本样式属性
属性 | 说明 |
|---|---|
text-indent | 首行缩进 |
text-align | 水平对齐 |
text-decoration | 文本修饰 |
text-transform | 大小写 |
line-height | 行高 |
letter-spacing、word-spacing | 字母间距、词间距 |
二、text-indent（首行缩进）
p元素首行不会缩进，因此在HTML中需要使用4个 来实现首行缩进2个字符的空格，但这样使得代码冗余。
1.语法格式
<style type="text/css">
选择器{
text-indent:像素值;
}
</style>（1）说明
上面语法中属性值选用的是像素值，其实还可以使用其它
CSS单位，如：%、em、rem。详见01-CSS基础-CSS进阶.md
（2）小技巧
中文段落首行需缩进2个字符，要实现这个效果
text-indent值应是font-size值的2倍。
三、text-align（水平对齐）
在
CSS中，可以使用text-align属性来控制文本在水平方向上的对齐方式。
1.语法格式
<style type="text/css">
选择器{
text-align:取值;
}
</style>（1）属性值
属性值 | 说明 |
|---|---|
left | 左对齐（默认值） |
center | 居中对齐 |
right | 右对齐 |
① 实际开发
在实际开发中，只会用到
center这一个，其它的几乎用不上。
（2）对图片有效
text-align属性不仅对文本有效，对图片（img）同样有效。
四、text-decoration（文本修饰）
在
CSS中，可以使用text-decoration属性来定义文本的修饰效果（下划线、中划线、顶划线）。
1.语法格式
<style type="text/css">
选择器{
text-decoration:取值;
}
</style>（1）属性值
属性值 | 说明 |
|---|---|
none | 去除所有的划线效果（默认值） |
underline | 下划线 |
line-through | 中划线 |
overline | 顶划线 |
① 实际开发
在
HTML中，我们可以使用s元素实现中划线，使用u元素实现下划线。但在实际开发中，我们是通过CSS中的text-align属性来实现的。 这是因为，在前端开发中，对于外观控制一般用CSS来实现的，而不是用标签来实现，这更加符合结构和样式分离的原则，提高可读性和可维护性。
2.超链接的下划线
在之前
HTML学习中，我们知道超链接a元素默认样式有下划线。
（1）实际开发
在实际开发中，超链接的默认下划线是要去掉的。 使用
text-decoration:none;去除a元素的下划线，在开发中会被大量使用。
① text-decoration:none;（去掉下划线）
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>文本样式</title>
<style type="text/css">
a{
text-decoration: none; /*文本修饰：去掉所有的划线效果*/
}
</style>
</head>
<body>
<a href="https://www.jianshu.com/">简书</a>
</body>
</html>
文本修饰-去掉下划线.png
3.三种划线的用途
（1）下划线
用于强调文章中的重点。
（2）上划线
常出现在电商网站中，用于促销。
（3）顶划线
不常用，了解即可。
五、text-transform（大小写）
在
CSS中，可以使用text-transform属性来将文本进行大小写转换。text-transform属性是针对英文而言，因为中文不存在大小写之分。
1.语法格式
<style type="text/css">
选择器{
text-transform:取值;
}
</style>（1）属性值
属性值 | 说明 |
|---|---|
none | 无转换（默认值） |
uppercase | 转换为大写 |
lowercase | 转换为小写 |
capitalize | 只将每个英文单词首字母转换为大写 |
六、line-height（行高）
在
CSS中，可以使用line-height属性来控制每行文本的高度。
注意：
行高和行间距是两个不同的东西，千万不要弄混淆了，行高指一行的高度；行间距指两行文本之间的距离。
1.语法格式
<style type="text/css">
选择器{
line-height:像素值;
}
</style>（1）示例
① 例1
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>文本样式</title>
<style type="text/css">
#p1{
line-height: 12px; /*行高*/
}
#p2{
line-height: 18px; /*行高*/
}
#p3{
line-height: 47px; /*行高*/
}
</style>
</head>
<body>
<h3>蝶恋花·庭院深深深几许</h3>
<h4>宋·欧阳修</h4>
<p id="p1">庭院深深深几许，杨柳堆烟，帘幕无重数。玉勒雕鞍游冶处，楼高不见章台路。
雨横风狂三月暮，门掩黄昏，无计留春住。泪眼问花花不语，乱红飞过秋千去。
</p>
<p id="p2">庭院深深深几许，杨柳堆烟，帘幕无重数。玉勒雕鞍游冶处，楼高不见章台路。
雨横风狂三月暮，门掩黄昏，无计留春住。泪眼问花花不语，乱红飞过秋千去。
</p>
<p id="p3">庭院深深深几许，杨柳堆烟，帘幕无重数。玉勒雕鞍游冶处，楼高不见章台路。
雨横风狂三月暮，门掩黄昏，无计留春住。泪眼问花花不语，乱红飞过秋千去。
</p>
</body>
</html>
行高示例1.png
七、letter-spacing、word-spacing（间距）
1.字间距
在
CSS中，可以使用letter-spacing属性来调整两个字之间的距离。
1.语法格式
<style type="text/css">
选择器{
letter-spacing:像素值;
}
</style>（1）说明
letter-spacing就是字母间距，或者说每一个汉字之间的距离。
（2）示例
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>文本样式</title>
<style type="text/css">
#p1{
letter-spacing: 0px; /*字间距*/
}
#p2{
letter-spacing: 6px; /*字间距*/
}
#p3{
letter-spacing: 9px; /*字间距*/
}
</style>
</head>
<body>
<p id="p1">
我对你有何止是执迷不悟，眼泪偶尔会莫名的光顾，所以会忙忙碌碌将爱麻木，可突然会想起了全部。
</p>
<p id="p2">
我对你有何止是执迷不悟，眼泪偶尔会莫名的光顾，所以会忙忙碌碌将爱麻木，可突然会想起了全部。
</p>
<p id="p3">
我对你有何止是执迷不悟，眼泪偶尔会莫名的光顾，所以会忙忙碌碌将爱麻木，可突然会想起了全部。
</p>
</body>
</html>
字间距示例1.png
2.词间距
在
CSS中，可以使用word-spacing属性来定义两个单词之间的距离。
1.语法格式
<style type="text/css">
选择器{
word-spacing:像素值;
}
</style>（1）说明
word-spacing就是英文单词之间的距离，所以只针对英文单词而言。
（2）示例
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>文本样式</title>
<style type="text/css">
#p1{
word-spacing: 0px; /*词间距*/
}
#p2{
word-spacing: 6px; /*词间距*/
}
#p3{
word-spacing: 9px; /*词间距*/
}
</style>
</head>
<body>
<p id="p1">
If you want to wear a crown, you must bear its weight; if you want to hold a rose, you must bear its wound.
欲戴王冠,必承其重;欲握玫瑰,必承其伤。
</p>
<p id="p2">
If you want to wear a crown, you must bear its weight; if you want to hold a rose, you must bear its wound.
欲戴王冠,必承其重;欲握玫瑰,必承其伤。
</p>
<p id="p3">
If you want to wear a crown, you must bear its weight; if you want to hold a rose, you must bear its wound.
欲戴王冠,必承其重;欲握玫瑰,必承其伤。
</p>
</body>
</html>
词间距示例1.png
3.实际开发
在实际开发中，很少去定义中文网页中的字间距以及词间距。 letter-spacing、word-spacing只会用于英文网页，在平常几乎用不上，了解即可。
腾讯云开发者
