一，CSS是什么？
- 定义：CSS全称是层叠样式表；
- 作用：为页面内容设置好看的模样，在整个页面中，CSS就像是人的外表一样重要；
- 语法规范：CSS由选择器，属性，值组成，其中属性和值用大括号包裹，以分号结尾。
例如：h1{ color: red; };其中h1是选择器，color是属性，red是值； - CSS注释：CSS的注释格式是：
/* 注释的语句 */;被注释的语句不会生效；
二，CSS引入方式的介绍（3种）
- 内联样式：在标签内使用style属性引入（不推荐），例：
<h1 style='color: red;'>666666</h1> - 内部样式：在<style>标签内书写样式（不推荐），例：
- 外部样式：在HTML文档外创建.css文件，并通过
<link>标签或者@import引入：
1.<link>标签引入（推荐用法），<link>标签引入.css文件时最好写在<head>标签内，例：
2.
@import引入（不推荐）：在<style>标签内部进行引入，如下：
此外，import引入方式还可运用在CSS文件中，如下：
★：<link>标签引入和<@import>引入方式的不同点
-
link是HTML标签，@import是CSS语法，同时，link标签还可用于载入其它资源而@import不能； -
link引入的样式文件可以进行异步加载，而@import引入需要页面加载内容完成才加载，这样有可能因为加载失败导致白屏问题； -
link是HTML标签，不存在兼容性问题，而@import是CSS样式，在低版本IE不能用； -
link支持JS控制DOM改变样式，而@import不支持；
综上所述，不推荐使用@import引入CSS样式
三，开发者工具和浏览器默认样式
- 开发者工具：开发者工具可以在页面单击右键点检查选项打开，下图是它的模样：
在Elements中可以看到该网页的HTML和CSS样式。
- 浏览器默认样式
浏览器默认样式是指在未设定样式是，浏览器默认自带的样式，每个浏览器的默认样式都有可能不同，并且在默认样式旁边都会带有user agent stylesheet字样标明，浏览器默认样式不能更改，但是可以覆盖，如下图：
四，关于文件路径
- 绝对路径（不推荐使用）：指的是文件所在的完整路径，如果文件上传到服务器因为路径改变有可能会导致文件错误，所以不推荐使用，如下：
- 网络路径：网站路径指的是服务器存放网页源代码的路径，通常见到的都是url（统一资源定位符）
例如：
-
★ 相对路径：推荐使用，即使该路径放上服务器也不会出错
1.css/XXX.css
指当前目录下文件夹css中的XXX.css；
2../css/XXX.css
同上，但不同的是，该写法是严格模式写法；
3.XXX.css
指当前文件夹下的XXX.css文件；
4.../imgs/XXX.png
指上级文件夹下的imgs文件夹里的XXX.png文件；
五，CSS书写规范
- 统一小写；
- 不要使用内联的style属性去定义样式，错误范例：
- 标签的id或者class使用有意义的词语，不要像下面这样：
- 尽可能用缩写，如下代码：
- 块内容缩进，如下图，箭头所指就是缩进：
★六，关于CSS选择器
- 总概：一共有五中选择器：1.基础选择器；2.组合选择器；3.属性选择器；4.伪类选择器；5.伪元素选择器
下面就一一来介绍他们的用法： - 基础选择器：
1.*：通用选择器：适用于页面所有标签的样式，范围太广所以很少使用；
2.
#id：id选择器：匹配特定的id元素；
3.
.class：类选择器：匹配特定的class元素；
4.
element：标签选择器：直接使用标签名称进行样式设定；
- 组合选择器
1.E,F：多元素选择器：可同时设置多个元素的相同样式:
2.E F：后代选择器：可设置E元素包裹下所有F元素的样式：
3.E>F：子元素选择器：设置E元素包裹下的直接后代F，孙后代不能被选中：
4.E+F：直接相邻选择器：该选择器匹配E元素之后的相邻同级元素F：
5.E~F：普通相邻选择器：匹配E元素之后的同级元素F（无论相邻与否）：
- 伪类选择器
★1.a标签的四种状态：
①：a:link（未被访问状态），②：a:visited（访问后的状态），③：a:hover（鼠标悬停状态），④：a:active（正被点击状态）；
2.顺序排列：link，visited，hover，active，
3.顺序排列的原因：
就近原则的原因，因为CSS加载的顺序是从上到下的，所以写在后面的优先级相同的选择器样式会覆盖前面的样式，而link是未被访问状态，visited是访问过后状态，hover鼠标悬停状态，active正在被点击状态。在鼠标未点击时，a链接是处于link状态，采用link样式，而点击后是visited和link状态，此时采用的应该是visited状态，所以link写在visited前面。同理，鼠标悬停在a链接时是hover，link和visited状态，而hover如果写在link和visited前面的话，hover的样式就会被覆盖，所以hover要写在link，visited后面。而点击时，a链接处于hover，active，link，visited状态，active写在前面就会被其它三种覆盖，所以active写在最后。
2.E:enabled和E:disabled:匹配表单中可用（enabled）和禁用（disabled）的元素；
PS：禁用表单元素可以用disabled属性设定，没有这个属性的都是enabled元素，如下：
3.E:checked：匹配表单中的radio或者checkbox元素；
4.★E:nth-of-type(n)：匹配父元素的第n个子元素，但只匹配使用同种标签的元素；
5.★E:nth-chile(n)：与E:nth-of-type(n)类似；
6.
E:first-of-type：匹配父元素下使用同种标签的的第一个子元素；
7.E:last-of-type：匹配父元素下使用同种标签的的最后一个子元素；
- 伪元素选择器
1.E::first-line：匹配E元素内容的第一行；
2.
E::first-letter：匹配E元素内容的第一个字符；
3.★
E::before：在E元素前插入生成的内容；
4.★
E::after：在E元素后面插入生成的内容；
- 属性选择器（因为不常用，只在这里说一下大体语法格式）
格式：E[abcd]：匹配所有有属性abcd的元素；
七，选择器优先级
由高到低排列：
1.属性后+！importangt
2.内联样式：style='color: red';
3.id选择器：#id
4.类选择器：.class
5.伪类选择器：a:link
6.属性选择器：h1{}
7.标签选择器：p[XXX]
8.通用选择器：*选择器优先级的计算
1.先设定初始值为万位数：0，0，0，0，0；
2.加了!important，在第一位0加上1（1，0，0，0，0）；
3.内联样式在第二位0加上1（0，1，0，0，0）；
4.id选择器在第三位0加上1（0，0，1，0，0）；
5.类选择器在第四位0加上1（0，0，0，1，0）；
6.伪类和属性选择器与类选择器一样；
7.标签选择器在第五位0加上1（0，0，0，0，1）；
PS：上述所有选择器，每有一个就给它相应位置的0加上1，也就是说当有两个时，它的权值是相应位置的0加上2
