写在之前
- 文本样式和字体样式的区别：
- 字体样式定义了文字的样式，如：字体、字大小等
- 文本样式定义了段落的样式，如：首行缩进、字间距等
- 文本样式和字体样式的区别可以类比word。
CSS控制文本样式的7种属性
| 属性 |
作用 |
| text-indent |
用于控制首行缩进 |
| text-align |
用于控制水平方向上的对齐方式 |
| text-decoration |
用于定义下划线、中划线、上划线 |
| text-transform |
用于转换英文的大小写 |
| letter-spacing |
用于控制英文字母或中文汉字之间的距离 |
| word-spacing |
用于控制英文单词之间的距离 |
text-indent属性
- text-indent属性用于定义文本段落，如<p>标签的首行缩进，由于<p>标签不会首行缩进，所以我们一般需要使用 来定义首行缩进或使用text-indent属性使得<p>标签首行缩进。
- text-indent属性的属性值是像素，通过指定像素值来定义缩进。
- 为了控制缩进两个字大小，应该设置text-indent属性的属性值是font-size属性的属性值的两倍。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<style type="text/css">
#id_1{
text-indent:10px;}
.class1{
text-indent: 20px}
</style>
</head>
<body>
<p id="id_1">缩进10px</p>
<p class="class1">缩进20px</p>
<p>不缩进</p>
</body>
</html>
text-align属性
- text-align属性用于定义段落文本，如<p>标签在水平方向上的对齐方式，如：左对齐、居中对齐、右对齐等。
- text-aligh属性不仅可以定义<p>标签的对齐方式，也可以定义<img>标签的对齐方式。
- text-align属性一般用于定义居中对齐，很少用其他两种属性值。
| 属性值 |
作用 |
| left |
定义文本段落左对齐，是默认值 |
| center |
定义文本段落居中对齐 |
| right |
定义文本段落右对齐 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"
本文介绍了CSS中控制文本样式的7种属性：text-indent用于首行缩进，text-align控制文本对齐，text-decoration定义文本修饰，text-transform进行大小写转换，line-height调整行高，letter-spacing控制字间距，以及word-spacing设置单词间距。详细讲解了各属性的使用方法和应用场景。
最低0.47元/天 解锁文章
扫一扫
2897
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
