CSS的单位和文本样式

长度单位：

像素px：

• 像素是我们在网页中使用的最多的一个单位，一个像素相当于我们屏幕中的一个小点。
  不同显示器一个像素的大小也不相同
  显示效果越好越清晰，像素就越小，反之像素越大

百分比%：

• 浏览器将会根据其父元素的样式来计算该值；
• 使用百分比的好处是当父元素发生变化时，子元素也会发生变化。
• 自适应页面经常用到。

em：

• em和百分比类似，它是相当于当前元素的字体大小来计算
• lem = font-size
• 使用em时，当字体大小发生变化时，em也会随之改变
• 当设置字体相关的样式时，经常会使用em

颜色单位：

• 在CSS可以直接使用颜色的单词来表示不同颜色
• 也可以使用RGB值来表示不同的颜色
• 所谓的RGB值就是通过red，green，blue三原色的不同浓度来表示不同的颜色。
• 语法：RGB（红色浓度，绿色浓度，蓝色浓度）
• 颜色浓度需要一个0~255之间的值来表示，255表示最大，0表示没有。
• 浓度也可以采用一个百分比来设置，百分比最终会转换为0~255之间的数。
• 0%表示0；100%表示255

background-color : rgb(161, 187, 215);
background-color : rgb(100%, 59%, 50%);

• 也可以使用十六进制的RGB值来表示颜色，原理和上边一样。只不过使用十六进制数来代替，使用三组两位的十六进制数来表示一个颜色，每组表示一个颜色。
• 语法：#红色绿色蓝色
• 00表示没有，ff表示最大相当于255
• 例如：红色的表示
  #ff0000
  像这种两位重复的颜色，可以简写
  比如#ff0000可以写成#f00
  #aabbcc可以写成#abc

background-color : #abc

---

字体的五大类：

• serif （衬线字体）
• sans-serif （非衬线字体）
• monospace （等宽字体）
• cursive （草书字体）
• fantasy （虚幻字体）

以上的分类都是大类，并没有涉及具体的类型，如果将字体指定为这些格式，浏览器会自己选择指定类型的字体。
一般将字体的大分类指定为font-family中的最后一个字体（传说中的备胎之王）。

---

常见样式：

1. font-style 设置文字的斜体；
   可选值：

   • Italic（斜体）
   • oblique（倾斜）

2. font-weight 设置文字的加粗；
   可选值：

   • bold加粗，
   • 也可以使100到900之间的九个值

3. font-variant 可以用来设置小型大写字母（将小写字母变为小一点的大写字母）

4. font 可以同时设置字体相关的所有样式，不同的值用空格隔开；文字大小和字体这两个属性必须写，而且字体必须是最后一个，大小必须是倒数第二个

5. line-height 设置行高，通过设置行高和字体大小得到想要的行间距。行间距 = 行高 - 字体大小 。在单行文本中，可以将行高设置为与父元素高度一致，这样可以使得单行文本在父元素中垂直显示。
   可选值：

   • 直接接收一个大小
   • 可以指定一个百分数，则会相对于字体去计算行高
   • 可以直接传一个数值，则行高设置为字体相应的倍数

6. text-transform 可以设置文本的大小写；
   可选值：

   • none：默认值，不做任何处理
   • capitalize ： 单词的首字母大写
   • uppercase：所有字母大写
   • lowercase：所有字母小写

7. text-decoration 可以设置文本的修饰
   可选值：

   • none：默认值，正常显示
   • underline：为文本添加下划线
   • overline：为文本添加上划线
   • line-through：为文本添加删除线
     超链接的默认值是underline，如果需要去掉，需要设置为none。

8. letter-spacing可以设置字符的间距，中英文都可以。

9. word-spacing可以设置单词之间的距离。

10. text-align可以设置文本对齐方式
    可选值：

    • left：默认值，文本靠左对齐
    • right：文本靠右对齐
    • center：文本居中对齐
    • justify：两端对齐，通过调整文本之间的空格大小，来达到一个两端对齐的目的。

11. text-indent可以用来设置首行缩进，通常用em（字体大小）为单位。如果给它指定一个负值，则会想做移动指定的像素；通过这种方式可以将一些不想显示又不想删除的文字隐藏起来。