前端0-14

如果不知道自己该干什么的话，就去学习吧。

如果不知道说点什么，就对自己说句加油吧。

语法

  - HTML中通过id属性定义

    如：

    ```html

    <div class="box"></div>

    ```

  - css中以点进行标识:#

    ```css

    #id名称 {

        样式声明;

    }

   

   

    #box{

      background-color:red;

    }

    ```

- 作用:选择所有带有指定id名的元素

**注意**：具有唯一性，一般用于页面唯一性的元素如头部、底部等，经常和 JavaScript 搭配使用。

### 总结

- 总结使用频率

  - 基础选择器中最常用是类选择器

  - id用于页面中唯一模块

  - 标签选择器定义的全局样式，单独使用要慎重

  - *号通常用于重置样式【最不常用】

# 2、表格CSS 属性

## 1、表格边框

指定 CSS 表格边框，使用 border 属性，通常定义td,th的边框属性

表格会呈现双边框，是因为表和 th / td 元素有独立的边界。

table存在默认属性border-collapse：separate

## 2、表格的折叠边框

border-collapse 属性设置表格的边框是否被合并为一个单一的边框

- 取值

  - separate：边框独立（默认值）

  - collapse：相邻边框被合并

*     border-spacing:单元格之间的间距

      * border-spacing:水平方向 垂直方向；

      * border-spacing：一个值；代表水平方向和垂直方向的间距是一样的

        注意：只有在 边框独立border-collapse: separate时才能用

## 3、单元格内容的垂直对齐

- vertical-align 作用：垂直对齐属性设置垂直对齐，比如顶部，底部或中间

- 常用值

  - top顶部对齐

  - middle居中对齐

  - bottom底部对齐

### 小节：如何使用css实现表格的1像素边框

```css

table{

  border-collapse:collspse;

}

```

# 3、CSS字体 ,文本属性

### 学习目标

- 熟练掌握css常用文本属性

- 熟练掌握css常用字体属性

- 能够说出颜色的常用表示方法

### 1、font-family：

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

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

- 常用值：

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

    - 微软雅黑   Microsoft YaHei

    - 宋体       simsun

    - 黑体     HeiTi

    - 楷体     KaiTi

  - 多个字体名称

    - 逗号分开

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

      ```css

      1.使用多个字体名称形成一个回退系统（也就是备用字体），当浏览器不支持第一个字体的时候则会尝试下一个字体，多个字体之间用逗号隔开

      2.中英文混合字体时，要先写英文字体，在写中文字体

      font-family: 'Times New Roman', '楷体', '宋体'

      .box{

          /*font-family:"微软雅黑","宋体";*/

          /*font-family:"宋体","微软雅黑"; *//*与上一个相比产生的效果不同，谁在前使用哪一个*/

          font-family:"微软雅黑abc","宋体";

          /*第一个任意改写一个系统不存在的字体，会按照第二个字体显示*/

      }

      ```

 

### 2、font-size

- 作用：设置字体的大小

- 语法：font-size:值

- 常用值：

  - 长度值（通常是像素px）

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

- em

  - 相对单位

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

- ​    一般浏览器默认的大小为16px,支持最小的字体为12px。

### 3、font-style

- 作用：设置字体的样式

- 语法：font-style:值

- 常用值：

  - normal默认值

  - italic斜体显示