目录
1. CSS 简介
1.1. CSS 简介
1.1.1. CSS 是什么？
1.1.2. CSS 和 CSS3
1.2. CSS 引入方式
1.2.1. 外部样式表
1.2.2. 内部样式表
1.2.3. 行内样式表
1. CSS 简介
1.1. CSS 简介
1.1.1. CSS 是什么？
CSS，指的是Cascading Style Sheet（层叠样式表），是用来控制网页外观的一门技术。前端最核心的3个技术是：HTML、CSS、JavaScript，
三者关系：
HTML 用于控制网页的结构；
CSS 用于控制网页的外观；
JavaScript控制的是网页的行为。
在互联网发展早期，网页都是用 HTML 来做的，这样的页面可想而知单调成什么样了。
为了改造 HTML 标签的默认外观，使得页面变得更加美观，后来就引入了 CSS。
1.1.2. CSS 和 CSS3
CSS 发展至今，历经 CSS1.0、CSS2.0、CSS2.1 以及 CSS3.0 几个版本。其中，CSS2.1 是 CSS2.0 的修订版，CSS3.0 是 CSS 的最新版本。
很多人都有一个疑问："现在都 CSS3 的时代了，CSS2 不是被淘汰了吗，为什么还要学 CSS2呢？"
这个误区非常严重，曾经误导绝大多数的初学者。其实，我们现在所说的 CSS3，一般指的是相对于 CSS2 "新增加的内容"，并不是说 CSS2 被淘汰了。
准确来说，你要学的 CSS 其实等于 CSS2 加上 CSS3。
1.2. CSS 引入方式
三种方式：
外部样式表
内部样式表
行内样式表
1.2.1. 外部样式表
外部样式表是最理想的 CSS 引入方式。
在实际开发中，为了提升网站的性能速度和可维护性，一般都是使用外部样式表。所谓的外部样式表，指的是把 CSS 代码和 HTML 代码都单独放在不同文件中，然后在 HTML 文档中使用 link 标签来引用 CSS 样式表。
当样式需要被应用到多个页面时，外部样式表是最理想的选择。使用外部样式表，你就可以通过更改一个 CSS 文件来改变整个网站的外观。
创建一个 CSS 文件很简单，就像创建 HTML 文件一样。
外部样式表在单独文件中定义，然后在 HTML 文件的标签对中使用link标签来引用。
语法：
rel 即 relative 的缩写，它的取值是固定的，即 stylesheet 表示引入的是一个样式表文件（即 CSS 文件）。
type 属性取值也是固定的，即 "text/css"，表示这是标准的 CSS。
href 属性表示 CSS 文件的路径。对于路径，相信小伙伴们已经很熟悉了。
举例：
分析：
如果你使用外部样式表，必须使用 link 标签来引入，而 link 标签是放在 head 标签内的。
1.2.2. 内部样式表
内部样式表，指的是把 HTML 代码和 CSS 代码放到同一个 HTML 文件中。其中 CSS 代码放在 style 标签内，并且 style 标签是放在 head 标签内部的。
语法：
说明：
type="text/css" 是必须添加的，表示这是标准的 CSS。
举例：
分析：
如果你使用内部样式表，CSS 样式必须在 style 标签内定义，而 style 标签是放在 head 标签内的。
1.2.3. 行内样式表
行内样式表跟内部样式表类似，也是把 HTML 代码和 CSS 代码放到同一个 HTML 文件。但是两者有着本质的区别：
内部样式表的 CSS 是在 "style 标签" 内定义的；
行内样式表的 CSS 是在 "标签的 style 属性" 中定义的。
举例：
分析：
大家将这个例子和前面一个例子对比一下，就知道两段代码实现的效果是一样的，都是定义 3 个 div 元素的颜色为红色。如果使用内部样式表，样式只需要写一遍；但是如果使用行内样式，则每个元素要单独写一遍。
行内样式是在每一个元素内部定义的，冗余代码非常多，并且每次改动 CSS 的时候，必须到元素中一个个去改，这样会导致网站的可读性和可维护性非常差。
为什么我们一直强烈不推荐使用 Dreamweaver "点点点"的方式来开发页面？就是因为这种方式产生的页面代码中，所有的 CSS 样式都是行内样式。
对于这三种样式表，在实际开发中，一般都是使用外部样式表。
举例：
Gok
Gok