1.文本间距
字母间距： letter - spacing
单词间距： word - spacing （通过空格识别词）
属性值为像素（ px ），正值让间距增大，负值让间距缩小。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本间距</title>
<style>
div{
font-size: 20px;
}
.w1{
/* 字母间距 */
letter-spacing: 20px;
}
.w2{
/* 单词间距 */
word-spacing: 20px;
}
</style>
</head>
<body>
<div>You got a dream, you gotta protect it</div>
<div class="w1">You got a dream, you gotta protect it</div>
<div class="w2">You got a dream, you gotta protect it</div>
</body>
</html>
2.文本修饰
属性名： text - decoration
作用：控制文本的各种装饰线。
可选值：
1. none ： 无装饰线（常用）
2. underline ：下划线（常用）
3. overline ： 上划线
4. line - through ： 删除线
可搭配如下值使用：
1. dotted ：虚线
2. wavy ：波浪线
3. 也可以指定颜色
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本修饰</title>
<style>
.w1{
/* 上划线 overline*/
/* dotted 虚线 */
text-decoration: overline dotted ;
font: bold italic 20px "华文琥珀";
color: red;
}
.w2{
/* underline下划线 wavy波浪线 */
text-decoration: underline wavy;
font: lighter normal 20px ;
color: blue;
}
.w3{
/* line-through删除线 wavy波浪线 */
text-decoration: line-through wavy;
font: lighter italic 30px ;
color: green;
}
a{
/* none 无线 */
text-decoration: none;
}
</style>
<style>
</style>
</head>
<body>
<div class="w1">武昌理工学院1</div>
<div class="w2">武昌理工学院2</div>
<div class="w3">武昌理工学院3</div>
<a href="https://www.baidu.com">去百度</a>
</body>
</html>
3.文本缩进
属性名： text - indent 。
作用：控制文本首字母的缩进。
属性值： css 中的长度单位，例如： px
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本缩进</title>
<style>
.text{
font:lighter italic 20px "华文琥珀";
/* 文本左对齐 */
text-align: left;
/* 首行缩进2字符 */
text-indent: 2em;
color: greenyellow;
}
</style>
</head>
<body>
<div class="text">
文字是一种语言的书面表达。约公元前 3500 年，美索不达米亚的苏美尔人发明了最早的文字--楔形文字，埃及早期王朝时期（约公元前 3150-2613 年）之前的某个时期发明了象形文字，印度吠陀时期（约公元前 1500 年至约公元前 500 年）发明了梵文。文字后来被其他文化所采用，促进了文明的发展。
</div>
</body>
</html>
4. 文本对齐水平
属性名： text - align 。
作用：控制文本的水平对齐方式。
常用值：
1. left ：左对齐（默认值）
2. right ：右对齐
3. center ：居中对齐
举例：
div {
text-align: center;
}5.行高
属性名： line - height
作用：控制一行文字的高度。
可选值：
1. normal ：由浏览器根据文字大小决定的一个默认值。
2. 像素 ( px ) 。
3. 数字：参考自身 font - size 的倍数（很常用）。
4. 百分比：参考自身 font - size 的百分比。
备注：由于字体设计原因，文字在一行中，并不是绝对垂直居中，若一行中都是文字，不会太影响
观感。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>行高</title>
<style>
/* 第1种写法，值为数值 —— 用的比较多 */
#it1 {
line-height: 1.5;
}
/* 第2种写法，值为normal */
#it2 {
line-height: normal;
}
#it3{
/* 第3种写法，值为像素 */
line-height: 100px;
}
#it4{
/* 第4种写法，值为百分百 */
line-height: 100%;
}
</style>
</head>
<body>
<div>
<p id="it1">
清晨的阳光透过窗帘的缝隙，洒在书桌上，形成一片片斑驳的光影。空气中弥漫着淡淡的咖啡香，伴随着窗外鸟儿的啁啾声，仿佛整个世界都在慢慢苏醒。新的一天开始了，带着未知的可能性和期待，让人不禁心生一丝雀跃。无论昨天经历了什么，此刻的宁静与温暖总能让人重新找到前行的力量。
</p>
<p id="it2">
城市的夜晚总是灯火通明，街道上行人匆匆，车流不息。霓虹灯闪烁着五彩斑斓的光芒，映照在玻璃幕墙上，仿佛整个城市都在跳动。站在高楼的窗前，俯瞰这片繁华，心中却有一种莫名的孤独感。或许，正是这种喧嚣与寂静的对比，才让人更加珍惜那些真正属于自己的时刻。
</p>
<p id="it3">
书页翻动的声音在安静的房间里显得格外清晰，指尖触碰到纸张的质感，仿佛能感受到文字背后的温度。每一本书都是一个世界，承载着作者的思想与情感，也映照着读者的内心。阅读的时光总是过得飞快，不知不觉中，窗外的天色已暗，但心中的世界却因为那些文字而变得更加宽广。
</p>
<p id="it4">有时候，生活就像一场旅行，充满了未知的风景和意外的转折。我们总是在追逐着什么，或许是梦想，或许是某种内心的平静。然而，真正让人感动的，往往是那些不经意的瞬间——一个微笑，一句问候，或者一次偶然的相遇。正是这些微小的瞬间，编织成了我们生命中最珍贵的记忆。
</p>
</div>
</body>
</html>
1. line - height 过小会怎样？ —— 文字产生重叠，且最小值是 0 ，不能为负数。2. line - height 是可以继承的，且为了能更好的呈现文字，最好写数值。3. line - height 和 height 是什么关系？设置了 height ，那么高度就是 height 的值。不设置 height 的时候，会根据 line - height 计算高度。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>行高</title>
<style>
/* 行高的应用场景1：调整多行文字的间距 */
/* 第1种写法，值为数值 —— 用的比较多 */
#it1 {
line-height: 1.5;
}
/* 行高的应用场景2：
line-height=height单行文字的垂直居中
*/
#it2 {
line-height: 100px;
height: 100px;
}
</style>
</head>
<body>
<div>
<p id="it1">
清晨的阳光透过窗帘的缝隙，洒在书桌上，形成一片片斑驳的光影。空气中弥漫着淡淡的咖啡香，伴随着窗外鸟儿的啁啾声，仿佛整个世界都在慢慢苏醒。新的一天开始了，带着未知的可能性和期待，让人不禁心生一丝雀跃。无论昨天经历了什么，此刻的宁静与温暖总能让人重新找到前行的力量。
</p>
<p id="it2">风吹过树梢，带走了夏日的燥热，却带不走心底的思念。
</p>
</div>
</body>
</html>
应用场景：1. 对于多行文字：控制行与行之间的距离。2. 对于单行文字：让 height 等于 line - height ，可以实现文字垂直居中。
6.文本对齐_垂直
顶部： 无需任何属性，在垂直方向上，默认就是顶部对齐。2. 居中： 对于单行文字，让 height = line - height 即可。问题：多行文字 垂直居中 怎么办？ —— 后面我们用定位去做。底部： 对于单行文字，目前一个临时的方式：让 line - height = ( height × 2 ) - font - size - x 。备注： x 是根据字体族，动态决定的一个值。问题：垂直方向上的底部对齐，更好的解决办法是什么？ —— 后面我们用定位去做