一、CSS介绍
CSS（Cascading层叠 Style样式 sheets表），是用来为网页添加样式的代码
*盒模型：
内边距（padding）：围绕着内容的空间，比如围绕段落的空间
边框（border）：紧接着内边距的实体线段
外边距（margin）：围绕元素外部的空间
宽度（width）：这个涉及了IE盒模型和标准盒模型
高度（height）: 同上
应用：
1、CSS 加载方式有几种？
答：（1）外部样式表（链接+导入）（推荐）
通过<link>引入css
通过@import导入样式，放入css（不要忘记分号）。在html或者css文件中都可以导入@import
（2）内部样式（内嵌方式），即将CSS放在页面的<style>元素中
（3）内联样式（行内方式）（不推荐），即直接在html的标记中使用style属性，将css元素属性的代码直接写在其中
（4）属性样式（废弃）
2、@charset有什么作用？
在外部样式表文件内使用，指定该样式表使用的字符编码。
该规则后面的分号是必需的，如果省略了此分号，会生成错误信息。如在外部css文件中写：
3、@import有什么作用？
通过@import引入样式或者css文件，可以减少文件的容量，加快文件加载速度
4、id 选择器和 class 选择器的使用场景分别是什么？
（1）id选择器，用于匹配特定id的元素，具有独一无二不可代替性
（2）class选择器，用于匹配class包含（不是等于）特定类的元素，描述一组元素的样式，你可以多次使用class赋值，来命名元素名
5、CSS选择器常见的有几种？
答：基础选择器、组合选择器、属性选择器、伪类选择器、伪元素选择器
6、伪类选择器有哪些？伪元素有哪些？
（1）伪类选择器：
E: first-child 匹配元素E的第一个子元素
E：link 匹配所有未被点击的链接
E: visited 匹配所有已被点击的链接
E：active 匹配鼠标已经其上按下，还没被释放的E元素
E：hover 匹配鼠标悬停器上的E元素
E：focus 匹配获得当前焦点的E元素
E：lang(c) 匹配lang属性等于c的E元素
E：enabled 匹配表单中可用的元素
E：disabled 匹配表单中禁用的元素
E： checked 匹配表单中被选中的radio或checkbox元素
E： selection 匹配用户当前选中的元素
E：root 匹配文档的根元素，对于html文档，实际上就是html元素
E：nth-child（n） 匹配其父元素的第n个子元素，第一个编号为1
E:nth-of-type(n) 与：nth-child（）作用类似，但仅匹配使用同种标签的元素
（2）伪元素：
E::first-line 匹配E元素内容的第一行
E::first-letter 匹配E元素内容的第一个字母
E::before 在E元素之前插入生成的内容
E::after 在E元素之后插入生成的内容
7、以下选择器分别是什么意思?
#header{
}
答：id选择器，匹配id为header的元素
.header{
}
答：类选择器，匹配class为header元素
.header .logo{
}
答：后代选择器，匹配class为header的元素logo
.header.mobile{
}
答：即又关系的并列元素，同时匹配这两个类选择器特性的一个元素
.header p, .header h3{
}
答：多元选择器，同时匹配.header p 和 .header h3两个元素
#header a:hover{
}
答：在id为header元素下匹配a元素鼠标悬停属性
#header .logo~p{
}
答：在id为header元素下匹配logo元素之后的同级所有元素p （无论直接相邻与否）
#header .logo+p{
}
答：在id为header元素下匹配logo元素之后的相邻同级元素p
#header .logo p{
}
答：在id为header元素下匹配class为logo元素的后代元素p
#header .logo>p{
}
答：在id为header元素下匹配class为logo元素的所有直接子元素，即第一子元素p
#header p.logo{
}
答：在id为header元素下同时匹配p元素和class为logo元素这类既又关系（并列）的元素的特性
#header .logo.p{
}
答：在id为header元素下同时匹配class为logo和p的元素
#header input[checked]{
}
答：在id为header元素下匹配checked值的input的元素
对其结果作出解释：
.box:first-child {
color: red;
}
选择同级第一个元素,并且这个元素class是 box,显示该标签元素的内容颜色为红色
.box:first-of-type {
background: blue;
}
选择同级第一个标签元素,并且这个元素是这个同级中的第一个标签，显示背景色为蓝色
（.box : .box和: 之间要有空格）
.box :first-child {
font-size: 30px;
}
表示 .box 里面（父元素）的第一个元素，显示字体大小为30px的结果
.box :first-of-type {
font-weight: bold;
}
选择 .box里（父元素）第一个同类型的元素，字体粗细为粗体
