四、CSS文本属性

最新推荐文章于 2022-01-15 19:34:34 发布

并不傻的狍子

最新推荐文章于 2022-01-15 19:34:34 发布

阅读量119

点赞数

分类专栏：前端开发文章标签： html css

本文链接：https://blog.csdn.net/qq_40836442/article/details/114676269

版权

前端开发专栏收录该内容

13 篇文章 0 订阅

订阅专栏

CSS Text（文本）属性课定义文本的外观，比如文本的颜色、对齐方式、装饰文本、文本缩进、行间距等。

一、文本颜色

color 属性用于定义文本的颜色。

div {
    color: red;
}

表示方式	属性值
预定义的颜色值	red，green，blue，pink
十六进制	#FF0000，#FF6600，#29D794
RGB代码	rgb(255,0,0)或rgb(100%,0%,0%)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS文本外观属性值颜色</title>
    <style>
        div {
            color: deeppink;
            color: #ff0000;
            color: rgb(255, 0, 0);
            color: rgb(0%, 100%, 0%);
        }
    </style>
</head>
<body>
</body>
</html>

开发中最常用的是十六进制，通过取样器取样。

二、对齐文本

text-align属性用于设置元素内文本内容的水平对齐方式。

div {
    text-align: center;
}

属性值	解释
left	左对齐（默认值）
right	右对齐
center	居中对齐

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>对齐文本</title>
    <style>
        h1 {
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>居中对齐的标题</h1>
</body>
</html>

三、装饰文本

text-decoration 属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等。

div {
    text-decoration: underline;
}

属性值	描述
none	默认。没有装饰线（最常用）
underline	下划线、连接a 自带下划线（常用）
overline	上划线。（几乎不用）
line-through	删除线。（不常用）

重点记住如何添加下划线？如何删除下划线，其余了解即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS文本外观之装饰文本</title>
    <style>
        div {
            /* 下划线 */
            text-decoration: underline;
            /* 删除线 */
            text-decoration: line-through;
            /* 上划线 */
            text-decoration: overline;
        }
        a {
            /* 取消a默认下划线 */
            text-decoration: none;
            color:#333
        }
    </style>
</head>
<body>
    <div>粉红色的回忆</div>
    <a href="#">粉红色的回忆</a>
</body>
</html>

四、文本缩进

text-indent 属性用来指定文本的第一行的缩进，通常是段落的首行缩进。

div {
    text-indent: 10px;
}

通过设置该属性值，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。

p {
    text-indent: 2em;
}

em是一个相对单位，就是当前元素（font-size）1个文字的大小，如果当前元素没有设置大小，则会按照父元素的1个文字大小。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS文本外观属性之文本缩进</title>
    <style>
        p {
            font-size: 18px;
            /* 文本的第一行首行缩进 多少距离 */
            /* text-indent: 20px; */
            /* 如果此时写了2em 则是缩进当前元素 2个文字大小的距离 */
            text-indent: 2em;
        }
    </style>
</head>
<body>
    <p>
        打分法哈哈发货费of好OA饭后回复，大发啊，打大二，大，额发发，非法，发而发，啊啊发，挨饿飞飞飞，阿尔法，奥恩，分，阿尔法，奥恩，分，阿尔法，啊，分，额，啊，分，额，安防，额，，阿打发，阿尔法，安防，阿尔法，了发放
    </p>
</body>
</html>

五、行间距

line-height 属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离。

div {
    line-height: 26px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS文本外观属性之行间距</title>
    <style>
        div {
            line-height: 70px;
        }
    </style>
</head>
<body>
    <div>标题</div>
    <p>回复哈韩范</p>
</body>
</html>

六、文本属性总结

属性	表示	注意点
color	文本颜色	我们通常用十六进制比如而且是简写形式 #fff
text-align	文本对齐	可以设定文字水平的对齐方式
text-indent	文本缩进	通常我们用于段落首行缩进2个字的距离 text-indent: 2em
text-decoration	文本修饰	记住添加下划线 underline 取消下划线 none
line-height	行高	控制行与行之间的距离