首页 > 其他分享> > 29 CSS 文本属性

29 CSS 文本属性

2021-07-04 21:32:47 作者：互联网

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

一.文本颜色

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

div {
    color: red;
}

在这里插入图片描述

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

代码

<!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: #d61041da; */
            color: rgba(245, 10, 10, 0.966);
        }
    </style>
</head>
<body>
    <div>听说喜欢pink色的男生，都喜欢男人</div>
</body>
</html>

运行结果

在这里插入图片描述

二.对齐文本

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

div {
    text-align: 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 {
            /* 本质是让h1盒子里边的文字水平居中对齐 */
            text-align: right;
            /* text-align: center; */
            /* text-align: left; */
        }
    </style>
</head>
<body>
    <h1>居中对齐的标签</h1>
</body>
</html>

运行结果

在这里插入图片描述

三.装饰文本

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

div {
    text-decoration: underline;
}

在这里插入图片描述

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

四.文本缩进

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: 24px;
            /* 文本的第一行首行缩进 多少距离 */
            /* text-indent: 20px; */
            /* 如果此时写了 2em 则是缩进当前元素 2个文字大小的距离 em 是相对大小*/
            text-indent: 2em;
        }
    </style>
</head>
<body>
    <p>活动是个载体，借助这个载体，父母与孩子来一次艺术范儿的遇见。活动是个平台，借助这个平台，父母与孩子、老师与同学，在新组合的场域中发自己、绽放自己、成就自己。</p>

     <p> 父母是一辈子的事业，这个事业不是在嘴巴上，而就是在与孩子的相互看见中，共同体验中。作为父母，除了做好接送孩子的服务，还有一个重要的谁也替代不了的角色：做一个学习者、示范者、参与者、同行者，以自己最好的生命状态与孩子共成长。</p>

      <p>如果这样的时刻有，可一定别错过。圣卓的家长很优秀。只要有机会就挣着上。参与的热情越来越高，从一开始的羞涩，到后来的主动申请；从一开始的不自觉到后来的自动自发。每一次参与都满怀感恩，震撼全场。</p>
</body>
</html>

运行结果

在这里插入图片描述

五.行间距

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

p {
    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: 16px;
        }
    </style>
</head>
<body>
    <div>中国人</div>
    <p>活动是个载体，借助这个载体，父母与孩子来一次艺术范儿的遇见。活动是个平台，借助这个平台，父母与孩子、老师与同学，在新组合的场域中发自己、绽放自己、成就自己。</p>

    <p> 父母是一辈子的事业，这个事业不是在嘴巴上，而就是在与孩子的相互看见中，共同体验中。作为父母，除了做好接送孩子的服务，还有一个重要的谁也替代不了的角色：做一个学习者、示范者、参与者、同行者，以自己最好的生命状态与孩子共成长。</p>

     <p>如果这样的时刻有，可一定别错过。圣卓的家长很优秀。只要有机会就挣着上。参与的热情越来越高，从一开始的羞涩，到后来的主动申请；从一开始的不自觉到后来的自动自发。每一次参与都满怀感恩，震撼全场。</p>
</body>
</html>

运行结果

在这里插入图片描述

文本属性总结：

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

在这里插入图片描述

标签：缩进,text,29,对齐,div,文本,文本属性,CSS
来源： https://blog.csdn.net/hello_sunny123/article/details/118462228