CSS文本属性-文本颜色、文本对齐、文本装饰、文本缩进、行间距

Love The Way You Lie 2022-12-16 14:28 134阅读 0赞

# CSS文本属性 #

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

### 文本颜色 ###

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

<table> 
 <thead> 
  <tr> 
   <th>颜色表示</th> 
   <th>属性值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>预定义的颜色值</td> 
   <td>red，green，blue，pink等等</td> 
  </tr> 
  <tr> 
   <td>十六进制</td> 
   <td>#FF0000,#FF6600,#19D794</td> 
  </tr> 
  <tr> 
   <td>RGB代码</td> 
   <td>rgb（255，0,0）或者rgb（100%，0%，0%）</td> 
  </tr> 
 </tbody> 
</table>

在写demo测试时经常使用预定义的颜色值，但是开发时经常使用十六进制的表示方法。

### 文本对齐 ###

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

div{
    	text-align:center;
    }

left：左对齐；center：居中对齐；right：右对齐。

### 文本装饰 ###

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

div {
    	text-dectoation: underline;
    }

text-decoration的属性值默认为none，没有装饰线；underline，下划线（链接自带下划线）；overline ，上划线；line-through，删除线。

可以使用

a {
    	text-dectoation: none;
    }

取消链接的下划线。

### 文本缩进 ###

text-indent属性用来指定文本的第一行的缩进。

p {
    	text-indent: 40px;
    }

![在这里插入图片描述][20201020204752654.png_pic_center]

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

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

p{
    	text-indent: 2em;
    }

![在这里插入图片描述][20201020204809953.png_pic_center]

### 行间距 ###

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

p {
    	line-height: 50px;
    }

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

p {
    	line-height: 50px;
    }

![在这里插入图片描述][20201020204821948.png_pic_center]

[20201020204752654.png_pic_center]: /images/20221123/0b650277336a492088948b408b1e6d2a.png
[20201020204809953.png_pic_center]: /images/20221123/6ab93bb857404891b5b6c839b64ce51f.png
[20201020204821948.png_pic_center]: /images/20221123/218dec5cdb024ec39917b7e123c1def4.png