web前端学习77-82（CSS文本属性---文本颜色，对齐文本，装饰文本，文本缩进，行间距）

最新推荐文章于 2022-12-09 16:24:31 发布

香甜的甲基橙

最新推荐文章于 2022-12-09 16:24:31 发布

阅读量711

点赞数 1

分类专栏： css web前端基础学习笔记文章标签：前端 css3

本文链接：https://blog.csdn.net/weixin_51249285/article/details/121341592

版权

web前端基础学习笔记同时被 2 个专栏收录

68 篇文章 13 订阅

订阅专栏

css

22 篇文章 5 订阅

订阅专栏

文章目录

4. CSS文本属性

4. CSS文本属性

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

4.1 文本颜色

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

div {
	color: red;
}

表示	属性值
预定义的颜色值	red, green, blue, 还有我们的御用色pink
十六进制	#FF000O, #FF6600, #29D794
RGB代码	rgb(255,0,0)或rgb(100%,0%,0%)

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

eg：14-CSS文本外观属性之颜色.html

<!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>Document</title>
    <style>
        div {
            /* color: deeppink; */
            /* color: #fda0a0; */
            color: rgb(207, 171, 171);
        }
    </style>
</head>
<body>
    <div>听说喜欢pink色的男生，都喜欢男人</div>
</body>
</html>

4.2 对齐文本

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

div {
	text-align: center;
}

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

eg：15-CSS文本外观之文本对齐.html

<!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>Document</title>
    <style>
        h1 {
            /* 本质是让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	删除线。(不常用)

总结:重点记住如何添加下划线?如何删除下划线?其余了解即可.

eg： 16-CSS文本外观之装饰文本.html

<!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>Document</title>
    <style>
        div {
            /*下划线 */
            /*text-decoration: underline;*/
            /*删除线*/
            text-decoration: line through ;
            /*上划线*/
            text-decoration: overline;
        }
        a {
           /*取消a默认的下划线*/ 
            text-decoration: none ; 
            color: #ddaeae;
        }
    </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个文字大小。

eg：17-CSS文本外观之文本缩进.html

<!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>Document</title>
    <style>
        p {
            /* 文本的第一行首行缩进 多少距离 */
            /* text-indent: 20px; */
            /* 如果此时写了2em，则是缩进当前元素 2个文字大小的距离 */
            text-indent: 2em;
        }
    </style>
</head>
<body>
    <p>打开北京、上海与广州的地铁地图，你会看见三张纵横交错的线路网络，这代表了中国最成熟的三套
        城市轨道交通系统。</p>
    <p>可即使这样，在北上广生活的人依然少不了对地铁的抱怨,其中谈及最多的问题便是拥挤一一对很 多
    人而言,每次挤地铁的过程,都像是一场硬仗。更何况,还都是败仗居多。
    那么，当越来越多的二线甚至三线城市迎接来了自己的地铁，中国哪里的地铁是最拥挤的呢?
    </p>
</body>
</html>

4.5 行间距

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

P {
	line-height: 26px;
}

在这里插入图片描述

上间距和下间距是一样的

如果要测量行间距：测第一行下沿到第二行下沿即可

在这里插入图片描述

eg：18-CSS文本外观之行间距.html

<!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>Document</title>
    <style>
        div {
            line-height: 16px;
        }
        p {
            line-height: 26px;
        }
    </style>
</head>
<body>
    <div>中国人</div>
    <p>打开北京、上海与广州的地铁地图，你会看见三张纵横交错的线路网络，这代表了中国最成熟的三套
        城市轨道交通系统。</p>
    <p>可即使这样，在北上广生活的人依然少不了对地铁的抱怨,其中谈及最多的问题便是拥挤一一对很 多
    人而言,每次挤地铁的过程,都像是一场硬仗。更何况,还都是败仗居多。
    那么，当越来越多的二线甚至三线城市迎接来了自己的地铁，中国哪里的地铁是最拥挤的呢?
    </p>
</body>
</html>

4.6 文本属性总结

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

香甜的甲基橙

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
web前端学习77-82（CSS文本属性---文本颜色，对齐文本，装饰文本，文本缩进，行间距）

文章目录4. CSS文本属性4.1 文本颜色4.2 对齐文本4.3 装饰文本4.4 文本缩进4.5 行间距4.6 文本属性总结4. CSS文本属性CSS Text (文本)属性可定义文本的外观，比如文本的颜色、对齐文本装饰文本、文本缩进、行间距等。4.1 文本颜色color属性用于定义文本的颜色。div { color: red;}表示属性值预定义的颜色值red, green, blue, 还有我们的御用色pink十六进制#FF000O, #FF6600, #
复制链接

扫一扫

专栏目录