从0开始学web-day4

很久没更新这个web的小系列了，因为才打算更新没多久之后就生病了，加上生病之后更懒了，就一直没有更新，终于在今天有接着更新了~~~~

00.复习
01初识css
css：层叠样式表
作用：修饰html标签（html的化妆师）
css的优势（好处）：
1.弥补html本身标签的不足
2.减少冗余代码，减少文件体积，提高页面加载速度，减少网络带宽占用
3.对网页改版重构有很好的支持
4.有利于搜索引擎优化（SEO）

02css的语法
css的语法
css由两部分组成：选择器 和 声明 声明包括属性和属性值
语法：选择器 {属性：属性值；}
注意：属性和属性值用冒号连接 分号结束
如果是最后一个属性值可以省略结束的分号（不建议）
一个选择器可以同时存在多个属性，属性不分先后顺序
选择器与{}之间存在空格（建议）
选择器的起名：最好不要使用中文，数字开头，最好不要使用关键字（html的标签）
注释：/* */

03css的样式表
css的样式表
1.内联样式（不推荐使用）
写在html标签内部 style=“color:red”
缺点：耦合性高 没有办法复用 代码冗余高
2.内部样式表
写在html文件的head中用style包裹
缺点：可以解决内联样式的耦合性高的问题，但是仅限于当前页面
3.外部样式表（工作中常用）
新建xxx.css
需要引用才能生效

注意：rel="stylesheet"必须有，作用是建立文档的关联性
一个页面可以同时存在多个样式表 如果存在冲突，谁在后边谁生效
代码复用性更高
4.导入样式表（不用）

link与@import的区别：
1.老祖宗不同 link是html提供的引入方式，不仅可以引用css文件还可以引入其他文件，@import是css提供的引入方式，只能引用css文件
2.加载顺序 link与html同时被加载，@import是当html加载完成之后再加载对应的css
3.兼容性 @import需要在ie6以上支持，link没有版本要求
4.控制dom link支持 @import不支持
三种样式表的优先级：
行内样式表的优先级最高，内部和外部都是就近原则，谁在后边谁生效

04选择器
基本选择器
1.标签选择器
语法：html标签（属性：属性值；）
注意：body中必须存在这个html标签
作用：同一页面中某一类标签的默认设置
2.class选择器
语法：.class名称{属性：属性值；}
标签中需要存在class=“class名称”
一个标签可以存在多个class 中间用空格隔开
作用：同一设置某一类型样式
3.id选择器
语法：#id名称 {属性：属性值；}
标签中需要存在class=“class名称”
一个标签只能存在一个id
作用：搭建网页的外围结构
4.通配符选择器
语法：*{属性：属性值；}
作用：清空浏览器的默认值
*{margin：0；padding：0；}

05css的选择器
高级选择器
1.并集选择器(群组，集体)
语法：选择器1，选择器2，选择器3…{属性：属性值；}
2.关系选择器
2.1后代选择器
选择器1 选择器2…{属性：属性值；}
2.2子代选择器
选择器1>选择器2…{属性：属性值；}
3.交集选择器（绑定选择器）
标签选择器名称{属性：属性值；}
标签必须写在选择器的前面

06选择器的权重
选择器的权重
继承的权重最小
标签选择器的权重是0001
class选择器的权重是0010
id选择器的权重是0100
内联样式表的权重是1000
关系选择器的权重是选择器权重的和
并集选择器的权重是选择器本身
正无穷大 在属性值的后面添加！important；