css学习笔记4（文本属性）

4.CSS文本属性

4.1 文本颜色

• 属性名：color

• 可选值：

  1. 颜色名
  2. rgb或rgba
  3. HEX或HEXA（十六进制）
  4. HSL或HSLA

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

• 举例：

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

4.2 文本间距

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

4.3 文本修饰

• 属性名：text-decoration

• 可选值：

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

  可搭配如下值使用：

  1. dotted：虚线
  2. wavy：波浪线
  3. 也可以指定颜色

• 举例：

  div {
      text-decoration: none;
  }
  

4.4 文本缩进

• 属性名：text-indent

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

• 举例：

  div {
      text-indent: 40px;
  }
  

后面会学习css中的一些新得长度单位，目前我们只知道像素（px）。

4.5文本对齐_水平

• 属性名：text-align

• 常用值：

  1. left：左对齐（默认值）

  2. right：右对齐

  3. center：居中对齐

• 举例：

  div {
      text-align: center;
  }
  

4.6 细说font-size

1. 由于字体设计原因，文字最终呈现的大小，并不一定与font-size的值一致，可能大，也可能小。例如：font-size设为40px，最终呈现的文字，可能比40px大，也可能比40px小。
2. 通常情况下，文字相对字体设计框，并不是垂直居中的，通常都靠下一些。

4.7 行高

• 属性名：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，可以实现文字垂直居中。

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

4.8 文本对齐_垂直

1. 顶部：无需任何属性，在垂直方向上，默认就说顶部对齐。

2. 居中：对于单行文字，让height=line-height即可。

   问题：多行文字垂直居中怎么办？——后面我们用定位去做。

3. 底部：对于单行文字，目前一个临时的方式：

   让line-height=(height?2)-font-size?x。

   备注：x是根据字体族动态决定的一个值。

   问题：垂直方向上的底部对齐，更好的解决方法是什么？——后面我们用定位去做。

4.9 vertical-align

• 属性名：vertical-align。

• 作用：用于指定同一行元素之间，或表格单元格内文字的垂直对齐方式。

• 常用值：

  1. baseline（默认值）：使元素的基线与父元素的基线对齐。
  2. top：使元素的顶部与其所在行的顶部对齐。
  3. middle：使元素的中部与父元素的基线加上父元素的字母x的一半对齐。
  4. bottom：使元素的底部与其所在行的底部对齐。

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