CSS学习日志（6月19日）

1.html元素具有原始样式，但在不同浏览器中的表现有差异，可使用reset css进行样式重置，再进行样式编辑。

2.样式规则中的空白会占据空间，可使用webpack进行压缩。

3.样式规则存在错误时，解释器会选择忽视，不影响其他样式规则。

3.样式定义的方式

①外部样式表（置于head标签中，样式文件的后缀为.css）

<link rel="stylesheet" href="./index.css">

（一个页面可引入多个外部样式表）

②嵌入样式

<style>

    .box{

        width: 100px;

    }

</style>

③内联样式（多个样式间用分号隔开）

<div style="width:100px;height:100px;">盒子</div>

④导入样式（在原样式规则中导入其他样式，可置于外部样式和style标签中）

@improtant "index.css"

@improtant url("index.css")

（注：置于style标签中时，需要放在样式规则前面） 

4.选择器（通过选择器查找元素，进而控制样式）

.class 类选择器

#id     ID选择器

*        通配选择器（一般和关系选择器结合使用）

element 元素选择器（选择所有某个元素）

5.关系选择器

element1,element2  选择所有元素1和元素2

element1 element      后代选择器（选择元素1内部的所有元素2）

element1>element2   子元素选择器（元素选择父元素为1的所有子元素2）

element1+element2   紧邻兄弟选择器（选择紧邻在元素1后的同级元素）---只选择一个

element1~* 后面兄弟选择器（选择元素1后面的所有同级元素）

6.属性选择器

[attribute1] 选择带有属性1的所有元素

[attribute1=value] 选择属性1的值为value的所有元素

[attribute1~=word] 选择属性1中包含单词word的所有元素

[attribute1丨=word] 选择属性1值为word或包含word且以-链接的独立单词

[attribute1*=character] 选择属性1中包含字符character所有元素

[attribute1^=character] 选择属性1以character开头的所有元素

[attribute1$=character] 选择属性1以character结尾的所有元素

（字符和单词的区别，字符是单个字母或者多个字母组合而成的，不一定具有固定意义；单词则是字典中存在的词汇，具有固定意思。总的来说，字符包含单词）---个人理解

7.伪类选择器（为元素的不同状态或者不存在的元素设置样式，其中字符伪类使用::开头，其他使用:开头）

8.选择器权重

！important

内联样式      权重值1000

ID选择器      权重值0100

类选择器      权重值0010（包括伪类）

元素选择器  权重值0001

通配选择器  权重值0000

（组合选择器的权重是叠加的，选择器权重值相同的情况下，应用后出现选择器的规则）

子元素会继承父元素的部分样式，且继承规则没有权重（在通配选择器之下）