CSS入门

一，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>标签内，例：

link引入外部样式

2.@import引入（不推荐）：在<style>标签内部进行引入，如下：

import引入样式

此外，import引入方式还可运用在CSS文件中，如下：

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字样标明，浏览器默认样式不能更改，但是可以覆盖，如下图：

谷歌浏览器h1标签默认样式

四，关于文件路径

绝对路径（不推荐使用）：指的是文件所在的完整路径，如果文件上传到服务器因为路径改变有可能会导致文件错误，所以不推荐使用，如下：

文件完整路径

网络路径：网站路径指的是服务器存放网页源代码的路径，通常见到的都是url（统一资源定位符）
例如：

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元素；

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个子元素，但只匹配使用同种标签的元素；

E:nth-of-type(n)

5.★E:nth-chile(n)：与E:nth-of-type(n)类似；

E:nth-chile(n)

6.E:first-of-type：匹配父元素下使用同种标签的的第一个子元素；

E:first-of-type

7.E:last-of-type：匹配父元素下使用同种标签的的最后一个子元素；

E:last-of-type

伪元素选择器
1.E::first-line：匹配E元素内容的第一行；

E::first-line

2.E::first-letter：匹配E元素内容的第一个字符；

E::first-letter

3.★E::before：在E元素前插入生成的内容；

E::before

4.★E::after：在E元素后面插入生成的内容；

Paste_Image.png

属性选择器（因为不常用，只在这里说一下大体语法格式）
格式：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