CSS学习04-文本属性


CSS文本属性

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


1. 文本颜色

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

div {
	color: red;
}

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

注意：实际工作中，用16进制的写法是最多的

示例代码：

<style>
    div {
        /* color: deeppink; */
        /* color: #cc00ff; */
        color: rgb(255, 0, 255);
    }
</style>

2. 文本对齐

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

div {
	text-align: center;
}

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

示例代码：

<style>
    h1 {
        /* 本质是让h1盒子里面的文字水平居中对齐 */
        text-align: center;
        /* text-align: right; */
    }
</style>

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>

显示效果：

image-20210427123408094


4. 文本缩进

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

div {
	text-indent: 10px;
}

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

p {
	text-indent: 2em;
}

em是一个相对单位，就是当前元素(font-size)一个文字的大小，如果当前元素没有设置大小，则会按照父元素的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: 24px;
            /* 文本的第一行首行缩进 多少距离 */
            /* text-indent: 20px; */
            /* 如果此时写了2em 则是缩进当前元素 2个文字大小的距离 */
            text-indent: 2em;


        }
    </style>
</head>
<body>
    <p>打开北京、上海与广州的地铁地图，你会看见三张纵横交错的线路网络，这代表了中国最成熟的三套城市轨道交通系统。</p>

    <p> 可即使这样，在北上广生活的人依然少不了对地铁的抱怨，其中谈及最多的问题便是拥挤——对很多人而言，每次挤地铁的过程，都像是一场硬仗。更何况，还都是败仗居多。</p>
     
    <p> 那么，当越来越多的二线甚至三线城市迎接来了自己的地铁，中国哪里的地铁是最拥挤的呢？</p>
</body>
</html>

显示效果：

image-20210427125200767


5. 行间距

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

p {
	line-height: 26px;
}

image-20210427130346804

  • 行高(行间距) = 上间距 + 文本高度 + 下间距
  • 上距离和下距离总是相等的，因此文字看上去是垂直居中的

示例代码：

<!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: 26px;
        }
        p {
            line-height: 25px;
        }
    </style>
</head>
<body>
    <div>中国人</div>
    <p>打开北京、上海与广州的地铁地图，你会看见三张纵横交错的线路网络，这代表了中国最成熟的三套城市轨道交通系统。</p>

    <p> 可即使这样，在北上广生活的人依然少不了对地铁的抱怨，其中谈及最多的问题便是拥挤——对很多人而言，每次挤地铁的过程，都像是一场硬仗。更何况，还都是败仗居多。</p>
     
    <p> 那么，当越来越多的二线甚至三线城市迎接来了自己的地铁，中国哪里的地铁是最拥挤的呢？</p>
</body>
</html>

显示效果：

image-20210427130710415


6. 文本属性总结

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