CSS文本样式（附详细代码）

最新推荐文章于 2024-05-01 12:01:29 发布

路痴先森

最新推荐文章于 2024-05-01 12:01:29 发布

阅读量517

点赞数

文章标签： css

本文链接：https://blog.csdn.net/qq_57162921/article/details/133736544

版权

CSS文本样式

1.text-transform

可以用来设置文本的大小写

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            text-transform: uppercase;
             /* 可选值：none  文本正常显示

                    lowercase   文本小写显示

                    uppercase   文本大写显示

                    capitalize  单词首字母大写
             */
        }
    </style>
</head>

<body>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut, nobis similique. Iusto architecto veritatis eum,
        asperiores quia sed mollitia provident.
    </p>
</body>

</html>

2.text-decoration

可以用来设置文本的修饰

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            text-decoration: underline;
            
            /* 可选值：none  文本正常显示

                    underline   下划线

                    overline     上划线

                    line-through  删除线
         */
        }
    </style>
</head>

<body>
    <p>见都无失登逃了承疾，诗但五命郭于，乐句。</p>
</body>

</html>

3.letter-spacing

可以指定字符间距

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span {
           letter-spacing: 10px;
        }
    </style>
</head>

<body>
    <p>见都无失登逃了承疾，<span>诗但五命郭于</span>，乐句。</p>
</body>

</html>

4.word-spacing

可以设置单词之间的间距

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span {
            word-spacing: 10px;
        }
    </style>
</head>

<body>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut, nobis similique. <span>Iusto architecto veritatis
            eum,
            asperiores quia sed mollitia provident.</span>
    </p>
</body>

</html>

5.text-align

设置文本对齐方式

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            margin-left: 100px;
            margin-top: 100px;
            background-color: pink;
        }

        p {
                text-align: center;
            
            /*  可选值:left     靠左 默认值

                    center   居中

                    right    靠右

                    justify  两端对齐    
            */
        }
    </style>
</head>

<body>
    <div>
        <p>恼为之得韩活升，居她请为汪方，火价着弄。</p>
    </div>
</body>

</html>

注意：文本对齐的前提是有一定的活动空间

6.text-indent

设置首行缩进

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        div {
            margin-left: 100px;
            margin-top: 100px;
            background-color: pink;
        }

        /* 设置字体隐藏 */
        h1 {
            text-indent: -1000px;
        }

        /* 调节文本首行缩进 */
        p {
            text-indent: 2em;
        }
    </style>
</head>

<body>
    <div>
        <h1>这是段文字</h1>
        <p>心中德若者的降的，病王韩惜召只有屯木定向司畴联人憾这者，君。</p>
    </div>
</body>

</html>

1.一般情况使用em为单位

2.可以用来隐藏文字

7.white-space

设置网页如何处理空白

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
        }

        p {
            white-space: nowrap;

            /*   可选值：normal   忽略多余的空白，只保留一个空白（默认）

                    pre      保留空白

                    nowrap   只保留一个空白，文本不会换行，会在同一行继续，直到遇到br标签为止

                    pre-wrap  保留空白符序列，正常的进行换行

                    pre-line  合并空白符序列，保留换行符

                    inherit    从父元素继承white-space属性的值 */
        }
    </style>
</head>

<body>
    <div>
        <p>心中德若者的降的，病王韩惜召只有屯木定向司畴联人憾这者，君。</p>
    </div>
</body>

</html>

8.text-overflow

文本溢出包含元素时发生的事情

和white-space配合使用

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 300px;
            background-color: pink;
        }

        p {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;

            /* 可选值：clip       修剪文本

                    elipsis    显示省略符号来代表被修剪的文本

                    String      使用给定的字符串来代表被修剪的文本 */
        }
    </style>
</head>

<body>
    <div>
        <p>心中德若者的降的，病王韩惜召只有屯木定向司畴联人憾这者，君。</p>
    </div>
</body>

</html>

9.vertical-align

设置元素垂直对齐的方式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       

        img {
            vertical-align: middle;
            /* 可选值：baseline    基线对齐

                    bottom     底部对齐

                    top        顶部对齐

                    middle     居中对齐 */
        }
    </style>
</head>

<body>

        <img src="你的图片" alt="">
        <p>心中德若者的降的，病王韩惜召只有屯木定向司畴联人憾这者，君。</p>
   
</body>

</html>

10.text-shadow：h-shadow v-shadow blur color;

设置文本阴影

参数1：阴影的水平位移距离正值向右移动，负值向左移动必写

参数2：阴影的垂直位移距离正值向下移动，负值向上移动必写

参数3：模糊半径值越大越模糊默认0

参数4：阴影的颜色默认字体本身的颜色

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       

        p {
            text-shadow: 2px 2px 4px pink;
        }
    </style>
</head>

<body>

        <p>心中德若者的降的，病王韩惜召只有屯木定向司畴联人憾这者，君。</p>
   
</body>

</html>

11.box-shadow：h-shadow v-shadow blur color;

设置盒子阴影效果

参数1：阴影的水平位移距离正值向右移动，负值向左移动必写

参数2：阴影的垂直位移距离正值向下移动，负值向上移动必写

参数3：模糊半径值越大越模糊默认0

参数4：阴影的颜色默认黑

代码示例:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: aqua;
            box-shadow: 10px 10px 10px red;
        }
    </style>
</head>

<body>
    <div>
        <p>心中德若者的降的，病王韩惜召只有屯木定向司畴联人憾这者，君。</p>
    </div>
</body>

</html>