CSS文本-CSDN博客

本文链接：https://blog.csdn.net/qq_50149096/article/details/134152920

文本颜色
- 属性名：color
- 可选值：
  - 颜色名
  - RGB或RGBA
  - HEX或HEXA（十六进制）
  - HSL或HSLA
    
    开发中常用的是：RGB/RGBA 或 HEX/HEXA（十六进制）
- 举例：
```
div {
  color: rgb(255,0,0);
}
```
文本间距
- 字母间距：letter-spacing
- 单词间距：word-spacing（通过空格识别词）

属性值为像素（px）正值让间距增大，负值让间距缩小

文本修饰
- 属性名：text-decoration
- 可选值：
  - none：无修饰线（常用）
  - underline：下划线（常用）
  - overline：上划线
  - line-through：删除线
- 可搭配如下值使用
  - dotted：虚线
  - wavy：波浪线
  - 指定颜色
- 举例：
```
a {
    text-decoration: none;   
}
```
文本缩进
- 属性名：text-indent
- 属性值：css中的长度单位，例如：px
- 举例：
```
div {
    text-indent: 40px;
}
```
文本对齐_水平
- 属性名：text-align
- 常用值：
  - left：左对齐（默认值）
  - right：右对齐
  - center：居中对齐
- 举例：
```
div {
    text-align: center;
}
```

文本行高

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

div {
    line-height: 60px;
    line-height: 1.5;
    line-height: 150%;
}

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本行高</title>
    <style>
        div {
            font-size: 40px;
            background-color: aqua;
        }

        .ruobing1 {
            line-height: normal;
        }
        .ruobing2 {
            line-height: 60px;
        }
        .ruobing3 {
            line-height: 1.5;
        }
        .ruobing4 {
            line-height: 150%;
        }
    </style>
</head>
<body>
    <div class="ruobing1"> 
        若冰说：RuoBing xLorem ipsum dolor sit amet, consectetur adipisicing elit. Quia fugit ducimus pariatur. Odit eaque itaque error aspernatur minus quas, minima modi libero! Accusantium suscipit debitis iusto qui eveniet ipsum vel, autem optio fuga expedita impedit praesentium voluptatem cumque in harum et ex ullam. Ad repudiandae magni minima eaque veniam tempora.
    </div>
    <br>
    <div class="ruobing2">
        若冰说：RuoBing xLorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam atque id reprehenderit, veritatis quod odit nulla consequuntur necessitatibus libero hic repellat veniam optio nostrum odio qui! Impedit, in natus! Fugit autem unde reprehenderit nisi sint ut earum esse accusamus dolores.
    </div>
    <br>
    <div class="ruobing3">
        若冰说：RuoBing xLorem, ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit iste a soluta atque, labore accusantium, animi quae magni accusamus quis commodi quam! Aspernatur, officiis facilis. Ipsam ducimus possimus enim non!
    </div>
    <br>
    <div class="ruobing4">
        若冰说：RuoBing xLorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, iure! Itaque ex dolore impedit quasi debitis temporibus quibusdam repudiandae voluptas.
    </div>
</body>
</html>

行高注意事项：

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

line-height是可以继承的，且为了能更好的呈现文字，做好写数值。
line-height和height是什么关系？
设置了height，那么高度就是height的值
不设置height的时候，会根据line-height计算高度

应用场景：
- 对于多行文字：控制行与行之间的距离
- 对于单行文字：让height等于line-height，可以实现文字垂直居中

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行高注意事项</title>
    <style>
        body {
            font-size: 40px;
        }
        /* line-height数值过小：文字重叠，高度为0，背景颜色看不到 */
        .ruobing1 {
            line-height: 0px;
            background-color: cadetblue;
        }
        /* line-height 继承性 */
        div {
            line-height: 1.5;
        }
        .ruobing2 span {
            font-size: 60px;
        }
        /* 同时设置height和line-height时，高度就是height的值 */
        .ruobing3 {
            background-color: slategray;
            height: 100px;
            line-height: 200px;
        }
    </style>
</head>
<body>
    <div class="ruobing1">若冰说1 ：Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed pariatur mollitia natus unde cupiditate, alias porro ipsam aut fuga nisi delectus ex debitis atque voluptates ipsa quam impedit error est!</div>
    <br><hr>
    <div class="ruobing2"><span>若冰说2 ：x</span>xLorem ipsum dolor sit amet.</div>
    <br><hr>
    <div class="ruobing3">若冰说3 ：Lorem ipsum dolor sit amet.</div>
    </body>
</html>

文本对齐_垂直

顶部：无需任何属性（默认）
居中：对于单行文字，height = line-height
底部：对于单行文字，临时方式
- line-height = （height * 2 - font-size - x）
- 备注：x根据字体族，动态决定的一个值

问题：垂直方向上的底部对齐，更好的解决方法是什么？ —— 使用定位
示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本对齐_垂直</title>
    <style>
        /* 顶部（默认） */
        div {
            font-size: 40px;
            color: white;
            background-color: darkcyan;
            height: 400px;
        }
        /* 剧中 */
        .C-ruobing {
            line-height: 400px;
        }
        /* 底部 */
        #ruobing {
            line-height: 750px;
        }
    </style>
</head>
<body>
    <div id = "ruobing" class="C-ruobing">若冰说</div>
</body>
</html>

vertical-align
- 属性名：vertical-align
- 作用：用于指定同一行元素之间，或表格单元格内文字的垂直对齐方式
- 常用值：
  - baseline（默认值）：使元素的基线与父元素的基线对齐
  - top：使元素的顶部与其所在行的顶部对齐
  - middle：使元素的中部与父元素的基线加上父元素字母x的一半对齐
  - bottom：使元素的底部与其所在行的底部对齐
特别注意：vertical-align不能控制块元素