CSS篇三-CFANZ编程社区

一、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篇三_html