CSS文本属性

1.文本间距

字母间距： letter - spacing
单词间距： word - spacing （通过空格识别词）
属性值为像素（ px ），正值让间距增大，负值让间距缩小。

css 复制代码

<!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
作用：控制文本的各种装饰线。
可选值：

none ：无装饰线（常用）
underline ：下划线（常用）
overline ：上划线
line - through ：删除线
可搭配如下值使用：
dotted ：虚线
wavy ：波浪线
也可以指定颜色

css 复制代码

<!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

css 复制代码

<!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 。
作用：控制文本的水平对齐方式。
常用值：

left ：左对齐（默认值）
right ：右对齐
center ：居中对齐
举例：

css 复制代码

div {
text-align: center;
}

5.行高

属性名： line - height
作用：控制一行文字的高度。
可选值：

normal ：由浏览器根据文字大小决定的一个默认值。
像素 ( px ) 。
数字：参考自身 font - size 的倍数（很常用）。
百分比：参考自身 font - size 的百分比。
备注：由于字体设计原因，文字在一行中，并不是绝对垂直居中，若一行中都是文字，不会太影响
观感。

css 复制代码

<!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>

line - height 过小会怎样？ ------ 文字产生重叠，且最小值是 0 ，不能为负数。

line - height 是可以继承的，且为了能更好的呈现文字，最好写数值。

line - height 和 height 是什么关系？
设置了 height ，那么高度就是 height 的值。
不设置 height 的时候，会根据 line - height 计算高度。

css 复制代码

<!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>

应用场景：

对于多行文字：控制行与行之间的距离。

对于单行文字：让 height 等于 line - height ，可以实现文字垂直居中。

6.文本对齐_垂直

顶部：无需任何属性，在垂直方向上，默认就是顶部对齐。
2. 居中：对于单行文字，让 height = line - height 即可。
问题：多行文字垂直居中怎么办？ ------ 后面我们用定位去做。
底部：对于单行文字，目前一个临时的方式：
让 line - height = ( height × 2 ) - font - size - x 。
备注： x 是根据字体族，动态决定的一个值。
问题：垂直方向上的底部对齐，更好的解决办法是什么？ ------ 后面我们用定位去做

1.文本间距

2.文本修饰

3.文本缩进

**4.**文本对齐水平

5.行高

6.文本对齐**_**垂直

4.文本对齐水平

6.文本对齐_垂直