CSS3 文本属性

最新推荐文章于 2024-09-02 11:19:23 发布

苦涩2020

最新推荐文章于 2024-09-02 11:19:23 发布

阅读量333

点赞数

分类专栏： CSS3 前端文章标签： css3

本文链接：https://blog.youkuaiyun.com/UserPython/article/details/106064697

版权

前端同时被 2 个专栏收录

80 篇文章

订阅专栏

CSS3

20 篇文章

订阅专栏

本文介绍了CSS3中多种文本样式的设置方法，包括文本颜色、间距、行高、首行缩进、水平和垂直对齐、文本修饰及阴影等。详细说明了各属性的合法值、默认值及使用注意事项，如颜色值的选择、尺寸单位的应用等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文本不等同于文字，可以简单理解成包含行级元素，行内块级元素

文本颜色

color:合法的颜色值 设置字体颜色
合法的颜色值：颜色名，16进制颜色值，RGB颜色值，RGBA颜色值
当文字没有设置颜色时，默认为黑色
使用颜色名可能不被浏览器接受，使用16进制颜色值，或RGB或RGBA颜色值能被所有浏览器识别并正常显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体颜色</title>
    <style type="text/css">
        #div1{color: red;}
        #div2{color: #00ff00;}
        #div3{color: rgb(155, 90, 160);}
        #div4{color: rgba(155, 90, 160, 0.5)}
    </style>
</head>
<body>
    <div id="div1">字体颜色1</div>
    <div id="div2">字体颜色2</div>
    <div id="div3">字体颜色3</div>
    <div id="div4">字体颜色4</div>
</body>
</html>

文本间距

letter-spacing:合法的尺寸单位 | normal 设置文本间距
px：像素；可以设置负值，但文本会重叠
normal：默认值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本间距</title>
    <style type="text/css">
        div{letter-spacing: 10px;}
    </style>
</head>
<body>
    <div>文本间距</div>
</body>
</html>

文本行高

line-height:合法的尺寸单位 设置一行文本的高度，并不是行与行之间的间距，举例：用鼠标左键选中文本，蓝色部分即为文本行高
合法的尺寸单位：normal(默认值)、数字(以当前字体大小的倍数来设置行高)、百分比(以当前字体大小的百分比来设置行高)、px、em
文本行高经常用来使单行文本垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本行高</title>
    <style type="text/css">
        div{
            font-size: 20px;
            /* line-height: 40px; */
            /* line-height: 2; */
            line-height: 200%;
            /* line-height: 2em; */
            }
        p{width: 300px; height:100px; line-height: 100px;
                background: lightblue;}
    </style>
</head>
<body>
    <div>文本行高文本行高文本行高文本行高文本行高文本行高文本行高
        文本行高文本行高文本行高文本行高文本行高文本行高文本行高文本行高
        文本行高文本行高文本行高文本行高文本行高文本行高文本行高文本行高
        文本行高文本行高文本行高文本行高文本行高文本行高文本行高文本行高
        文本行高文本行高文本行高文本行高文本行高文本行高文本行高文本行高
    </div>
    <p>文本行高</p>
</body>
</html>

首行缩进

text-index:尺寸单位 设置首行缩进
默认值：0
使用em作为首行缩进的尺寸单位，1em就表示一个汉字的长度
允许使用负值，首行缩进到左边
使用百分比，基于父元素宽度的百分比进行缩进，不建议使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首行缩进</title>
</head>
<body>
    <p style="text-indent: 2em;">首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进
        首行缩首行缩进首行缩进进首行缩进首行缩进首行缩进首行缩进
        首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进
        首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进首行缩进
        首行缩进
    </p>
    <p style="text-indent: 50%;">首行缩进2</p>
</body>
</html>

水平对齐

text-align:left | right | center 设置文本水平对齐方式
参数：
left(start)：默认值，文本对齐到左边
right(end)：文本对齐到右边
center：文本对齐到中间
justify：文本两端对齐，对单行文本无效，不建议使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平排列</title>
    <style type="text/css">
        div{width: 300px; height: 100px; line-height: 100px;
            background: lightgreen; margin: 0 auto;
            text-align: justify;}
    </style>
</head>
<body>
    <div>水平排列方式</div> <br>
    <div>水平排列方式<p style="display: inline-block; width: 100%;"></p></div>
</body>
</html>

垂直对齐

vertical-align 设置元素的垂直对齐方式，对行块元素，行内块级元素，表格元素有效
参数：
baseline：默认值，对齐父元素基线
sub：对齐下标
super：对齐上标
top：顶部对齐
bottom：底部对齐
middle：垂直居中对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>垂直对齐</title>
    <style type="text/css">
        .a{font-size: 60px; background: blue;}
        .b{
            background: red;
            font-size: 30px;
            vertical-align: baseline;
            /* vertical-align: sub; */
            /* vertical-align: super; */
            /* vertical-align: top; */
            /* vertical-align: bottom; */
            /* vertical-align: middle; */
            /* vertical-align: text-top; */
            /* vertical-align: text-bottom; */
        }
    </style>
</head>
<body>
    <p>19.9<sub>元</sub></p>
    <p>19.9<sup>元</sup></p><hr>

    <div>
        <span class="a">19.9</span>
        <span class="b">元</span>
    </div>

</body>
</html>

文本修饰

text-decoration 设置文本修饰
参数：
none：默认值，标准文本样式，啥也没有
underline：定义下划线
overline：定义上划线
line-through：定义删除线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本修饰</title>
    <style type="text/css">
        
        /* p{text-decoration: underline;} */
        /* p{text-decoration: overline;} */
        /* p{text-decoration: line-through;} */
        p{text-decoration: none;}
    </style>
</head>
<body>
    <ins>文本修饰</ins> <br>
    <a href="">文本修饰</a> <br>
    <del>文本修饰</del>
    <p>文本修饰</p>
</body>
</html>

文本阴影

text-shadow:参数1 参数2 [参数3 参数4] 设置文本阴影
参数：
参数1：水平阴影位置（必须，正值在右，负值在左）
参数2：垂直阴影位置（必须，正值在下，负值在上）
参数3：阴影模糊距离
参数4：阴影颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本阴影</title>
    <style type="text/css">
        p{font-size: 30px; font-weight: 600;
            text-shadow: 2px 3px 3px red;}
        #p1{text-shadow: 0px 0px 5px red;}
    </style>
</head>
<body>
    <p>文本阴影</p>
    <p id="p1">阴影包裹</p>
</body>
</html>