文本属性
text-align: 规定元素中的文字的水平对齐方式
text-align： center； 文字居中对齐
常用的值：
- text-align：center； 文本居中对齐；
- text-align：left ； 文本左对齐（默认）；
- text-align：justify； 音标：/'dʒʌstɪfaɪ/ 文本两端对齐；
拓展： text-align：center；和 margin：0 auto；的区别？
1. text-align：center； 是让容器里的文本内容居中；
2. margin：0 auto； 是通过外边距自适应，让容器盒子本省居中
总结：一个是文本内容居中，一个是容器盒子本身居中！
text-decoration: 文本修饰
text-decoration： underline; 文字下划线
常用的值：
- text-decoration：underline ； 下划线；
- text-decoration：overline； 上划线；
- text-decoration：line-through； 删除线；
- text-decoration：none； 无任何修饰；
text-indent： 文本首行缩进
常用： text-indent：2em； 首行缩进两个字符
字间距
letter-spacing：2px；
word-spacing：2px;
- letter-spacing： 字符与字符之间的距离，对中文有效；
- word-spacing： 单词与单词之间的距离，对英文单词有效；
white-space： 文本空白处理
所谓文本空白处理就是你编写程序代码时，你换行产生的空格和本身自打的空格处理方式！
常用：white-space：normal； 默认正常，忽略多余的空格 直留一个！
- white-space：normal； 默认正常，忽略多余的空格 直留一个；
- white-space：nowrap； 强化本文在同一行显示；
- white-space：pre； 保留空白、空格；
重点：如果强制文本在同一行显示，文本溢出怎么处理？
下面三行代码合在一起可以实现文本溢出显示省略号，但是需要注意的是必须作用到属性本身，不具备继承性！
white-space: nowrap; /*强制文本同一行显示*/
overflow: hidden; /*隐藏超出文本*/
text-overflow: ellipsis; /*将超出的文本显示为省略号*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>文本溢出怎么处理？</title>
<style>
div {
width: 100px;
height: 20px;
background-color: pink;
/* 当文本溢出时？ */
white-space: nowrap; /*强制文本同一行显示*/
overflow: hidden; /*隐藏超出文本*/
text-overflow: ellipsis; /*将超出的文本显示为省略号*/
}
</style>
</head>
<body>
<div>
有一种痛叫做，我本可以，却没能坚持。雄心勃勃定下的目标，只要一星半点的理由
就可以化为泡影。实际上，恒心也是一种修为，是可以通过对自己的认识和了解去挖掘培养的。
</div>
</body>
</html>
text-shadow： 文本阴影
text-shadow： h v blur color；
例子：text-shadow：2px 5px 8px green；
h ： 水平方向的阴影大小；
v ： 垂直方向的阴影大小；
blur ： 阴影的范围大小；
color ： 阴影的颜色；
作业练习：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>文本属性练习</title>
<style>
.sentence {
width: 1200px;
margin: 0 auto; /*是通过外边距自适应让盒子容器本身水平左右居中*/
text-align: center; /*是让容器里面的文字内容水平居中(center)，，left左对齐，，right右对齐*/
background-color: aqua;
}
.motivational {
width: 600px;
color: rgb(219, 189, 14);
margin: 0 auto;
background-color:black;
text-align: justify; /*文本内容 两端对齐*/
/* text-indent: 2em; 文本首行缩进 */
text-decoration: underline; /*文本下滑线*/
text-decoration: line-through; /*文本删除线*/
text-decoration: none; /*无任何修饰，用于清除默认样式*/
letter-spacing: 5px; /*字符与字符之间的距离，对中文有效*/
word-spacing: 100px; /*单词与单词之间的距离，对英文有效*/
/* 文本溢出怎么处理？ */
text-overflow: ellipsis; /*当文本溢出时，显示省略号,只能设置本身，不具有继承性*/
white-space: nowrap; /*强制文本在同一行显示*/
overflow: hidden; /*文本超出时隐藏*/
}
.try {
white-space: pre; /*white-space： 文本空白处理 pre 保留空白、空格*/
white-space: nowrap; /* nowrap 强制文本在同一行显示 */
white-space: normal; /*默认 忽略多余空白，只留一个*/
}
.sentence h1{ /*文本阴影*/
text-shadow: 3px 2px 5px red;
/* text-shadow后面有四个值：第一个 h: 表示水平方向的阴影；
第二个 v：表示垂直方向的阴影；
第三个 blur： 阴影的范围；
color：颜色； */
}
</style>
</head>
<body>
<div class="sentence">
<h1>文本属性练习</h1>
<p>人的一生为什么要努力？有一句回答说的非常动人：因为最痛苦的事，不是失败，而是我本可以。</p>
</div>
<div class="motivational">
本身就穷，折腾对了就成了富人；折腾不对，大不了还是穷人。I can i do it!如果不折腾、一辈子都是穷人！一想，二干，三成功， 一等，二看，三落空；想是问题做是答案； 输在犹豫，赢在行动！Nothing is impossible!（一切皆有可能）
</div>
<div class="try">
有一种痛叫做，我本可以，却没能坚持。
雄心勃勃定下的目标，只要一星半点的理由就可以化为泡影。
实际上，恒心也是一种修为，是可以通过对自己的认识和了解去挖掘培养的。
</div>
</body>
</html>