14-CSS文本属性

一、CSS文本属性

1. 文本颜色color

 h2 {
  color: blue;
  }
 ​
  /* 十六进制表示颜色，开发最常用 */
  h1 {
  color: #ad6b6b;
  }
 ​
  /* rgb形式 */
 /* 取值0-255 */
  p {
  color: rgb(255, 0, 0);
  }

2. 对齐文本text-align

设置文本的水平对齐方式，给块级元素加，设置块级元素里面的文本和行内块的对齐方式

        /* text-align对齐文本：left左对齐、center居中对齐、right右对齐 */
        /* 居中只能给块级元素加，使里面的行内元素和文本居中，加在行内元素上无效 */
        p {
            color: rgb(255, 0, 0);
            text-align: center;
        }

3. 装饰文本text-decoration

a {
        /* 给a链接取消下划线 */
        text-decoration: none;
 }
div {
        /* 下划线 */
        text-decoration: underline;
        /*删除线*/
        text-decoration: line-through;
        /*上划线*/
        text-decoration: overline;
 }

4.4 文本缩进text-indent

通常用于首行缩进。

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

        p {
            /* em是一个相对单位，就是当前元素的1个文字大小 */
            text-indent: 2em;
        }

        h3 {
            text-indent: 10px;
        }

5. 行间距line-height

行高是基线到基线的距离，一般测量顶线到顶线的距离。

行高等于盒子高度时，文字垂直居中原理：

1.文字默认有顶线，中线，基线，底线。各线之间的距离相等。

2.行高=上距离 + 内容高度 + 下距离。

3.上间距=下间距=（行高-字体size）/2

4.行高等于盒子高度，文字会被挤到中间，垂直居中。
行高大于盒子高度时，文字上间距变大，文字会偏下。
行高小于盒子高度时，文字上边距变小，文字会偏上。

图片.png

    h3 {
        text-indent: 10px;
    }