CSS基本部分
一、CSS基础知识
1、CSS含义：CSS（Cascading Style Sheet）层叠样式表
2、CSS作用：对HTML页面结构的修饰
3、CSS基础语法
选择器{属性：属性值；属性：属性值；属性：属性值}
（1）选择器：查找页面元素的一种方式方法，方法有很多，所以我们要学习不同的选择器
（2）{}：样式规则，也称之为样式修饰，规定选择器查找到的元素实现何种样式
这里会出现两个面试考点
1、CSS基本语法由几个部分组成的？分别是什么？
答：由两个部分组成，选择器和样式规则
2、样式声明由几个部分组成？
答：属性和属性值
二、CSS语法使用位置
1、行内样式
（1）含义：把对应的CSS基本语法使用行内修饰的形式对页面的元素进行修饰
（2）基本语法
<div style="属性:属性值;属性:属性值;"></div>
（3）优缺点
- 优点：简单直观
- 缺点：代码冗余，使结构变得混乱
2、内部样式
（1）含义：把对应的CSS修饰语句放在一个独立的style标签中，style标签一般放在head标签里面
（2）基本语法
<head>
<style>
选择器{样式规则}
</style>
</head>
（3）优缺点
- 优点：降低了行内修饰的冗余，让页面的结构变得简洁，样式可重用
- 缺点：并没有做到完全的结构样式行为的分离，若代码量过大，来回滚动页面比较麻烦，且所有修饰都在head标签中，会造成读取加载缓慢、头重脚轻的效果
3、外部样式
（1）含义：把对应的CSS的基础语法放在一个独立的.css为后缀名的文件中，需要使用link标签进行关联
（2）link标签的基本语法：
<link href="CSS文件的路径" rel="stylesheet" type="text/css">
（3）优点：做到了充分的结构样式行为的分离
（4）扩展知识点：
外部引入样式有两种方法，第一种是通过link引入，第二种是导入，具体如下：
<style>
@import url(路径);
</style>
扩展面试题
外部样式表通过link引入和通过@import导入二者之间的区别
1、语法不一样
（1）前者link属于标签语法-link单标签进行引入的
（2）后者@import属于CSS语法：必须携带style标签
2、加载顺序的问题
（1） link引入的文件，结构和样式是同时加载显示的
（2）@import引入的文件，先加载结构，后加载样式
3、使用dom(document object model文档对象模型 )控制样式时的差别
当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的
4、兼容性问题
（1）link兼容性比较高
（2）@import兼容性比较低
三、CSS语法对比
优先级描述：
!important>行内样式>内部样式>外部样式
遵循原则 : 就近原则,挨着哪一个近就实现哪一个效果
注意：如果外部样式表在内部样式表的下边，则实现的效果是：外部样式 > 内部样式
因为外部引入的东西：CSS、公共的CSS、JS 等，都要放在前面，因此遵循就近原则，内部样式优先级高于外部样式优先级
四、选择器的分类
1、为什么要用选择器：要使用CSS对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器
2、选择器的分类：基本选择器、层次选择器、伪类选择器、属性选择器、伪对象（伪元素）选择器、结构伪类等选择器
五、基本选择器介绍
1、标签选择器
（1）含义：通过标签的名字查找页面的元素，只要叫这个标签名字都会被匹配到，实现对应的样式规则
（2）语法格式：
标签{属性：属性值；}
（3）弊端：匹配的范围过于广泛
强调：标签选择器匹配的是页面中叫对应标签名字的元素，无论级别嵌套有多深，都能被匹配到
2、类选择器
（1）含义：通过给元素起一个小名（class），在CSS中通过这个小名查找元素
（2）基本语法：
<标签 class=“Class名字”></div>
.Class名字{属性：属性值；}
.就是类的符号，不能被省略
3、id选择器
（1）含义：给元素起一个id名字，在CSS中通过id名字去查找页面中的元素
（2）基本语法：
<标签 id=“ID名字”></div>
#ID名字{ 属性：属性值；}
#就是id的符号，不能被省略
注意：任何一个元素、标签都可以带id属性，但是他们的取值只能出现一个
扩展点-命名选择器规范
（1）见名如意
（2）使用小写字母开头，不能以数字开头，但是可以配合使用字母数字下划线
（3）不能使用汉字
4、通配符选择器
（1）含义：能匹配页面中所有的元素
（2）基本语法：
语法：
*{
属性：属性值;
}
//常用场景
*{
margin:0;
padding:0
}
（3）作用：用来取消页面中元素自带的内边距和外边距
（4）弊端：不优化，使得一部分没有自带内边距和外边距的标签也取消了内边距和外边距
5、群组选择器（并集选择器）
（1）含义：把一部分元素的公共样式提取出来，用来节约代码，提高优化性
（2）基本语法
选择器1，选择器2，选择器3{属性：属性值；}
六、层次选择器介绍
1、后代选择器
（1）含义：除了能匹配符合条件的父元素之外，还能匹配符合条件的子元素，还能匹配符合条件的孙子辈分的元素
（2）基本语法：
选择器1 选择器2{}
2、子代选择器
（1）含义：只能匹配符合条件的儿子辈分的元素
（2）基本语法：
选择器1>选择器2{}
七、动态伪类选择器介绍
应用：主要应用在超链接a标签上面，四个使用的时候必须按照顺序进行书写
注意：
超链接默认是蓝色文本且自带下划线
伪类选择器（:）前后，不能带任何空格
实际情况下，会把hover单独拿出来使用，设置鼠标悬停的时候改变元素的样式
示例：
<style>
.green {
width: 200px;
height: 200px;
background-color: green;
}
.purple{
width: 100px;
height: 100px;
background-color: purple;
}
/* 当鼠标悬停在绿色盒子上面的时候，改变绿色盒子的背景颜色 */
/* .green:hover{
background-color: orange;
} */
/* 当鼠标悬停在绿色盒子上面的时候，改变的是里面子元素的背景元素 */
/* .green:hover>.purple{
background-color: blue;
} */
/* 当鼠标移入到紫色盒子的时候，改变的是自己本身的背景颜色 */
.green>.purple:hover{
background-color: aqua;
}
</style>
<body>
<div class="green">
<div class="purple"></div>
</div>
</body>
八、权重
1、不同的选择器修饰同一个元素的时候实现的样式，是以选择器的权重值大小来实现的
各选择器权重值：
id选择器（100）>类选择器（10）>标签选择器（1）>通配符选择器（0）
2、如果选择器混合使用的时候，则需要把选择器的权重值相加进行判断
注意：
涉及多层嵌套的时候，将权重值相加，但权重值只是一个虚拟值，默认还是类选择器要远远大于标签选择器
九、CSS层叠性
CSS层叠性是指CSS样式在针对同一元素配置同一属性时，依据层叠规则（权重）来处理冲突，选择应用权重高的CSS选择器所指定的属性，一般也被描述为权重高的覆盖权重低的，因此也称作层叠。
规则1：当不同选择符的样式设置有冲突的时候，高权重选择符的样式会覆盖低权重选择符的样式；
规则2：相同权重的选择符，样式遵循就近原则：哪个选择符最后定义，就采用哪个选择符样式。
