零基础学习WEB前端开发(十八)：CSS文本外观属性

最新推荐文章于 2023-04-24 19:48:01 发布

是刃小木啦~

最新推荐文章于 2023-04-24 19:48:01 发布

阅读量385

点赞数

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

本文链接：https://blog.csdn.net/txr152111/article/details/121159853

版权

WEB前端开发专栏收录该内容

22 篇文章 3 订阅

订阅专栏

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

属性	表示	注意点
color	文本颜色	通常用十六进制来表示颜色，可以上网查各种颜色对应值
text-align	文本对齐	设置文字的水平对齐方式
text-indent	文本缩进	通常设置首行缩进两个字符，使用em单位
text-decoration	文本修饰	添加上划线、下划线，注意使用取消下划线
line-height	行高	控制行与行之间的距离

一、文本颜色

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

div { 
    color: red;
}

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

小工具推荐：RGB颜色值与十六进制颜色码转换工具

二、文本对齐

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>Document</title>

    <style>
        h1 {
            text-align: center;
        }
    </style>

</head>
<body>
    <h1>居中对齐的标题</h1>
    <h1>这个能居中吗？</h1>
</body>
</html>

效果：

三、文本装饰

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

div {
    text-decoration: underline;
}

属性值	描述
line-through	删除线，一般不用。
underline	下划线。连接a自带下划线。
overline	上划线。几乎不用

举例说明：

<!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 {
            text-align: center;
            /* 下划线 */
            text-decoration: underline;
        }
    </style>

</head>
<body>
    <h1>居中对齐的标题</h1>
    <h1>这个能居中吗？</h1>
</body>
</html>

效果：

如何去除连接的下划线呢？

可以对a添加修饰，使其隐去下划线：

<!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>
        a {
            text-decoration: none;
        }
    </style>

</head>
<body>
    <a href="www.baidu.com">百度一下</a>
</body>
</html>

四、文本缩进

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

div{
    text-indent: 10px;
}

默认的是没有首行缩进的。

添加首行缩进之后是这样的效果：

代码：

<!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: 35px;
        }
    </style>

</head>
<body>
    <p>成功没有捷径，只有比别人更努力，付出更多。成功的步骤是比别人进步更快，而且是几十年如一日毅志不移。成功的形状是比别人做得更好，更有特色，这个好是全方位的好，不只是某一点好，这特色是任何人都达不到的唯独特色。</p>
    <p>成功的秘诀是经常自我检讨自我反省，每天都要问自己：哪些做对了？哪些做错了？哪些方式方法不是最佳方案和最好方法？还有没有更好的方案方式方法可以替代？哪些方案方法还存在漏洞和弊端需要改革？哪些方法以后不能再用等等，更要警惕同样的错误终生不得犯第二次。</p>
</body>
</html>

使用px单位不是很好，是像素值。甚至受到字体大小的影响而使得缩进效果不一样。

em是一个相对单位，就当前元素（font-size）1个文字的大小。如果首行缩进两个字，直接2em就行了·。