CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称。
CSS 是一种标记语言，属于浏览器解释型语言，可以直接由浏览器执行，不需要编译。
CSS 是用来表现HTML或XML的标记语言。
CSS语法由三部分构成：选择器、属性和值： selector {property: value}
CSS3 是最新的 CSS 标准。
css3比css多了一些样式设置而已。 css3是向前兼容的，也就是说，css中有效的code在css3也有效。
CSS3新增属性
box-shadow(阴影效果)
border-colors(为边框设置多种颜色)
boder-image(图片边框)
text-shadow(文本阴影)
text-overflow(文本截断)
border-radius(圆角边框)
opacity(不透明度)
box-sizing(控制盒模型的组成模式):指定两个boxes接壤
resize(元素缩放):指定一个div元素，允许用户调整大小
outline(外边框)
background-origin(指定背景图片从哪里开始显示)
background-clip(指定背景图片从什么位置开始裁切)
background(为一个元素指定多个背景)
SCSS 是一种被中断或编译成 CSS 的预处理器语言。它是一种特殊类型的 SASS(Syntactically Awesome Style Sheets)。SCSS 的脚本是在 Saasscript 中完成的。SCSS 包含 CSS 的所有功能，还添加了一些额外的特殊功能。
一、CSS的选择器
1、多（类）选择器
（1）类或标签
选择class=“cla1 cla2 cla3”的标签，改变【内容3】
<div class="cla1">
内容1
</div>
<div class="cla1 cla2">
内容2
</div>
<div class="cla1 cla2 cla3">
内容3
</div>
.cla1.cla2.cla3 {
width: 100%;
}
（2）标签与类的组合
<table class="cla1 cla2">
内容
</table>
table.cla1.cla2 {
width: 100%;
}
2、群组选择器
（1）类或标签
选择含有cla1、cla2、cla3任一个class的标签，改变【内容1】、【内容2】、【内容3】
<div class="cla1">
内容1
</div>
<div class="cla1 cla2">
内容2
</div>
<div class="cla1 cla2 cla3">
内容3
</div>
.cla1, .cla2, .cla3 {
width: 100%;
}
（2）标签与类的组合
<div class="cla1">
内容1
</div>
<div class="cla2">
内容2
</div>
<table>
内容3
</table>
table, .cla1, .cla2 {
width: 100%;
}
3、相邻选择器
（1）类或标签
选择cla1后面紧接的cla2（同一父级），改变【内容2】
<div class="cla0">
<div class="cla1">
内容1
</div>
<div class="cla2">
内容2
</div>
</div>
.cla1 + .cla2 {
width: 100%;
}
（2）标签与类的组合
<div class="cla0">
<h1>
内容1
</h1>
<div class="cla1">
内容2
</div>
</div>
h1 + cla1 {
width: 100%;
}
4、子代(类)选择器
（1）类或标签
选择 cla1>cla2>cla3 这种嵌套结构的全部cla3标签（直接后代），改变【内容1】
<div class="cla1">
<div class="cla2">
<div class="cla3">
内容1
<div class="cla3">
内容2
</div>
</div>
</div>
</div>
.cla1
>.cla2
>.cla3 {
width: 100%;
}
（2）标签与类的组合
<table>
<div class="cla1">
<td>
内容
</td>
</div>
</table>
table
>.cla1
>td {
width: 100%
}
5、后代(类)选择器
（1）类或标签
选择 cla1后代里面的全部cla3标签 （不管后代嵌套得有多深），改变【内容1】、【内容2】
<div class="cla1">
<div class="cla2">
<div class="cla3">
内容1
<div class="cla3">
内容2
</div>
</div>
</div>
</div>
.cla1 .cla3 {
width: 100%;
}
（2）标签与类的组合
<div class="cla1">
<td>
<h1>
内容
</h1>
</td>
</div>
.cla1 h1 {
width: 100%;
}
6、伪类选择器
伪类必须配合正常的类来使用，改变未访问的链接【内容】
<a> 内容 </a>
a:link {
color: #fff
}
二、SCSS的选择器
1、多（类）选择器
.cla1 {
&.cla2.cla3 {
width: 100%;
}
}
.cla1.cla2.cla3 {
width: 100%;
}
2、群组选择器
.cla1 {
&, .cla2, .cla3 {
width: 100%;
}
}
.cla1, .cla2, .cla3 {
width: 100%;
}
3、相邻选择器
.cla1 {
& + .cla2 {
width: 100%;
}
}
.cla1 + .cla2 {
width: 100%;
}
4、子代（类）选择器
.cla1 {
>.cla2>.cla3 {
width: 100%;
}
}
//或者是从子类写到父类（根据自己实际需要）
.cla2 {
.cla1>&>.cla3 {
width: 100%;
}
}
.cla1>.cla2>.cla3 {
width: 100%;
}
5、后代（类）选择器
.cla1 {
.cla3 {
width: 100%;
}
}
//或者是从子类写到父类（根据自己实际需要）
.cla3 {
.cla1 & {
width: 100%;
}
}
.cla1 .cla3 {
width: 100%;
}
6、伪类选择器
a {
&:link {
color: #ffffff;
}
}
a:link {
color: #ffffff;
}
7、自定义类（BEM）的选择
//以前的用法
.cla {
@at-root #{
&}1 {
width: 100%;
}
@at-root #{
&}2 {
width: 100%;
}
}
//新支持的用法（后面最好不要跟【标签】或【属性】名）
.cla {
&1 {
width: 100%;
}
&2 {
width: 100%;
}
}
.cla1 {
width: 100%;
}
.cla2 {
width: 100%;
}
8、属性的选择
.cla1 {
border: {
width: 1px;
style: soild;
color: #ffffff;
}
}
.cla1 {
border-width: 1px;
border-style: soild;
border-color: #ffffff;
}