文本相关样式也是可以继承的，在父元素中设置后子元素中同样生效。
一、对齐方式
注：要给它们的父元素设置
使用text-align属性，设置文字、内联块和内联元素 居中对齐：
text-align: center; 居中对齐
text-align: left; 居左对齐
text-align: right; 居右对齐
我们简单设置一下，我在一个div内放入了文字、连接和图片（中间有br换行），div是它们的父元素，我设置上居中对齐属性：
html：
<div>
我是文字<br>
<a href="#">我是链接</a><br>
<img src="opao.png" alt="">
</div>
css：
div{
text-align: center;
width:400px;
height:400px;
background-color: pink;
}
效果如下，实现了居中对齐：
图1 居中对齐
二、文本装饰（下划线等）
（1）使用text decoration进行文本装饰，可以给各种文本加上下划线，也可以消除<a>自带的下划线：
text-decoration: underline; 下划线
text-decoration: overline; 上划线
text-decoration: line-through; 中划线
text-decoration: none; 没有线
我们用三行文字和一行连接来体现效果：
html：
<span class="s1">我有上划线</span><br>
<span class="s2">我有中划线</span><br>
<span class="s3">我有下划线</span><br>
<a href="#">我是没有下划线的链接</a><br>
css：
.s1{
text-decoration:overline;
}
.s2{
text-decoration: line-through;
}
.s3{
text-decoration: underline;
}
a{
text-decoration:none;
}
效果如下：
图2-1 文本装饰
（2）给文本装饰改变样式
注意顺序是“上划线（中划线，下划线） 线的样式 线的颜色 ”中间空格分离
text-decoration: underline wavy red;
下划线 波浪形 红色
线的样式：
- 实线 solid
- 点状 dotted
- 虚线 dashed
- 双线double
- 波浪线 wavy
举几个例子试试看：
html:
<div>
<span class="s1">下划线波浪形红色</span><br>
<span class="s2">中划线双线绿色</span><br>
<span class="s3">上划线点状蓝色</span><br>
</div>
css:
.s1{
text-decoration:overline wavy red;
}
.s2{
text-decoration: line-through double green;
}
.s3{
text-decoration: underline dotted blue;
}
图2-2 文本装饰——各种划线
（3）给父元素设置上划线，再给子元素设置下划线，子元素不会把父元素里的上划线覆盖掉，而是又加了一个下划线，会出现两条线。
我们在（2）的css基础上，再给它们的父元素div添加一个文本装饰属性：
div{
text-decoration:overline;
}
效果如下：文本装饰是不会覆盖掉的，会累加
图2-3 文本装饰叠加
三、首行缩进
使用text-indent进行设置，实现自然段的功能
em的大小是根据字号font-size决定的，2em就是缩进2个字大小的意思（这个值可以是负的哦）：
text-indent:2em; 缩进2个字
我们用两段文字来感受一下（为了方便看到缩进效果，我设置了下段落宽度为300px）
html:
<p>
在我年纪尚轻，涉世未深时，父亲教导过我一句话，至今言犹在耳。
</p>
<p>
“当你想开口批评别人的时候，”父亲对我说 ，“你要想到，这个世界上不是所有人都像你一样拥有那么多优越的条件。”
</p>
css:
p{
width:300px;
text-indent: 2em;
}
效果如下，实现了首行缩进：
图3 首行缩进
四、字间距
使用letter-spacing设置字母与字母之间的距离，文字与文字之间的距离
letter-spacing: 30px; 设置字间距为30px
接下来我们给一句中文和英文分别试一下，设置字间距为10px：
html:
<p>勇敢做自己。</p>
<p>Dare to be yourself.</p>
css:
p{
letter-spacing: 10px;
}
效果：
图4 字间距
五、词间距
使用word-spacing设置单词与单词之间的距离
word-spacing: 30px; 设置词间距为30px
我们把刚刚字间距模块的<p>样式改为调整词间距的：
html:
<p>勇敢做自己。</p>
<p>Dare to be yourself.</p>
css:
p{
word-spacing: 10px;
}
效果如下，只对英文单词有用哦：
图5 词间距
