CSS
1.1 CSS 编写的位置
使用CSS来修改元素的样式
第一种方式：内联样式/行内样式
第二种方式：内部样式表
第三种方式：外部样式表(最佳实践)
1.1.1 内联样式
在标签内部通过style属性来设置元素的样式
问题:
使用内联样式，样式只能对一个标签生效，
如果希望影响到多个元素必须在每一个元素中都复制一遍
并且当样式发生变化时，我们必须要个一个的修改， 非常的不方 便
注意:开发时绝对不要使用内联样式
<p style="color: red; font-size: 60px;">少小离家老大回，乡音无改鬓毛衰</p>
1.1.2 内部样式表
将样式编写到head中的style标签里，然后通过css的选择器来选中元素并为其设置各种样式，可以同时为多个标签设置样式，并且修改时只需要修改一处即可，内部样式表更加方便对样式进行复用
问题:
我们的内部样式表只能对一个网页起作用，
它里边的样式不能跨页面进行复用
<!-- 位置+{} 为CSS选择器 --> <styLe> p{ coLor: aqua; font-size: 20px ; } </styLe>
1.1.3 外部样式表
可以将CSS样式编写到一个外部的CSS文件中，然后通过link标签来引入外部的CSS文件，外部样式表需要通过link标签进行引入，意味着只要想使用这些样式的网页都可以对其进行引用，使样式可以在不同页面之间进行复用，将样式编写到外部的CSS文件中，可以使用到浏览器的缓存机制，从而加快网页的加载速度，提高用户的体验。
<!--test.css--> p{ coLor: aqua; font-size: 20px ; }
<head> <link rel="styLesheet" href="test. css"> </head>
1.2 常用的选择器
1.2.1 简单选择器
1.2.1.1 元素选择器
元素选择器
作用：根据标签名来选中指定的元素
语法：标签名{}
<!--HTML；--> <p > test </p> <!--CSS：--> p{color:blue;}
1.2.1.2 id选择器
id选择器
作用：根据元素的id属性值选中一个元素
语法：#id{}
<!--HTML；--> <p id="box"> test </p> <!--CSS：--> #box{color:blue;}
1.2.1.3 class选择器（主要使用）
类选择器
作用：根据元素的class属性值选中一组元素
语法：.class属性值
<!--HTML；--> <p class="one"> test </p> <!--CSS：--> .one{ color:blue; }
1.2.1.4 通配选择器
通配选择器
作用：选中页面中的所有元素
语法：*
<!--CSS：--> *{ color:blue; }
1.2.1.5 属性选择器（使用较多）
[属性名]：选择含有指定属性的元素
[属性名=属性值]：选择含有指定属性和属性值的元素
[属性名^=属性值]：选择属性值以指定值开头的元素
[属性名$=属性值]：选择属性值以指定值结尾的元素
[属性名*=属性值]：选择属性值中含有某值的元素的元素
<!--CSS：--> div[id="box"]{ color:blue; }
1.2.2 复合选择器
1.2.2.1 交集选择器
交集选择器
作用：选中同时复合多个条件的元素
语法：选择器1选择器2选择器3选择器n{}
注意点：交选择器中如果有元素选择器，必须使用元素选择器开头。
<!--HTML；--> <p class="one"> test </p> <!--CSS：--> div.one{ font -size: 30px; }
1.2.2.2 并集（分组）选择器
选择器分组(并集选择器)
作用：同时选择多个选择器对应的元素
语法：选择器1 ,选择器2 ,选择器3，选择器n{}
<!--HTML；--> <p class="one"> test01 </p> <p class="two"> test02 </p> <!--CSS：--> div,.one,.two{ font -size: 30px; }
1.2.3 关系选择器
父元素：直接包含子元素的元素叫做父元素
子元素：直接被父元素包含的元素是子元素
祖先元素：直接或间接包含后代元素的元素叫做祖先元素，一个元素的父元素也是它的祖先元素。
后代元素：直接或间接被祖先元素包含的元素叫做后代元素，子元素也是后 代元素。
兄弟元素：拥有相同父元素的元素是兄弟元素
1.2.3.1 子类选择器
子元素选择器
作用：选中指定父元素的指定子元
语法：父元素>子元素
<!--HTML；--> <div class="box"> <span class="test"> test02 </div> </div> <!--CSS：--> div.box > span{ color: orange; }
1.2.3.2 后代选择器
后代元素选择器:
作用：选中指定元素内的指定后代元素
语法：祖先 后代
<!--HTML；--> <div class="box01"> <span class="test"> test01 </div> </div> <div class="box02"> <span class="test"> test02 </div> </div> <!--CSS：--> div span{ color: orange; }
1.2.3.3 兄弟元素选择器
选择当前元素的下一个兄弟：当前+下一个
(如果二者之间隔得有元素 则无效)
h1 + p { color: orange; }
选择下面所有兄弟
h1 ~ p { color: orange; }
1.2.4 伪类选择器
伪类：
一种不存在的类，特殊的类。用来描述一个元素所处的特殊状态。
例如：
第一个子元素 （由于前面可能会加新的子元素，所以第一个子元素是不定的不存在的）；鼠标光标移入的元素。
伪类一般情况下都是使用:（冒号）开头
例如：
:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child()选中第n个子元素
特殊值:
n 第n个 n的范围 0到正无穷
2n 或 even 表示选中偶数位的元素
2n+1 或 odd 表示选中奇数位的元素
以上这些伪类都是根据所有的子元素进行排序
:first-of-type
:last-of-type
:nth-of-type( )
这几个伪类的功能和上述的类似，不同点是他们是在同类型元素中进行排序
:not()否定伪类
将符合条件的元素从选择器中去除
超链接的伪类：
:link 超链接独有
作用：用来表示没有被点击过的链接
:visited 超链接独有
作用：表示访问过的链接，由于隐私的原因，所以visited这个伪类 只能修改链接的颜色。
:hover 可以绑定其他元素 如div ul nav啥的
作用：用来表示鼠标移入的状态
:active
作用：用来表示鼠标点击
1.2.4 伪类选择器
伪元素：表示页面中一些特殊的并不真实的存在的元素。
伪元素使用::开头
例如：
::first-letter 表示第:一个字母
::first-line 表示第一行
::selection表示选中的内容
::before 元素的开始
::after元素的最后
before和after 必须结合content属性来使用
1.2.5 选择器的权重（优先级）
权重计算规则
第一等：代表内联样式，如: style=””，权值为1000。
第二等：代表ID选择器，如：#content，权值为0100。
第三等：代表类，伪类和属性选择器，如.content，权值为0010。
第四等：代表元素选择器和伪元素选择器，如div p，权值为0001。
通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
继承的样式没有权值。
比较规则：
1,0,0,0 > 0,99,99,99，也就是说从左往右逐个等级比较，前一等级相等才往后比。
1， 0 ， 0， 0
0, 99 ， 99 ， 99
