---
title: 03-CSS样式表和选择器
publish: true
---
## 本文主要内容
- CSS 概述
- CSS 和 HTML 结合的三种方式：`行内样式表`、`内嵌样式表`、`外部样式表`
- CSS 四种基本选择器：`标签选择器`、`类选择器`、`ID选择器`、`通用选择器`
- CSS 几种扩展选择器：`后代选择器`、`交集选择器`、`并集选择器`
- CSS 样式优先级
## 前言
## CSS 概述
CSS：Cascading Style Sheet，层叠样式表。CSS 的作用就是给 HTML 页面标签添加各种样式，**定义网页的显示效果**。简单一句话：CSS 将网页**内容和显示样式进行分离**，提高了显示功能。
css 的最新版本是 css3，**我们目前学习的是 css2.1**。 因为 css3 和 css2.1 不矛盾，必须先学 2.1 然后学 3。
接下来我们要讲一下为什么要使用 CSS。
**HTML 的缺陷：**
1. 不能够适应多种设备
2. 要求浏览器必须智能化足够庞大
3. 数据和显示没有分开
4. 功能不够强大
**CSS 优点：**
1. 使数据和显示分开
2. 降低网络流量
3. 使整个网站视觉效果一致
4. 使开发效率提高了（耦合性降低，一个人负责写 html，一个人负责写 css）
比如说，有一个样式需要在一百个页面上显示，如果是 html 来实现，那要写一百遍，现在有了 css，只要写一遍。现在，html 只提供数据和一些控件，完全交给 css 提供各种各样的样式。
### CSS 的重点知识点
盒子模型、浮动、定位
### CSS 整体感知
我们先来看一段简单的 css 代码：
```html
Document
我是大标题
我是内容
```
解释如下：
我们写 css 的地方是 style 标签，就是“样式”的意思，写在 head 里面。后面的课程中我们将知道，css 也可以写在单独的文件里面，现在我们先写在 style 标签里面。
如果在 sublime 中输入`
```
type 表示“类型”，text 就是“纯文本”，css 也是纯文本。
但是，如果在 sublime 中输入`st`或者`style`然后按 tab 键，可以自动生成的格式如下：（不建议）
```html
```
css 对换行不敏感，对空格也不敏感。但是一定要有标准的语法。冒号，分号都不能省略。
## CSS 语法
**语法格式：**（其实就是键值对）
```html
选择器{ 属性名: 属性值; 属性名: 属性值; }
```
或者可以写成：
```css
选择器 {
k: v;
k: v;
k: v;
k: v;
}
选择器 {
k: v;
k: v;
k: v;
k: v;
}
```
**解释：**
- 选择器代表页面上的某类元素，选择器后一定是大括号。
- 属性名后必须用冒号隔开，属性值后用分号（最后一个属性可以不用分号，但最好还是加上分号）。
- 冒号和属性值之间可以留一个空格（编程习惯的经验）。
- 如果一个属性有多个值的话，那么多个值用**空格**隔开。
**举例：**
```css
p {
color: red;
}
```
**完整版代码举例：**
```html
洗白白
你懂得
我不会就这样轻易的狗带
```
效果：
### css 代码的注释
**格式：**
```html
```
注意：CSS 只有`/* */`这种注释，没有`//`这种注释。而且注释要写在`
洗白白
你懂得
```
### 3、CSS 和 HTML 结合方式三：引入外部样式表 css 文件
**引入样式表文件**的方式又分为两种：
- （1）**采用``标签**。例如：``
- （2）**采用 import**，必须写在`
生命壹号学完了安卓，继续学前端哟