一、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里（父元素）第一个同类型的元素，字体粗细为粗体