一什么是CSS？

CSS是用于描述HTML文档样式我语言，将内容和样式放开。即：美化网页
语法：【选择器】和【一个或多的说明】
（1）选择器：指定将要被设置样式的HTML元素。
（2）说明：使用大括号包裹。每个样式说明包括一个css属性以及该属性对应的值，以冒号分隔。不同样式说明之间使用分号分隔。
如何在网页中插入CSS样式表？
（1）内联样式（Inline Style）。直接在HTML标签中设置。定制性强。
（2）内部样式表（Internal Style Sheet）。使用一个style标签在head中定义。
（3）外部样式表（External Style Sheet）。相同的样式应用于很多个网页时。将样式设置为以.css为文件后缀的一个文件中，使用时使用标签调用这个样式表。
1. link的rel属性：设置为stylesheet。
2. link的type属性：设置为text/css。
3. link的href属性：执行外部样式表的路径
CSS没有限制空格的使用。CSS对字母大小写是不敏感的，但应该注意一点。
内部样式 > 内部样式表 > 外部样式表。

二选择器

选择器是什么？
选择器就是用来精准定位的东西，可以当做是一个门牌号，根据这个门牌号去找到需要装饰的房子。

概述：
CSS选择器分为5类：

基本选择器

复合选择器

伪类选择器

伪元素选择器

属性选择器

基本选择器：
（1）通用选择器：代表符号【*】，能够匹配所有的元素。
1. 语法：*{……}
（2）元素选择器：以某个HTML元素作为选择器。比如：p，h1等
1. 语法：元素{……}
（3）类选择器：使用class给需要相同样式的标签加一个类属性。在设置样式是使用【.类名{}】
1. 语法：.类名{……}
（4） id选择器：使用HTML标签的id属性进行定位，和class差不多。id属性是唯一的，所以它定位到的元素是单个的。在设置样式是使用【#id名{}】
1. 语法：#id名{……}
复合选择器：是由两个或多个基本选择器进行组合，目的：进一步匹配元素。
（1）交集选择器：由两个选择器构成，第一个必须是元素选择器，第二个必须是类选择器或id选择器。
1. 语法：元素选择器.类选择器{……}
2. 语法：元素选择器#id选择器{……}
（2）并集选择器：也叫群组选择器。由两个或两个以上的任意选择器构成。所设置的样式对每个参与的选择器都有效。将不同选择器的样式抽取出来进行统一设置。
1. 语法：选择器1,选择器2,……{……}
（3）后代选择器：也叫包含选择器。用于选择包含在指定选择器匹配的元素中的后代元素。先应用选择器1，再从匹配元素的后代中找出匹配选择器2的元素。选择所有子元素。
1. 语法：选择器1 选择器2 ……{……}
（4）子元素选择器：只选择匹配选择器中的直接后代子元素。
1. 语法：选择器1>选择器2{……} 即：只应用于选择器1的匹配选择器2的直接子元素。
（5）相邻兄弟选择器：如果需要选择紧接在某个元素后面，而且两者有共同的父元素。
1. 语法：选择器1+选择器2{……} 即：紧接在选择器1后面的选择器2才被设置。
（6）通用兄弟选择器：选择器1后面的所有同一级的选择器2都被设置
1. 语法：选择器1~选择器2{……}

概述：
伪选择器：伪元素选择器、伪类选择器。

乱数假文：当我们不知道要说什么时，可以使用乱数假文代替
使用Lorem生成

伪元素选择器：
（1）::first-line选择器：只设置文本块的第一行内容的样式。只对块级元素的第一行有效。也可在::前加限定，只对那个块级元素有效。
（2）::first-letter选择器：用来选中文本块的第一个字符。和上一个类似。
（3）::before和::after选择器：会将content属性的内容插入。content：要插入的内容。
1. 例： a::before{content: “……”; }，也可以插入图片。
2. 例： a::before{content: url(); }
（3）::selection选择器：改变用户选中的部分文本的样式

伪类选择器概述：

动态伪类选择器：
:link、:visited、 hover、:active.、:focus

UI伪类选择器:
:enabled、:disabled、 :checked、 required、 :optional、:default、:valid、 :invalid、
:in-range、 :out- of-range、:read-only、:read-write、 :indeterminate。

结构伪类选择器:
:root、:nth-child、 :nth-last-child、 :nth-of-type、:nth-last- of-type、:first-child、
:last-child、 :first-of-type、:last-of-type、:only-child、 :only-of-type、 :empty

其他伪类选择器;
:target、:lang、 :not

伪类选择器：
（1）动态伪类选择器：根据条件的改变来匹配元素。
1. 用在a标签上：语法：a:link{……}。必须按照以下顺序。简记为【LOVE&HATE】
  1. :link（链接未被访问）
  2. :visited（链接被访问过）
  3. :hover（当鼠标悬停在链接上方的时候）
  4. :active（鼠标按下链接的那一刻）
2. :hover、:active也经常用在div等其他元素上。
3. :focus ：当元素获得焦点时被选中。
（2）UI伪类选择器：人机交互界面，表单元素中。
1. :enabled和:disabled：有些表单元素，比如输入框、密码框、复选框等，都有可用和禁用这两个属性。
2. :checked：使用与单选框，复选框，下拉列表中的选项，选中时的样式。
3. :required、 :optional：适用于必选和可选的元素。
4. :default：选中默认的元素
5. :valid、:invalid：用于检查输入是否合法时改变输入框样式。
6. :in-range、:out- of-range：用于用户输入的数字在范围内和不在范围内时的样式
7. :read-only、:read-write：用于只读和可读可写。给input标签设置为只读或可读可写
（3）结构伪类选择器:
1. :root：只匹配HTML元素。即：整个网页。
2. :empty：匹配那些没有定义任何内容的元素。
3. :first-child、:last-child、 :first-of-type、:last-of-type、:only-child、 :only-of-type：用来设置子元素的选择器。
4. :nth-child(n)、 :nth-last-child(n)、 :nth-of-type(n)、:nth-last- of-type(n)：匹配第n个子元素，
（4）其他伪类选择器：
1. :target：为页面内锚点设置样式。锚点：主要是为了实现在页面内部的跳转。和id属性搭配使用，即：在目标中设置id值，例：<p id="target1">跳转</p> <p><a href="#target2">回到第二个跳转</a></p>
2. :lang：匹配设置了lang全局属性的元素。
3. :not(selector)：也叫否定选择器。可以对任意选择器进行取反操作。即：除了指定的元素之外，其他的都取反。
如何区分伪类选择器和伪元素选择器？
（1）为了格式化文档树之外的信息。
（2）伪类用于当已有元素处于某个状态时，为其添加样式。就是在不添加class属性时实现类的功能。
（3）伪元素用于创建一些不在文档树中的元素，为其添加样式。
属性选择器：可以基于元素的属性进行筛选。语法例：[class=“Wood”]{……}