> 本文最初于2015-10-03发表于[博客园](http://www.cnblogs.com/smyhvae/p/4853995.html)，并在[GitHub](https://github.com/qianguyihao/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。
## 本文主要内容
- CSS概述
- CSS和HTML结合的三种方式：`行内样式表`、`内嵌样式表`、`外部样式表`
- CSS四种基本选择器：`标签选择器`、`类选择器`、`ID选择器`、`通用选择器`
- CSS几种扩展选择器：`后代选择器`、`交集选择器`、`并集选择器`
- CSS样式优先级
## 前言
现在的互联网前端分三层：
- HTML：超文本标记语言。从**语义**的角度描述页面**结构**。
- CSS：层叠样式表。从**审美**的角度负责页面**样式**。
- JS：JavaScript。从**交互**的角度描述页面**行为**。
## 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**，必须写在`
生命壹号学完了安卓，继续学前端哟