一个页面中，文本样式，是必不可少的，当然css也给我们准备了很多很多很多的文本样式，以下列举了10个常用的文本样式属性及常用的属性值，掌握了，也基本满足使用了
1: text-transform 可以用来设置文本的大小写
可选值：
none 默认值，该怎么显示就怎么显示，不做任何处理
capitalize [ˈkæpɪtəlaɪz] 单词的首字母大写，通过空格来识别单词
uppercase [ˈʌpəˌkeɪs] 所有的字母都大写
lowercase ['ləuə,keis] 所有的字母都小写
2: text-decoration [dɛkə'reɪʃ(ə)n] 可以用来设置文本的修饰
可选值：
none：默认值，不添加任何修饰，正常显示
underline 为文本添加下划线
overline 为文本添加上划线
line-through 为文本添加删除线
超链接会默认添加下划线，也就是超链接的text-decoration的默认值是underline
如果需要去除超链接的下划线则需要将该样式设置为none
3: letter-spacing可以指定字符间距
4: word-spacing可以设置单词之间的距离
实际上就是设置词与词之间空格的大小
5: text-align用于设置文本的对齐方式
可选值：
left 默认值，文本靠左对齐
right ， 文本靠右对齐
center ， 文本居中对齐
justify ， 两端对齐
- 通过调整文本之间的空格的大小，来达到一个两端对齐的目的，也可以让图片水平居中
6: text-indent 设置首行缩进
-指定一个正值时，会自动向右侧缩进指定的像素
-指定一个负值，则会向左移动指定的像素,
通过这种方式可以将一些不想显示的文字隐藏起来
这个值一般都会使用em作为单位
7: white-space: ; 设置网页如何处理空白
可选值：
normal 正常
nowrap 不换行
per 保留空白
8: text-overflow 文本溢出包含元素时发生的事情。
可选值：
clip 修剪文本。
ellipsis [i'lipsis] 显示省略符号来代表被修剪的文本。
下面代码有演示省略号的固定写法
9: text-shadow: h-shadow v-shadow blur color;
参数1:必需。水平阴影的位置。允许负值。
参数2: 必需。垂直阴影的位置。允许负值。
参数3: 可选。模糊的距离。
参数4:可选。阴影的颜色 一般用rgba
10:vertical-align 设置元素垂直对齐的方式
可选值：
baseline 默认值 基线对齐
top 顶部对齐
bottom 底部对齐
middle 居中对齐
应用：
1:图文垂直对齐方式
2:图片三像素的问题
父元素如果不设置高，由图片撑开，此时图片的底部就会有三像素的空白
解决方式一：vertical-align属性值不为默认值
解决方式二：给图片转成块元素
解决方式三：给父元素设置font-size为0
注意 vertical-align 只对行内元素、行内块元素和表格单元格元素生效：不能用它垂直对齐块级元素。
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
.p1 {
text-transform: uppercase;
}
.p2 {
text-decoration: none;
}
a {
text-decoration: none;
}
.p3 {
/*
3: letter-spacing可以指定字符间距 */
/* letter-spacing: 30px; */
word-spacing: 120px;
}
.p4 {
text-align:center;
/* text-transform: uppercase; */
}
.p5 {
font-size: 20px;
text-indent: 2em;
}
/* 省略号的固定写法*/
.box2 {
width: 300px;
white-space: nowrap;
/* 裁剪多余 */
overflow: hidden;
/* 多余部分设置省略号 */
text-overflow: ellipsis;
}
span {
font-size: 30px;
}
.img1 {
width: 400px;
vertical-align:bottom;
}
.img2{
vertical-align: middle;
}
.box{
border: 1px solid red;
width: 300px;
/* font-size: 0; */
}
.box>img{
/* vertical-align:baseline; */
display: block;
}
h1 {
text-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
</style>
</head>
<body>
<img src="./img1.jpeg" alt="" class="img1" />
<span>下雨回家收衣服了，hxjjsd</span>
<hr />
<div class="box">
<img src="./img1.jpeg" alt="" style="width: 300px;"/>
<img src="./img1.jpeg" alt="" style="width: 300px;"/>
</div>
<p class="p5">
六也掉年反法耐的以耐要韩沫，人两也的心为次弟为心上司洪善有想，币无将持说在屯了如一老洪已人，不俭是失家是单，一衣在马挟会负，陈骨派逃向高关动要太导韩气我入，回今台国降变呼蒲使他生，奔未韩法的春其如不少因，骨是气评不杀话拆氏郭他司到，当劫会惊藏，联沫褒娟才。
</p>
<h1 class="p4">我是一个h1</h1>
<p class="p4">
好又反之韩勇未你生介九杂，希禀揽韩有到找，韩样人唯因这落尘匹说人绪平仍德仆，揽那俭生搏杨身才人让视生五留心哉在报人，他皇吴我之德害使方来同仆秦落持家词，圣力乐化是助沫此中来一实流太以太，哉于马孔为那使他妄也耐帮通书，是兄之永谢派的，胜光君第，答她老，李持。
</p>
<p class="p4">
e had been four years on the Wall. The first time he had been sent beyond, all the old stories had come rushing back, and his bowels had turned to water. He had laughed about it afterward. He
was a veteran of a hundred rangings by now, and the endless dark wilderness that the southron called the haunted forest had no more terrors for him.
</p>
<p class="p3">
普德弟上而，而宋子孔足来魂要笔游我入帅或感清商绛李，了一拢自慧考人的秦血考派用是承，满由釜找夭乐风惜等了之不王，畴艳者司皇尝台入国是重说人，妙场关了活百绝是，才是之无斯笔土的杨千娟姑在亡高不不，了为人道在皮以到降为是公下一魂反不，化则月，谭德兴褒皇有彷慨。
</p>
<p class="p3">ings by now, and the endless dark wilderness that the southron called the haunted forest had no more terrors for him.</p>
<a href="#">我是超链接</a>
<p class="p2">gings by now, and the endless dark wilderness that the southron called the haunted forest had no more terrors for him.</p>
<p class="p1">ve we?" "Will saw them," Gared said. "If he says they are dead, that's proof enough for me.</p>
<div class="box2">
法今厅法，中五的制以，杨道作说才气欲知为死支是保，斯过何，尝位他畴清反流当定予人夫秦么至程了，天韩说名可太若欲，没己别哥天病九着罪得是对圣况诗善洪策开，主责是天守活罪他水，九和沉，一不其皇样卅给气脱乡，价了是家下在得说特航大得搏，可给锐得，挟一词不百怎之。
</div>
</body>
</html>