CSS 文本属性

文本属性

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

文本颜色

color

定义文本的颜色

1. 预定义的颜色值，属性值：red，green，blue等    

    十六进制，属性值：#FF0000，#FF6600，#29D794等    

    RGB代码，属性值：rgb(255,0,0)或rgb(100%,0,0)

2. 平时写代码时，预定义颜色值较常使用；实际开发中，十六进制最常使用

biaoqianming {
    color: red;
}
biaoqianming {
    color: #FF0000;
}
body {
    /* rgb 意为计算机三原色：red、green、blue */
    color: rgb(255,0,0);
}

对齐文本

text-align

用于设置元素内文本内容的水平对齐方式

/* 属性值：left、right、center
本质是让盒子中的文字水平居中对齐
*/
biaoqianming {
    text-align: center;
}

装饰文本

text-decoration

规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等

1. 属性取值及描述 

none：默认，没有装饰线（最常用）    

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

overline：上划线。（几乎不用）   

line-through：删除线。（不常用）

biaoqianming {
    text-decoration: underline;
}
/*取消 a 标签默认的下划线*/
a {
    text-decoration: none;
    color: #333;
}

<a href="#">登录</a>

文本缩进

text-indent

指定文本的第一行的缩进，通常是段落的首行缩进

/*属性值为正的时候，向右缩进；为负的时候，向左缩进（一般不使用）*/
biaoqianming {
    text-indent: 10px;    
}
/* em 是一个相对单位,代表当前元素(font-size)一个文字的大小.
如果当前元素没有设置大小,则会按照复原色的一个文字的大小.
默认为16px.*/
biaoqianming {
    font-size: 20px;
    text-indent: 2em;
}

行间距

line-height

设置行间的距离（行高）。控制文字行与行之间的距离。

/*默认的文字大小为 16px,当设置行间距为 25px 时,则多出来的 9px 分别分给了上下间距各4.5px. */
biaoqianming {
    line-height: 25px;
}

1. 行间距的组成：上间距、文本高度、下间距

2. 这里设置的行间距，真正改变的上、下间距的距离