CSS简介及选择器

网页分为三个部分：
结构（html）
表现(css)
行为(javascript)
css：
-层叠样式表
-网页实际上是一个多层的结构，通过CSS可以分别为网页的每一个层来设置样式，而最终我们能看到只是网页的最上边一层。
-总之一句话，css用来设置网页中元素的样式

使用css来修改元素的样式：
第一种方式：内联样式/行内样式
-在标签内部通过style属性来设置元素的样式。
-内部不属于html，应遵循css语法规范。
**问题：**使用内联样式，样式只能对一个标签生效。如果希望影响到多个元素必须在每一个元素中都复制一遍。
并且当样式发生变化时，我们需要一个一个的修改，非常不方便。
注意：开发时绝对不要使用内联样式。

少小离家老大回，乡音无改鬓毛衰。

第二种方式：**内部样式表**
                      -将样式编写到head中的style标签里
                     然后通过css的选择器来选中元素并为其设置各种样式。
                    可以同时为多个标签设置样式，并且修改时只需要修改一处即可全部应用。
                   -内部样式表更加方便对样式进行复用
             问题：内部样式表只能对一个网页起作用，它里边的样式不能跨页面进行复用

第三种方式：**外部样式表**（最佳实践）
                  可以将css样式编写到一个外部的css文件中。
                  然后通过link标签来引入外部的css文件。
                  外部样式表需要通过link标签进行引入，意味着只要想使用这些样式的网页都可以对其进行引用。
                  使样式可以在不同的页面之间复用。
                  将样式编写到外部的css文件中，可以使用到浏览器的缓存机制，从而加快网页的加载速度，提高用户的体验。
        <link rel="stylesheet" href="./style.css">

css中的注释，注释中的内容会自动被浏览器所忽略 /* /
css的基本语法：
选择器：通过选择器可以选中页面中指定元素，比如p的作用就是选中页面中所有的P元素
常用选择器：
（1）、元素选择器：
作用：根据标签名来选中指定的元素
语法：标签名{}
例子：p{} h1{} div{}
（2）、id选择器：
作用：根据元素的id属性值选中一个元素
语法：#id属性值{}
例子：#box{} #red{}
（3）、类选择器：
作用：根据元素的class属性值选中一组元素
语法：class属性值
class是一个标签的属性，它和id类似，不同的是class可以重复使用
可以通过class属性来为元素分组
可以同时为一个元素指定多个class
（4）、通配选择器
作用：选中页面中的所有元素
语法：
* {color: red；}
（5）、 复合选择器：
1、 交集选择器：
作用：选中同时符合多个条件的元素
语法：选择器1选择器2选择器3选择器n{}
注意点：交集选择器中如果有元素选择器，必须使用元素选择器开头
.a.b.c{ color:seagreen}
div.red{font-size:50px;}
2、 选择器分组/并集选择器
作用：同时选择多个选择器对应的元素
语法：选择器1,选择器2,选择器3,选择器n{}
h1,span{color:seagreen }
（6）、关系选择器：
1、子元素选择器：
作用：选中指定父元素的指定子元素
语法：父元素>子元素
div>span{color: seagreen;}
2、后代选择器：
作用：选中指定元素内的指定后代元素
语法:祖先 后代
div span{ color:slateblue;}
3、兄弟元素选择器：
选择下一个兄弟
语法：前一个+下一个
选择下边所有的兄弟
语法：兄~弟
父元素：直接包含子元素的元素
子元素；直接被父元素包含的元素
祖先元素：直接或间接包含后代元素的元素。一个元素的父元素也是他的祖先元素
后代元素：直接或间接被后代元素包含的元素
兄弟元素：拥有相同父元素的元素
（7）、属性选择器
[属性名]选择含有指定属性的元素
[属性名=属性值]选择含有指定属性和属性值的元素
[属性名^=属性值]选择属性值以指定值开头的元素
p[title^=abc]{ color: chocolate;}
[属性名$=属性值]选择属性值以指定值结尾的元素
[属性名*=属性值]选择属性值中含有某值的元素
(8)、伪类选择器
伪类：不存在的类/特殊的类
-伪类用来描述一个元素的特殊状态
比如：第一个子元素、被点击的元素、鼠标移入的元素…
-伪类一般情况下都是使用：开头
：frst-child第一个子元素
将ul里的第一个li设置成红色 ul>li:first-child{color: red;}
：last-child最后一个子元素
:nth-child()选中第n个子元素 :nth-child(1)选中第一个子元素 :nth-child(2)选中第二个子元素 以此类推
特殊值：
n 第n个 n的范围0到正无穷
2n或even表示选中偶数位的元素
2n+1或odd表示选中奇数位的元素
-以上这些伪类都是根据所有的子元素进行排序的
：first-of-type
:last-of-type
:nth-of-type()
-这几个伪类的功能和上述的类似，不同点是他们是在同类型元素中进行排序的
-:not()否定伪类
-将符合条件的元素从选择器中去除
（9）、伪元素选择器
伪元素，表示页面中一些特殊的并不真实存在的元素（特殊的位置）
伪元素使用：：开头
:：first-letter表示第一个字母
::first-line表示第一行
::selection表示选中的内容
::before表示元素的开始
::after表示元素的最后
-befor和after必须结合content属性来使用
元素的伪类：
:link用来表示没访问过的链接（正常的链接） a:link{ color: red; font-size: 20px;}
:visited用来表示访问过的链接
由于隐私的原因，所以visited这个伪类只能修改链接的颜色
:hover用来表示鼠标移入的状态
:active用来表示鼠标点击

               声明块：通过声明块来指定要为元素设置的样式，声明块由一个一个的声明组成
                             声明是一个名值对结构，一个样式名对应一个样式值，名和值之间以：连接，以；结尾