CSS入门学习（2）-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_74991285/article/details/130724759

本文介绍了CSS中的文本属性，包括使用color定义文本颜色，如红色、十六进制或RGB代码；text-align设置文本对齐，如左对齐、居中和右对齐；text-indent用于段落首行缩进；text-decoration添加或移除文本装饰线，如下划线和删除线；以及line-height调整行间距。这些属性帮助开发者控制网页文本的视觉呈现。

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

4. 文本属性

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

4.1 文本颜色

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: #080f01; */
            color: rgb(255, 0, 179);
        }
    </style>
</head>
<body>
    <div>喜欢坤坤的男生，都喜欢男人</div>
</body>
</html>

实现如下：

开发中最常用的是十六进制.

4.2 对齐文本

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>CSS文本外观之文字对齐</title>
    <style>
        h1 {
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>居中 对齐的标题</h1>
</body>
</html>

实现如下：

4.3 装饰文本

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>

实现如下：

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

4.4 文本缩进

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 {
            /* text-indent: 20px; */
            text-indent: 2em;
        }
        
    </style>
</head>
<body>
    <p>夜晚，上海闹市街头，一只通体发绿、直立行走的“青蛙”被要求脱下衣服。面对城管的勒令，他缓缓掀起了大而沉的蛙头，在同伴的帮助下，他不情愿地褪去蛙皮，现出了穿着格子衬衫的人形背影，那分明是个小伙子。</p>

    <p>这不是“网红卖崽青蛙”的第一次“落网”现形，几个月前，一只网红“青蛙”还因为违规骑电动车被交警拦下。几年来，这只“青蛙”以狠心卖自己的崽出名，网络上还流传有“不是生活所迫，谁会忍心卖儿卖女”的梗，“落网”一词，简直是这场狂欢的画龙点睛。</p>

    <p>直到几张模糊照片的出现。</p>
</body>
</html>

实现如下：

4.5 行间距

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

p {

line-height: 26px;

}

行间距由上间距、文本高度、下间距组成。

例如：

设置“网红青蛙”行间距为100px：

<!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: 100px;
        }
    </style>
</head>
<body>
    <div>网红青蛙</div>
    <p>夜晚，上海闹市街头，一只通体发绿、直立行走的“青蛙”被要求脱下衣服。面对城管的勒令，他缓缓掀起了大而沉的蛙头，在同伴的帮助下，他不情愿地褪去蛙皮，现出了穿着格子衬衫的人形背影，那分明是个小伙子。</p>

    <p>这不是“网红卖崽青蛙”的第一次“落网”现形，几个月前，一只网红“青蛙”还因为违规骑电动车被交警拦下。几年来，这只“青蛙”以狠心卖自己的崽出名，网络上还流传有“不是生活所迫，谁会忍心卖儿卖女”的梗，“落网”一词，简直是这场狂欢的画龙点睛。</p>

    <p>直到几张模糊照片的出现。</p>
</body>
</html>

实现如下：

4.6 文本属性总结

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