CSS篇三

lewis 1年前 (2024-04-17) 阅读数 21 #技术

一、CSS文本属性

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

1. 文本颜色

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

1.1 使用方式

div {
  color: red;
}

表示

属性值

预定义的颜色值

red，green，blue，pink

十六进制

#FF0000，#F6600，#29D794

RGB代码

rgb(255,0,0)或rgb(100%,0%,0%)

开发中最常用的是十六进制2. 对齐文本

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

2.1 使用方式

div {
  text-align: center;
}

属性值

解释

left

左对齐（默认值）

right

右对齐

center

居中对齐

3. 装饰文本

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

3.1 使用方式

div {
  text-decoration: underline;
}

属性值

描述

none

默认。没有装饰线（最常用）

underline

下划线。链接 a 自带下划线（常用）

overline

上划线。（几乎不用）

line-through

删除线。（不常用）

4. 文本缩进

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

4.1 使用方式

div {
  text-indent: 10px;
}

em是一个相对单位，就当前元素（font-size）1个文字的大小，如果当前元素没有设置大小，则会按照父元素的1个文字大小。

p {
  text-indent: 2em;
}

5. 行间距

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

5.1 使用方式

p {
  line-height: 26px;
}

行间距有上间距、文本高度及下间距三部分组成，可以通过测量得到。

6. 总结

属性

表示

注意点

color

文本颜色

通常用十六进制，比如#ff0000

text-align

文本对齐

可以设定文字水平对齐方式

text-indent

文本缩进

通常于段落首行缩进2个字的距离 text-indent: 2em;

text-decoration

文本装饰

重点在添加下划线：underline，取消下划线：none

line-height

行高

控制行与行之间的距离

代码示例：

<!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: #ff008c; */
            color: rgb(255, 0, 128); text-decoration: overline; line-height: 26px;
        }
        h2 {
            text-align: center;
        }
        a {
            text-decoration: none;
        }
        p {
            /* 文本首行缩进 多少距离，可以写负值 */
            /* text-indent: 30px; */
            /* 如果此时写了2em，则是当前元素 2 个文字大小的距离 */
            text-indent: 2em; line-height: 24px;
        }
    </style>
</head>
<body>
    <div> 名侦探柯南过去了二十年，柯南还在上小学一年级 </div>
    <h2>文本对齐</h2>
    <!-- <div>下划线</div> -->
    <div>上划线</div>
    <!-- <div>删除线</div> -->
    <a href="01-标签选择器.html"> 去除链接自带的下划线 </a>
    <p>·······················································································</p>
    <p>·······················································································</p>
    <p>·······················································································</p>
</body>
</html>

版权声明

本文仅代表作者观点，不代表博信信息网立场。

CSS篇三

版权声明

作者文章