css又叫样式层叠表，在HTML的实际开发中，通常将样式储存在外部样式表中，这样能极大的提高工作效率，将重复的样式储存在CSS中，在需要的时候直接调用
样式的来源
#
1.默认样式：默认样式是浏览器为每一个元素预置的样式
2.继承样式：继承自父级的样式属性
3.自定义样式：是通过style为元素设置的样式，样式的来源与书写顺序和位置有关，遵循后写大于先写的规则。
自定义样式又分为内联样式、文档样式和外部样式三种
1.内联样式：给元素添加style设置的样式，只适用于指定的元素
2.文档样式：为某个HTML文件设置的样式，也是通过添加style的方式，适用于指定的HTML文件
3.外部样式：写在外部CSS文件中的样式，可以实现多个页面调用
注：尽量在可以的情况下都用外部样式，减少代码冗余，实现样式复用的同时减少没必要的代码
CSS样式通过link标签引入HTML文件
<link rel="stylesheet" href="css/0707.css">
实例演示：
<body><h1>我是样式1</h1><h1>我是样式2</h1><h1>我是样式3</h1><h1>我是样式4</h1><h1>我是样式5</h1></body>
外部样式代码：
h1{color: rgb(144, 144, 12);}
效果展示：
css语法
选择器{属性：值}
例如上面的案例 h1就是选择器，花括号里面的color就是我们需要修改的属性，rgb(144.144.12)就是我们需要修改的值
css常用选择器
接下来就是css中常用的几个选择器
标签选择器
直接指定一个标签，调用之后会为页面中所有的这个标签添加设置好的外部样式
h1{color: rgb(144, 144, 12);}
属性选择器
在标签选择器的基础上，指定特定的属性，更进一步的精确选择项，如下案例，在标签h1基础上，指定color的属性。在调用之后只会选择带有color属性的h1标签。
对于id和class属性，有专门的简写 id用# class用.
h1.color{color: rgb(144, 144, 12);}
群组选择器
多个标签不同，属性也不同的选择器，就可以用群组选择器，
将需要选择的标签和属性 用 , 隔开，只要匹配其中一个标签属性就可以选中
h1.color,h1#dddd{color: rgb(144, 144, 12);}
通配选择器
快速选择body中所有的标签， ！important 用来提权，临时将权限提到最高，除了调试时，一半不推荐使用
body * {background-color: aquamarine !important;}
层级选择器
子集元素用 >
后代元素用 空格
相邻兄弟用 + （下一个同级元素）
所有兄弟用 ~
/* 子集元素 */body > h1 {background-color: aquamarine !important;}/* 后代元素 */body h1 {background-color: aquamarine !important;}/* 相邻兄弟元素 */h1.color+ {background-color: aquamarine !important;}/* 所有兄弟元素 */h1.color~ {background-color: aquamarine !important;}
选择器权重
当同意元素被多个选择器选中，这时候就需要通过选择器权重来确定调用哪一个选择器的属性
元素选择器 1级
class选择器 2级
id选择器 3级
内联样式 4级
注：如果选择器中添加了!impportant 这个选择器就是最优先级，不受权重约束
上面两个选择器同时选中了h1元素，但是第一个选择器的权重为0.0.2 大于第二个选择器 所以优先调用第一个选择器中的属性
在这个选择器中 添加了一个class 属性 所以权重高于上面两个选择器
这个选择器进一步选择了id 属性 权重大于前面所有的选择器
