七、字体、文本、背景相关样式

1.字体相关样式

• 字体颜色

  • color

• 字体大小

  • font-size
  • 相关单位
    • em
      • 1em = 1个font-size（当前元素的font-size）
    • rem
      • 1rem = 1个根元素的font-size

• 行高

  • 文本在网页中都需要创建一个文本框，行高就是文本框的高度
  • 使用line-height来设置行高，文字默认是在行高中居中
  • 行高可以指定一个像素值，也可以指定一个整数，指定一个数字的话行高就会是字体的指定的倍数
  • 通过行高可以用来设置行间距：
    • 行间距 = 行高 - 字体大小
  • 文字在行内垂直居中，可以将行高设置为何父元素高度一样

• 字体族

  • font-family
  • 使用font-family来设置字体族

• @font-face

  • 通过font-face可以让用户使用服务器中的字体
  • 使用过程中一定要注意版权的问题

@font-face {
    font-family:"Open Sans";
    src:url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
        url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}

• font-weight 字重
• font-style 斜体
• font-variant 字体变形
• 简写属性 font，通过font可以同时设置所有的字体相关样式
  • font : [加粗 斜体 字体变形] 字体大小/行高 字体族

2.文本的格式

（1）水平对齐
- text-align：
- 可选值：
- left 左对齐
- right 右对齐
- center 居中对齐
- justify 两端对齐
（2）垂直对齐
- vertical-align
- 可选值：
- baseline 基线对齐
- top
- bottom
- middle
（3）首行缩进
- text-indent
（4）文本修饰
- text-decoration
（5）white-space
（6）溢出的文本显示省略号

white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;

3.背景相关样式

• background-image
  • 背景图片
• background-color
  • 背景颜色
• background-repeat
  • 背景的重复方式
  • 可选值：
    • repeat 水平垂直双方向重复
    • repeat-x 水平方向重复
    • repeat-y 垂直方向重复
    • no-repeat 不重复
• background-size
  • 设置背景图片的尺寸
  • 可选值：
    • 可以设置数值或百分比（auto）
    • cover 背景图片铺满元素
    • contain 让背景图片在元素中完整显示
• background-position
  • 设置背景图片的位置
  • 可选值：
    • top left right bottom center
    • 可以设置两个偏移量
      • 第一个偏移量是水平方向的偏移量
        • 如果值为正，则背景图片向右移动
        • 如果值为负，则背景图片向左移动
      • 第二个偏移量是垂直方向的偏移量
        • 如果值为正，则背景图片向下移动
        • 如果值为负，则背景图片向上移动
• background-clip
  • 背景的裁切
  • 可选值：
    • border-box
    • padding-box
    • content-box
• background-origin
  • 背景的定位的原点
  • 可选值：
    • border-box
    • padding-box
    • content-box
• background-attachment
  • 背景是否固定
  • 可选值：
    • scroll 滚动
    • fixed 背景在视口中固定
• background
  • 背景的简写属性，通过该属性可以同时设置所有的背景相关的样式，没有顺序要求。