9.20总结

1、css字体1.1 font-family

 作用：设置文本的字体系列

 语法：font-family:字体名称；

常用值：

  一个字体名称或系列名称（介绍常用字体名称、字体系列）

    微软雅黑   Microsoft YaHei

    宋体      SimSun

   黑体     HeiTi

    楷体     KaiTi

  多个字体名称

   逗号分开

   如果浏览器不支持第一个字体，则会尝试下一个（回退机制）

注意:如果字体名称包含空格、汉字、特殊字符，必须加引号

 作用：设置字体的大小

 语法：font-size:值；

常用值：

  长度值（通常是像素px）

  百分比（相对于父元素计算）

  em相对单位

    如果用于字号，相当于父元素字号计算，如果用于其它属性，相对于当前元素的字号

大多数浏览器的默认值字号：16px

 font-style

作用：设置字体的大小

语法：font-style:值；

常用值：

  normal默认值

  italic斜体显示
 

1.4 font-weight

作用：设置字体粗细 语法：font-weight:值；

常用值：

  normal默认值

  bold加粗

  100-900九级字重，400相当于normal，700相当于bold

 line-height

- 作用：设置行高（效果是产生文本行间距）

- 语法：line-height:值；

- 特性：实现单行文本的垂直居中

- 测量：文字高+行间距

- 常用值

  - normal默认。设置合理的行间距。

- px 设置固定的行间距。

  - number设置数字，此数值会与当前的字号相乘来设置行间距。

  - 百分比:相对于font-size计算 

  ```css

  .box{

     /*line-height:2;*/

   line-height:200%; /*产生的效果一致都是字号的两倍*/

  }

  ```

#### 1.6 font简写

- 作用：设置所有字体属性

- 语法

  font: 字体风格 字体加粗 字号/行高  字体；

### 2、css文本

#### 2.1 text-align

- 作用：设置文本的水平对齐方式

- 语法：text-align:值；

- 常用值

  - left居左对齐 [默认值]

  - right居右对齐

  - center居中对齐

  - justify两端对齐

- 注意：适用于块状元素

#### 2.2 text-decoration

- 作用：置文本装饰

- 语法：text-decoration:值；

- 常用值

  - none 默认。定义标准的文本。 【常用】

  - underline 定义文本下的一条线 【常用】

  - line-through 定义穿过文本的一条线。【比较常用】

  - overline 定义文本上的一条线。 【不常用】

#### 2.3 text-indent

- 作用：设置文本块首行的缩进

- 语法：line-height:值；

- 常用值

  - 默认值：0

  - 长度值，px,em(更方便)

  - 百分比: 相对于元素内容宽进行计算

  - 允许负值

#### 2.4 color

- 作用：设置文字的颜色

- 语法：color:颜色值；

- 常用值

  - 颜色的常用表式方法

    - 色名称：如red、blue等

    - 十六进制颜色表示方法

      - 语法：如#ff0000

      - 说明：#rrggbb

        r,g,b取值范围为00-ff

        - r red  红色

        - g green 绿色

        - b  blue 蓝色

      - 认识常见颜色的写法

  - 白色（#ffffff）、黑色（#000000）

        红色（#ff0000）、绿色(#00ff00)、蓝色(#0000ff)

- rgb颜色表示方法

  - 语法：rgb(255,0,0)

    - 说明：rgb(r,g,b)

      r,g,b取值范围为0-255

      - 认识常见颜色的写法

        - 白色： rgb(255,255,255) 、黑色 : rgb(0,0,0)

          红色： rgb(255,0,0) 、绿色： rgb(0,255,0) 、蓝色： rgb(0,0,255)  

### 、文本属性继承性

简单渗透:字体文本属性大多具有继承性。

>可继承的属性

>font-size

>font-family

>font-style

>font-weight

>font

>line-height

>text-align

>text-indent

>color

>

>不可继承

>text-decoration(穿透性)