CSS（Cascading Style Sheets，层叠样式表），是开发前端应用必不可少的一个工具。打个比方，HTML5 是身体，那 CSS3 就是穿在身体上的衣服，他让一整个 HTML5 网页变得更美观。下文我们就来整理 CSS~
目录
1. CSS 简介
1.1 CSS 简史
话说在很久以前（比如民国时期），HTML 是单独存在的，跟 CSS 一点关系也没有。但是由于网络的逐渐发展，人们想要用 HTML 写出更多的东西，并且更加美观，于是，HTML2 诞生了（额……）。但是 HTML 添加了很多处理样式的东西之后，变得更加臃肿了。1994 年，哈坤·李提出了结构和样式分离的概念，并与他的好友伯特·波斯一起写出了 CSS。
1995 年，世界第一个 Web 组织 W3C 成立，组织成员们和 CSS 的作者一起标准化了 CSS，也就是 CSS 1.0。同年，CSS 在世界上被广泛使用，并且把 CSS 与 HTML 还有后来的 JavaScript 并称“前端三剑客”。这表明了 CSS 在前端开发时所起的重要性。
1997 年 CSS 2.0 发布，2000 年 CSS 3.0 发布，也就是我们现在常用的 CSS3。（别问我为什么没有 CSS 4.0，你去问 W3C 为什么 4.0 写了 20 年还没写出来）
以上是 CSS 的简史。还有在这要纠正一些同学一下，CSS 并不算是一门编程语言，HTML 也不是（HTML 是标记语言），前端三剑客中只有 JavaScript 属于编程语言。
除此之外 CSS 还有一些扩展模块，如 Less 和 SASS，这些模块对于 CSS 就相当于 C++ 对于 C，功能更强大了。不过我们实际编程一般用不到那么高深，CSS 完全够用。
1.2 CSS 语法
CSS 的语法非常简单，就是简单的 选择器{样式}，示例如下：
body{ /* 选择器 */
background-color: white; /* 样式 */
font-size: 16px; /* 也是样式 */
}而样式的语法就是 属性: 值;，这和 JSON 和 YAML 不能说相似，只能说完全一样啊！只不过注意句尾的分号。所以 CSS 的语法大家完全不用担心。
而如果想在 CSS 里添加注释，则使用 /* 注释内容 */，其中在 /* */ 之间的内容都会被视为注释。
2. CSS 选择器
2.1 选择器简介
刚刚说了 CSS 一整门语言里只有两个东西：选择器和样式，我们先来唠嗑选择器~
选择器，顾名思义就是选择一些东西的工具。在 CSS 中，选择器指定了 CSS 的样式要被作用到哪一个 HTML 元素。
在选择器之前，我们先来看一段 HTML 代码，等一会儿 CSS 会作用在这段 HTML 代码上。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello</title>
</head>
<body>
<h1>Head</h1>
<p id="article1">Article1</p>
<p class="article2and3">Article2</p>
<p class="article2and3">Article3</p>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>里面有一些属性看不懂没关系，等一会会讲解。这个 HTML 一开始长这样：
如果 HTML 还没学可以看看我之前的那片文章：这里。
我们还要认识一个小样式：把字体变为红色，如下：
color: red;我感觉这个样式没学过编程的人应该都懂吧……
2.2 类型选择器
类型选择器，顾名思义就是使用标签的类型来选择 HTML 标签。比如 h 标签，p 标签等。它的实现方式非常简单，就是直接使用类型名来当作选择器，如 p{样式}。举个例子：
h1{
color: red;
}它表明了这个 HTML 文档中所有的 h1 标签都要变成红色。放进浏览器看看效果（同学们由于还没学过 CSS 引入所以先别尝试）：
我们再来尝试把所有的 p 标签变为红色：
p{
color: red;
}丢进浏览器：
效果嘎嘎好~
我们还可以把所有的标签都变成红色，使用 *{样式}:
*{
color: red;
}效果：
2.3 ID 选择器
id 这个选项大家应该都记得（什么？不记得？没做笔记？），当时使用锚链接的时候用到了这个属性。这里 id 有一个不一样的使用方式：作为选择器。
由于一个标签只能有一个 ID，而且这个 ID 在 HTML 文档中始终唯一，所以 id 是一个天生的选择器。它的语法也很简单：#id名{样式}。之前我们给一个 p 标签定义了 id article1，这时候就可以派上用场了：
#article1{
color: red;
}丢进浏览器：
2.4 class 选择器
在实际编程中我们很容易遇见这种情况：两个标签想共用一个样式。有人说可以用两个 id 选择器，但是这样太麻烦。这时候我们就可以使用 class 选择器。我们在需要添加样式的标签加上一个属性 class，数值设为 class名（可以设多个："类名1 类名2 类名3"，中间用空格隔开），比如上面的两个 p 标签：
<p class="article2and3">Article2</p>
<p class="article2and3">Article3</p>class 选择器的语法也很简单：.class名{样式}，下面举个例子：
.article2and3{
color: red;
}丢进浏览器：
2.5 继承选择器
同学们有没有遇见这种情况：想指定 ul 标签下所有的 li 元素，又不想写那么多 class？没关系，继承选择器帮你。继承选择器的语法也非常简单：父标签 子标签{样式}，比如下面：
ul li{
color: red;
}扔进浏览器：
2.6 链接选择器
我们经常会在网页上看到一些链接，当我们鼠标悬浮在链接上面这个链接就会变色。这用到了链接选择器。链接选择器分很多种，如下：
a:link { /* 未访问的链接 */
color: red;
}
a:visited { /* 已访问的链接 */
color: red;
}
a:hover { /* 鼠标悬浮链接 */
color: red;
}其中 a:hover 鼠标悬浮链接最常用。由于我电脑录屏的问题这里就不上效果了，同学们后面可以自己去尝试~
2.7 其它选择器
CSS 中的选择器远远不止这些，还有结构伪类选择器，组合选择器等，这里由于不常用就不赘述了。想了解可以看下面：
还有如果想两个选择器共用一个样式，可以使用逗号操作符，如下：
h1,p{
color: red;
}上效果：
2.8 HTML 导入 CSS
很多同学脑子里就问号挺多：前面学了那么多选择器，自己不能用还学它干嘛？这里教大家导入。 一般来说最简单的方式是新建一个 .css 文件，然后把 CSS 代码写进去，最后在 HTML 的 head 标签里引入。引入方式如下：
<!-- 引入语法：<link rel="stylesheet" type="text/css" href="CSS文件名"> -->
<!-- 假设在同目录下创建了一个 style.css 并已经写好了样式 -->
<link rel="stylesheet" type="text/css" href="style.css"> 如果你想直接在 HTML 文件里写 CSS 代码，可以使用 style 标签。请注意，使用 style 标签是一种不规范的前端开发方法，破坏了 CSS 结构样式分离的原则。所以我们一般不使用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello</title>
<style type="text/css">
/* 这个里面写 CSS 代码，不信你看这个注释的语法 */
h1{
color: red;
}
</style>
</head>
<body>
<h1>Head</h1>
</body>
</html>还有一种更奇葩的 CSS 导入方法：行内样式。我们直接在标签上加入 style 属性，它的值就是 CSS 代码。这样多好！连选择器都省了（手动狗头.jpg）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello</title>
</head>
<body>
<!-- 行内样式 -->
<h1 style="color: red;">Head</h1>
</body>
</html>2.9 样式优先级
CSS 全称层叠样式表，那它为什么是“层叠”样式表呢？说白了就是样式优先级。比如我们在 .css 文件里定义了 p 标签是红色，在 style 里定义了 p 标签是绿色，然后又在行内样式里定义了 p 标签是蓝色，那浏览器最终显示出来是什么颜色？这就涉及到了样式优先级。一般来说，样式优先级如下：
.css < style 标签 < 行内样式也就是最后 p 标签是蓝色。那如果我们在类型选择器里定义了 p 标签是红色，又在 class 选择器中定义了 p 标签是绿色，最后又在 id 选择器里定义了 p 标签是蓝色，那最终显示出来是什么颜色？这又涉及到了样式优先级。一般来说，在同一个 CSS 块（比如 style 标签里）样式优先级如下：
通用选择器(*) < 类型/继承/组合选择器 < class 选择器 < 链接/结构伪类选择器 < id 选择器也就是说 p 标签还是蓝色。别问我哪个深井冰会重复定义那么多样式，别说，当你以后真正去写这东西了，你真的会这么干。
3. CSS 样式
3.1 盒子模型
CSS 的选择器聊完了，我们再来聊样式~ CSS 里普通的样式其实都并不难，最难也最重要的是盒子模型。
盒子模型说难也不难。当你 F12 打开浏览器的开发工具时，你会看见这么一个盒子（什么？你把这个叫盒子？）：
这个盒子有四层，第一层即外边距（margin），代表图中橙色的部分，是透明的；
第二层为边框（border），代表图中黄色的部分，默认是透明的；
第三层为内边距（padding），代表图中绿色的部分，是透明的；
第四层为内容（content），图中蓝色的部分；
这个盒子让网页中的每个元素的样式布局变得更加美观和灵活。它被应用在了 HTML 里的每一个元素。
我们一般对盒子模型进行的一些常用的操作
清空内外边距：我们一般在每一个 CSS 文件里都会使用，它限制了盒子模型的使用范围，只有我们需要的时候才使用它。这是一个 CSS 万能样式，每一个 CSS 文件开头最好都写这个。
*{
margin: 0;
padding: 0;
}(盒子模型：你礼貌吗？刚来就把我的内外边距清空）
定义内外边距：当我们需要盒子模型的内/外边距时，我们可以定义它。如果你只想定义内/外边距的某一部分，如左边，就对应的在属性名之后加上 -left -right -top -bottom。它的单位是 px（pixel，像素）别忘写。
/* 定义内边距 */
padding: 30px;
/* 定义外边距 */
margin: 30px;
/* 里面的 30px 可以换成任何数值，只要结尾带 px */居中显示标签：当我们想要将一个标签居中显示，也可以曲线用到盒子模型中的外边距。把 margin 设为 0 auto 即可，如下：
margin: 0 auto;
/* 上面的 0 可以换成任何数值，它代表这个元素的上下外边距 */由于 auto 代表这个元素的左右外边距，而 auto 相当于把元素的左右外边距交给浏览器定义，所以浏览器就自动帮我们居中元素啦~
边框实线：默认边框是不显示的，那我们想让它显示怎么办？那就给盒子模型中的边框样式变为 solid，让它显示出来。我们还可以操控边框的粗细和颜色，具体看下面：
border-style: solid; /* 给边框加上实线 */
border-color: yellow; /* 给边框实线定义颜色 */
border-width: 1px; /* 给边框实线定义粗细，要加 px */边框圆角：默认的元素是一个标准长方形，直愣愣的，我们想让它圆角，怎么办？还是得操控盒子模型中的边框，给它加上圆角。
border-radius: 10px; /* 后面的数值表示圆角的大小，要加 px */盒子模型的难点在于比较抽象，但是只要理解了它，后面的内容就都很简单了。
3.2 Background 背景
现在我们学点简单的，就背景把~
背景（Background），顾名思义它代表元素的背景。它的作用范围是盒子中的内边距部分和内容部分。我们一般对背景的操作很简单：设置背景颜色和背景图片。
设置背景颜色：这个很简单，使用 background-color 样式即可。颜色可以使用它自带的如 red blue yellow 等，自带的颜色范围还是很广的。
background-color: red;那如何让背景颜色更神仙呢？这里再提供一个超好用的取色器网站：HTMLColorCodes，左边选好颜色后右边那串十六进制数字就是颜色（如 3F923A），在 CSS 中加上 # 号然后使用就行，比如下面：
background-color: #3F923A;
还有如果满足不了纯色，可以尝试一个渐变色网站：Grabient。这个网站里有很多神仙渐变色，大师们已经预先调制好，而且一复制就是 CSS 代码，非常 nice。
设置背景图片：也很简单，使用 background-image 样式即可。当然比例要控制好，不然到时候显示出来的是人是鬼我也不知道~
background-image: url("image.png");
/* image.png 换成图像的 url */3.3 Text 文本
设置文本颜色：这应该是文本最常用的样式了，直接使用 color: 颜色就可以。颜色的调制可以使用之前提供的 HTMLColorCodes 调色器，但是不支持渐变色~
color: red;
/* red 可以换成任何你想要的颜色 */设置文本居中：可以使用 text-align 样式。而且这个样式不仅可以文本居中还可以左对齐右对齐。
text-align: center; /* 居中 */
text-align: left; /* 左对齐 */
text-align: right; /* 右对齐 */设置文本上下居中：使用 line-height 属性，让 line-height 属性和 HTML 的元素高一样就可以了。当然这个方法仅适用于一行文本，多行文本就没办法了~
/* 比如这个 HTML 元素的高是 30px */
line-height: 30px;设置文本样式：这是一个很好用的样式，比如它可以去掉链接自带的下划线，样式是 text-decoration，代码如下：
text-decoration: none;我们还可以用这个样式给普通的文字加上上划线，中划线和下划线（至于中划线是什么你可以自己尝试）
text-decoration: overline; /* 上划线 */
text-decoration: line-through; /* 中划线 */
text-decoration: underline; /* 下划线 */第一行文本缩进：就是平时写作文时常用的自然段前空两格，只不过单位改成了像素~
text-indent: 50px;3.4 Font 字体
指定字体：这个样式指定了选中的文字使用什么字体。还可以定义多种字体，计算机会依次尝试字体，直到该字体能在设备上正常显示为止。如果设备上都没有这些字体，那就会使用默认字体。
font-family: "SF Pro"; /* 指定一种字体 */
font-family: "PingFang SC", "微软雅黑", "等线"; /* 指定多种字体，字体之间用逗号隔开 */指定字体大小：单位 px~
font-size: 16px;指定字体样式：只能设置斜体，粗体需要给文本套上 strong 标签才能实现。
font-style: italic; /* 一种设置斜体的方法 */
font-style: oblique; /* 另一种设置斜体的方法 */就不理解斜体方法都两个了，为什么还是没有粗体方法呢~
3.5 List 列表
指定列表标头样式：ul 的每个 li 前面都会有一个圆形，那我们想把它换成正方形怎么办？用这个样式~
list-style-type: square;表格样式：由于用的不多，这里直接放链接：Table 表格
3.6 Display 显示
前面讲了那么多简单的 CSS 样式，终于来一个难的了~
在 HTML 里，元素分为两类：行内元素和块元素。行内元素，就是常用的 strong em 这些元素。这些元素可以在一行之内显示，只不过不能设置高度，高度全凭文本的长度~
而块元素，就是 p div 这些元素，它们可以设置长宽，但是不能在一行显示。
懂了上面这些，就可以开始学习 Display 了。
div 标签与 span 标签：这是两个 HTML 标签，分别表示一个空的块元素和一个空的行内元素，它们的作用就是当作空盒子，简化排版布局，让 CSS 选择更容易（所有元素都可以加上 class 和 id 属性）
设置 display：我们可以通过设置 display 属性来选择这个元素是块元素还是行内元素，如下：
display: inline; /* 行内元素 */
display: block; /* 块元素 */那如果你又想设置元素的长宽又想让它们在一行显示，那怎么办呢？这时候我们就需要用到 display 的 inline-block 值，让元素既有 inline 的特性在一行内显示，又有 block 的特性可以改变长宽。代码如下：
display: inline-block隐藏元素：可以设置 display 属性为 none，如下：
display: none;由于上面的代码相当于让元素消失了，也就是不占用 HTML 文档的空间。那如果我们只是想让他不显示，但是同样占用 HTML 空间呢？那可以使用 visibility 样式，设置值为 hidden（隐藏）。
visibility: hidden;那如果你只是想让这个元素变透明，不想完全隐藏，怎么办呢？可以使用 opacity 属性设置透明值，0.0 - 1.0 之间，数值越小元素越透明。
opacity: 0.4;设置长宽：前面说了那么多设置宽度和高度，那它们到底怎么设置呢？看下面代码。记得 px 一定要写上。
width: 300px; /* 宽度 */
height: 200px; /* 高度 */3.7 Position 定位
定位是 CSS 中的两大难点之一，还有一个是后面的浮动。定位，顾名思义就是设置元素在 HTML 文档中的位置。定位有两种：相对定位和绝对定位。
相对定位：顾名思义就是改变元素对于自己的位置，简单来说，就是上下左右移动元素。在移动之前，我们先启用相对定位功能，不启用功能没法移动：
position: relative;启用这项功能不会对原位置发生任何变化。然后我们可以使用 top 上移元素，bottom 下移元素，left 左移元素，right 右移元素。这里需要强调的一点是数字之前必须加负号 -，不然移动的方向会相反。还有要加 px。下面举个栗子：
right: -30px;绝对定位：这个定位就有点厉害了，可以直接定位你在 HTML 文档中的绝对位置，像比如一些网页一直停在右下角的“回到顶部”，就是用绝对定位实现的。当然绝对定位也可以定位在父元素中的位置，但是要求父元素也启用绝对定位或是相对定位。一般需要这项功能可以给父元素启用相对定位，对父元素没有任何影响。首先我们要先启用绝对定位：
position: absolute;然后这个元素就被移到了相对于 HTML 文档或是父元素的左上角，并且不占用 HTML 文档的任何空间。然后使用 top 定义这个元素相对于 HTML 文档或是父元素的 y 轴位置（x y 轴没学过可以百度），用 left 定义这个元素的 x 轴位置。单位 px，不用加负号。
left: 100px;
top: 200px;3.8 Float 浮动
浮动也是 CSS 中的两大难点之一，其难度可以说是 CSS 之首。一个 div 元素，中间嵌套着很多 inline-block，正常应该是这样显示的：
但是如果我们想让元素1移动到最右边呢？有同学说可以用定位来实现，但是它太麻烦了，需要测量需要移动的长度。这时候我们就可以使用浮动来实现。浮动，简单来说，可以把嵌套 inline-block 的 div 元素看作一个栓气球的绳子，把 inline-block 看作气球，那浮动就是把气球脱离绳子的束缚飘到一边。被浮动的元素它在浏览器上已经不属于 div，但是代码上还是属于的~
左浮/右浮元素：这个很简单，使用 float 样式：
float: right; /* 右浮 */
/* float: left; 左浮 */浮动后浏览器就变成这样：
我们可以看到元素 1 跑到了最右边~
解决父级边框塌陷问题：刚刚说了被浮动的元素它在浏览器上已经不属于 div，所以当 div 里所有元素都浮动之后，这个 div 里面什么都没有，就会塌陷，具体看图：
可以看到上面这个 div 由于没有了内容已经塌陷。那如何解决这个问题呢？有人说可以给 div 指定高度，但这样非常不灵活。这个问题我们有很多方法，这里只列出效果最好的一个：伪类 after 法。原理是啥网上可以自己搜搜，因为我自己也不知道（T-T）代码如下：
#father:after{ /* 这里的 #father 换成指向父类的选择器 */
content: '';
display: block;
clear: both;
}效果因浏览器而异，有些浏览器可能不支持，但我的支持~
3.9 Overflow 溢出
CSS 马上就要完结撒花啦~ 当然在撒花之前还有一个芝士点~
在开发网页时，经常会出现一（或几个加在一起）个元素的长宽比它的父元素还大，那多出来的这一部分就叫溢出。如果溢出没有处理妥当会产生不可预期的结果。一般我们处理溢出的方式有两种：隐藏溢出和滚轮法。
隐藏溢出：很好理解，就是隐藏溢出的部分。下面给出代码：
overflow: hidden;上效果：
滚轮法：顾名思义就是在元素旁边加一个滚轮，以便上下浏览内容。你可以选择在底部或右边增加滚轮，也可以全部增加。代码如下：
overflow-x: scroll; /* 在底部增加滚轮 */
overflow-y: scroll; /* 在右边增加滚轮 */
/* overflow: scroll; 在底部和右边增加滚轮 */效果：
我们如果需要智能判定这个元素需不需要滚轮，可以把上面的 scroll 换成 auto，这样如果溢出了就自动添加滚轮，如果没有溢出就不添加。这个方法非常 nice~
4. 总结
CSS 其实真的不难，只有选择器和样式两个语法点（两个语法点就写了快 10000 字这事别在意）。学完了就可以开始 JavaScript 6 和 React.js 框架了（React.js 是目前比较流行的一个 JS 前端开发框架，与他相似的有 Vue.js 和 Angular.js 等。我个人推荐 React.js + Ant Design 组合（Ant Design 是阿里巴巴的一个组件库，里面原生自带很多好看的元素））
但是由于后面要考计算机二级 C++ 的原因（自己报的名，未满 18 岁也能报），后期要开始卷 C++ 和算法，初中学业负担也比小学重很多，所以可能不会那么快出 JavaScript 6 和 React.js。总之，前端系列敬请期待！