Web前端入门（十二）CSS文本属性

总目录

CSS 文本属性可以设置文本的 外观，比如文本颜色、对齐文本、装饰文本、文本缩进、行间距的等

1.color

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

div {
    color: red;
}

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

注：实际开发中，最常用的是十六进制的写法、

2.text-align

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

div {
    text-align: center;
}

属性值	解释
left	左对齐（默认）
right	右对齐
center	居中对齐

注：是让盒子里面的文本内容水平居中， 而不是让盒子居中对齐

3.text-decoration

• text-decoration 属性用于装饰文本，可以给文本添加下划线，删除线，上划线等

div {
    text-decoration: underline;
}

属性值	描述
none	默认，没有装饰线(最常用)
underline	下划线，链接自带下划线（常用）
overline	上划线(几乎不用)
line-through	删除线 (不常用)

重点记住如何添加下划线，如何删除下划线，其余了解即可。

4.text-indent

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

p {
    /* 首行缩进10px */
    text-indent: 10px;
    /* 首行缩进2个字的宽度 */
    text-indent: 2em;
}

• 通过设置该属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值
• em是一个相对单位，就是当前元素(font-size)1个文字的大小
• 如果当前元素没有设置大小，则会按照父元素的一个文字大小

5.line-height

• line-height 属性用于设置行间的距离(行高)，可以控制文字行与行之间的距离
• 行间距包括上间距、文本高度、下间距
• 一般情况下，行距比字号大7–8像素左右就可以了。

p {
   line-height: 26px;
}

行高与高度的三种关系

• 如果行高等于高度，文字会垂直居中
• 如果行高大于高度，文字会偏下
• 如果行高小于高度，文字会偏上

注：如果元素有font属性，line-height 要设置在font属性下面，否则无效（font属性设置时会默认改变line-height）

注： CSS无自带的垂直居中的语句，故只能使用一些技巧来完成此操作。

• 让文字的行高等于盒子的高度，就可以让文字在当前盒子内垂直居中。

可以理解为行高的上空隙和下空隙把文字挤到中间了，如果是行高小于盒子高度，文字会偏上，如果行高大于盒子高度，则文字偏下。

6.文本属性总结

属性	表示	注意点
color	颜色	通常用十六进制，而且是简写形式#fff
line-height	行高	控制行与行之间的距离
text-align	水平对齐	可以设定文字水平的对齐方式
text-indent	首行缩进	段落首行缩进（通常用于段落首行缩进2个字的距离 text-indent: 2em;）
text-decoration	文本修饰	添加下划线 underline，取消下划线 none