CSS文本属性

CSS文本属性

• • • 1.文本颜色
    • 2.文本间距
    • [3. 文本修饰](#3. 文本修饰)
    • [4 .文本缩进](#4 .文本缩进)
    • 5.文本对齐_水平
    • 6.行高
    • [7. vertical-align](#7. vertical-align)

1.文本颜色

• 属性名：color
• 作用：控制文字的颜色。
• 可选值：
  1. 颜色名
  2. rgb或rgba
  3. HEX或HEXA （十六进制）
  4. HSL或HSLA

开发中常用的是：rgb/rgba 或 HEX/HEXA （十六进制）。

• 举例：

  div {
  color: rgb(112,45,78);
  }

2.文本间距

• 字母间距：letter-spacing
• 单词间距：word-spacing （通过空格识别词）
• 属性值为像素（px ），正值让间距增大，负值让间距缩小。

3. 文本修饰

• 属性名：text-decoration

• 作用：控制文本的各种装饰线。

• 可选值

  1. none ： 无装饰线（常用）
  2. underline ：下划线（常用）
  3. overline ： 上划线
  4. line-through ： 删除线

• 举例：

  a {
  text-decoration: none;
  }

4 .文本缩进

• 属性名：text-indent

• 作用：控制文本首字母的缩进。

• 属性值：css中的长度单位，例如：px,em

• 举例：

  div {
  text-indent:2em;
  }

5.文本对齐_水平

• 属性名：text-align 。

• 作用：控制文本的水平对齐方式。

• 常用值：

  1. l eft ：左对齐（默认值）
  2. r ight ：右对齐
  3. c enter ：居中对齐

• 举例：

  div {
  text-align: center;
  }

6.行高

• 属性名：line-height
• 作用：控制一行文字的高度。
• 可选值：
  1. normal ：由浏览器根据文字大小决定的一个默认值。
  2. 像素(px)。
  3. 数字：参考自身font-size 的倍数（很常用）。
  4. 百分比：参考自身font-size 的百分比。
• 备注：

由于字体设计原因，文字在一行中，并不是绝对垂直居中，若一行中都是文字，不会太影响观感。

• 举例：

  div {
  line-height: 60px;
  line-height: 1.5;
  line-height: 150%;
  }

• 行高注意事项：

1. line-height 过小会怎样？------ 文字产生重叠，且最小值是0，不能为负数。
2. line-height 是可以继承的，且为了能更好的呈现文字，最好写数值。
3. line-height 和height 是什么关系？
   设置了height ，那么高度就是height 的值。
   不设置height 的时候，会根据 line-height *行数 来计算高度。

• 应用场景：
  1. 对于多行文字：控制行与行之间的距离。
  2. 对于单行文字：让height 等于line-height ，可以实现文字垂直居中。

备注：由于字体设计原因，靠上述办法实现的居中，并不是绝对的垂直居中，但如果 一行中都是文字，不会太影响观感。

7. vertical-align

• 属性名：vertical-align 。
• 作用：用于指定同一行元素之间，或 表格单元格 内文字的 垂直对齐方式。
• 常用值：
  1. baseline （默认值）：使元素的基线与父元素的基线对齐。
  2. top：使元素的顶部与其所在行的顶部对齐。
  3. middle ：使元素的中部与父元素的基线加上父元素字母x的一半对齐。
  4. bottom ：使元素的底部与其所在行的底部对齐。

特别注意：vertical-align 不能控制块元素。