三、字体和文本样式

1. 字体样式

1. 字体大小

• 属性名：font-size
• 取值：数字+px
• 注意值
  • 浏览器默认字号16px
  • 记得加单位

2. 字体粗细

• 属性名：font-weight

• 取值

  • 关键字

    正常	normal
    加粗	bold

  • 纯数字：100~900的整百数（推荐使用）

    正常	400
    加粗	700

3. 字体样式是否倾斜

• 属性名：font-style
• 取值
  • 正常（默认值）：normal
  • 倾斜：italic

4. 字体

• 属性名：font-family
• 作用：设置字体样式

5. 样式的层叠问题

• 后面的覆盖前面的

6. 字体font相关属性的连写

• 属性名：font（复合属性）
• 取值：font：style weight size family;
• 省略要求：
  • 只能省略前两个，如果省略相当于设置了默认值

2. 文本样式

1. 文本缩进

• 属性名：text-indent
• 取值：
  • 数字+px（浏览器默认一个字16px）
  • 数字+em（1个字体大小是1em）

2. 文本水平对齐方式

• 属性名：text-align

• 取值：

  属性值	效果
  left	左对齐
  right	右对齐
  center	居中对齐

• text-align:center 内容对齐方式 对齐元素

  • 文本

  • span 标签、a标签

  • input标签、img标签

  • 注意点：如果要让以上元素水平居中，text-align:center需要给以上元素的父元素设置

• 拓展：让div、p、h水平居中

  • 通过margin：0 auto；实现

3. 文本修饰

• 属性名：text-decoration

• 取值：

  属性值	效果
  underline	下划线（常用）
  line-through	删除线
  overline	上删线
  none	无装饰线（常用）

• 开发中会使用text-decoration：none；清楚a标签默认的下划线

3. 行高

• 作用：控制一行的上下行间距
• 属性名：line-height
• 取值：
  • 数字+px
  • 倍数（当前标签font-size的倍数）
• font连写
  • font：style weight size/line-height family;

4. 拓展 颜色常用取值

• 属性名

  color/background-color

• 属性值

  颜色表示方法	含义	属性值
  关键字	预定义的颜色名	red，green……
  rgb表示法	红绿蓝三原色。每项取值0~255	rgb(0,0,0)，rgb(255,255,255)……
  rgba表示法	红绿蓝三原色+a表示透明度，取值范围0~1	rgba(255,255,255,0.5)……
  十六进制表示法	#开头	#000000，#ff0000