【21】CSS核心样式（2）——文本常用3种属性

★文章内容学习来源：拉勾教育大前端就业集训营

文本类样式我们已经学习过颜色 color属性，严格来说行高line-height 也是文本类属性，由于其可以合写在 font属性中，暂时先归类到字体中学习，接下来还有几个常用的文本属性。
这篇继续介绍CSS核心样式：文本常用3种属性：

一、水平对齐 text-align

文本水平对齐属性text-align	说明
属性名	text-align
作用	设置文本水平方向的对齐（在盒子中，不论文本是单行还是多行，都会对应方向对齐）
属性值	三个方向的单词

属性值（三个方向的单词）	意义
left	居左对齐，大部分标签默认
center	居中对齐
right	具右对齐

示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>演示水平对齐text-align属性</title>
  <style> .le {
     width: 100px; height: 100px; background-color: pink; font-size: 14px; text-align: left; } .ce {
     width: 100px; height: 100px; background-color: yellowgreen; font-size: 14px; text-align: center; } .ri {
     width: 100px; height: 100px; background-color: skyblue; font-size: 14px; text-align: right; } </style>
</head>
<body>
  <p class="le">这是一段水平居左的文字</p>
  <p class="ce">这是一段水平居中的文字</p>
  <p class="ri">这是一段水平居中的文字</p>
</body>
</html>

二、文本修饰 text-decoration

文本修饰 text-decoration	说明
属性名	text-decoration
作用	设置文本整体是否有线条的修饰效果
属性值	相应意义的单词

属性值（相应意义的单词）	意义
none	没有修饰，大部分标签的默认值
overline	上划线
line-through	中划线，删除线，`<del>`标签的默认值
underline	下划线，`<a>`标签的默认值

示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>演示文本修饰text-decoration属性</title>
  <style> .no {
     text-decoration: none; } .ov {
     text-decoration: overline; } .th {
     text-decoration: line-through; } .un {
     text-decoration: underline; } </style>
</head>
<body>
  <div class="no">没有线条</div>
  <p></p><!--加个p标签区分开来-->
  <div class="ov">上划线</div>
  <p></p><!--加个p标签区分开来-->
  <div class="th">中划线</div>
  <p></p><!--加个p标签区分开来-->
  <del>删除线</del>
  <p></p><!--加个p标签区分开来-->
  <div class="un">下划线</div>
  <p></p><!--加个p标签区分开来-->
  <a href="#">超级链接</a>
</body>
</html>

三、缩进 text-indent

文本缩进 text-indent	说明
属性名	text-indent
作用	设置段落首行是否进行缩进
属性值	各种单位表示

属性值（各种单位表示）	说明（属性值区分正负）
px单位	表示首行缩进多少像素
★em单位	首行缩进几个中文字符的位置
百分比	表示缩进文字所在标签的父级标签的width属性值的百分比

注意：

①实际工作中，最常使用em为单位的属性值。

②属性值区分正负，正数表示向右缩进，负数表示向左缩进。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>演示文本缩进text-indent属性</title>
  <style> p.bfb {
     width: 300px; height: 100px; background-color: pink; font-size: 14px; text-align: left; text-indent: 50%;/*正值表示向右缩进*/ } p.px {
     width: 300px; height: 100px; background-color: yellow; font-size: 14px; text-align: left; text-indent: -100px; /*负值表示向左缩进*/ } p.em {
     width: 300px; height: 100px; background-color:skyblue; font-size: 14px; text-align: left; text-indent: 2em;/*正值表示向右缩进*/ } </style>
</head>
<body>
  <p class="bfb">这是一段文字用百分比数值表示缩进的文字这是一段文字用百分比数值表示缩进的文字这是一段文字用百分比数值表示缩进的文字</p>
  <p class="px">这是一段用像素值表示缩进的文字这是一段用像素值表示缩进的文字这是一段用像素值表示缩进的文字</p>
  <p class="em">这是一段用em值表示缩进的文字这是一段用em值表示缩进的文字这是一段用em值表示缩进的文字</p>
</body>
</html>