CSS-常用文本属性

幸运小圣

已于 2023-05-25 15:54:43 修改

阅读量50

点赞数

文章标签： css 前端 html

于 2023-05-24 18:22:24 首次发布

本文链接：https://blog.csdn.net/qq_53002037/article/details/130850084

版权

文本颜色：

属性名：color
可选值：1.颜色名
2.rgb或rgba（开发中常用）
3.HEX或HEXA（十六进制）（开发中常用）
4.HSL或HSLA

<!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>01文本颜色</title>
    <style>
        div {
            font-size: 40px;
        }
        
        .rbk1 {
            color: red;
        }
        
        .rbk2 {
            color: rgb(255, 0, 0);
        }
        
        .rbk3 {
            color: rgb(255, 0, 0, .5);
        }
        
        .rbk4 {
            color: #00f;
        }
        
        .rbk5 {
            color: #00f8;
        }
        
        .rbk6 {
            color: hsl(0, 100%, 50%);
        }
        
        .rbk7 {
            color: hsl(0, 100%, 50%, .5);
            background-color: orange;
        }
    </style>
</head>

<body>
    <div class="rbk1">一杯热白开1.</div>
    <div class="rbk2">一杯热白开2.</div>
    <div class="rbk3">一杯热白开3.</div>
    <div class="rbk4">一杯热白开4.</div>
    <div class="rbk5">一杯热白开5.</div>
    <div class="rbk6">一杯热白开6.</div>
    <div class="rbk7">一杯热白开7.</div>
</body>

</html>

文本间距：

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

<!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>02文本间距</title>
    <style>
        div {
            font-size: 40px;
        }
        /* 字母间距 */
        .rbk2 {
            letter-spacing: 20px;
        }
        /* 单词间距 */
        .rbk3 {
            word-wrap: 20px;
        }
    </style>
</head>

<body>
    <div>You got a dream,you gotta protect it.一杯热白开1.</div>
    <div class="rbk2">You got a dream,you gotta protect it.一杯热白开2.</div>
    <div class="rbk3">You got a dream,you gotta protect it.一杯热白开3.</div>
</body>

</html>

文本修饰：

1.none：无修饰线
2.underline：下划线
3.overline：上划线
4.line-through：删除线
可搭配的使用有：
1.dotted：虚线
2.wavy：波浪线
3.可以指定颜色

<!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>03文本修饰</title>
    <style>
        div {
            font-size: 40px;
        }
        /* 加dotted的话就是虚线 加wavy就是波浪线 */
        /* overline上划线 加颜色*/
        
        .rbk1 {
            text-decoration: overline green;
        }
        /* underline下划线 */
        
        .rbk2 {
            text-decoration: underline wavy red;
            ;
        }
        /* line-through 删除线 */
        
        .rbk3 {
            text-decoration: line-through;
        }
        /* 没有各种线 */
        .rbk4 {
            text-decoration: none;
        }
        
        .rbk5,
        ins,
        del {
            font-size: 40px;
            text-decoration: none;
        }
    </style>
</head>

<body>
    <div class="rbk1">一杯热白开1.</div>
    <div class="rbk2">一杯热白开2.</div>
    <div class="rbk3">一杯热白开3.</div>
    <div class="rbk4">一杯热白开4.</div>
    <a class="rbk5" href="https://www.baidu.com">跳转百度哦</a>
    <ins>测试1</ins>
    <del>测试2</del>

</html>

文本缩进：

属性名：text-indent

<!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>04文本缩进</title>
    <style>
        div {
            font-size: 40px;
            text-indent: 80px;
        }
    </style>
</head>

<body>
    <div>只有学习让我进步！只有学习让我快乐！只有学习让我奋发图强！生命在于学习！活到老学到老！不断学习才会变得优秀！</div>
</body>

</html>

文本对齐-水平：

属性名：text-aline
left是左对齐，center是居中，right是右对齐

<!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>05文本对齐-水平</title>
    <style>
        /* left是左对齐，center是居中，right是右对齐 */
        
        div {
            font-size: 40px;
            background-color: palegreen;
            text-align: center;
        }
    </style>
</head>

<body>
    <div>只有学习让我进步！</div>
</body>

</html>

行高：

行高的写法：

属性名：line-height
第一种写法，值为像素最好别和font-size的值一样
line-height: 40px;
第二种写法，值为normal
line-height: normal;
第三种写法，值为数值，用的比较多，值为1时，则与font-size的值一致
line-height: 1.5;
第四种写法，值为百分比，值为100%时，则与font-size的值一致
line-height: 150%;

行高注意事项：

1.行高过小会怎么样？
文字重叠，且最小值是0，不能为负数
2.行高是可以继承的
3.line-height和height是什么关系?
设置了height，高度就是height的值
没有设置height，会根据line-height计算高度

行高的应用场景：

1.行高的应用场景1：调整多行文字的间距
2.行高的应用场景2：单行文字的的垂直居中（让height等于line-height）

文本对齐-垂直：

1.顶部:无需任何属性，在垂直方向上，默认就是顶部对齐。

2．居中:对于单行文字，让height = line-height即可。

问题:多行文字垂直居中怎么办？
–后面我们用定位去做.

3底部:对于单行文字，目前一个临时的方式:
让line-height = ( height × 2 ) - font-size - x
备注:×是根据字体族，动态决定的一个值。

问题:垂直方向上的底部对齐，更好的解决办法是什么?-—后面我们用定位去做。

<!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>05文本对齐-水平</title>
    <style>
        div {
            font-size: 40px;
            background-color: palegreen;
            height: 400px;
            line-height: 755px
        }
    </style>
</head>

<body>
    <div>只有学习让我进步！</div>
</body>

</html>

vertical-align：

用于指定同一行元素之间，或表格单元格内文字的垂直对齐方式。
常用值：
1.baseline（默认值）：使元素的基线与父元素的基线对齐
2.top：使元素的顶部与其所在行的顶部对齐
3.middle：使元素的中部与父元素的基线加上父元素字母x的一半对齐（找父元素x的中心点）
4.botton：使元素的底部与所在行的底部对齐
注意： vertical-align不能控制块元素

<!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>08vertical-align</title>
    <style>
        div {
            font-size: 50px;
            height: 200px;
            background-color: skyblue;
        }
        /* 
           vertical-align:用于所在那一行的文字垂直方向上的对齐方式
           top是顶部，baseline是基线对齐(不写也是默认基线对齐) 
           middle使元素的中部与父元素的基线 加上父元素x-height的一半对齐(找父元素x的中心点)
         */
        
        span {
            font-size: 30px;
            background-color: orange;
            vertical-align: top;
        }
        
        img {
            height: 150px;
            vertical-align: middle;
        }
        
        .san {
            vertical-align: top;
        }
    </style>
</head>

<body>
    <div>
        今天早上没吃饭x<span>x我好饿</span>
    </div>
    <hr>
    <div>
        好饿想吃点什么x<img src="./1.png">
    </div>
    <hr>
    <table border="1" cellspacing="0">
        <caption>人员信息</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr height="100">
                <!-- <td valign="top">张三</td> -->
                <td class="san">张三</td>
                <td>男</td>
                <td>19</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>女</td>
                <td>18</td>
            </tr>
        </tbody>
    </table>
</body>

</html>