一、CSS语法
1.选择器
- 一条或多条声明（属性：值）
二、什么是css样式？（5分）
CSS(Cascading Style Sheets ) 层叠样式表
样式主要内容包括选择器和属性两部分。
属性和属性值用英文的冒号隔开，以分号结尾。属性值不要使用引号括起来
三、css的四种引入方式？
CSS主要有四种引入方式：链接外部样式文件，导入外部样式文件，使用内部样式定义以及内联样式
（1）链接样式
外部引入CSS样式文件是通过标签实现的，它只能位于HTML文档的head标签内，且必须有href属性，用于指定需要引入的CSS文件的绝对路径
<link type="text/css" rel="stylesheet" href="CSS样式文件的绝对地址">
link元素中type用于规定链接文档的MIME类型，rel属性用于规定被链接文档与当前文档之间的关系，如alternate用于定义交替出现的链接，appendix定义文档的附加信息等，此外还有一些可选属性，用于做一些除加载CSS文件的其他事情
（2）导入样式（不建议使用）
导入外部样式单主要通过@import方式导入CSS文件，有两种导入方式
a、在style元素中导入CSS文件
<style type="text/css">
@import "CSS样式文件的绝对地址";
@import url("样式文件的绝对地址");
</style>
url可省略，所以只需指定样式单地址即可，在标准CSS的语法中，@import还有sMedia属性，用于指定CSS的可作用的设备，目前还没得到广泛的支持，所以sMedia可以不写。
b、在CSS文件中再导入CSS文件
/*某个CSS文件*/
@import "另一个CSS文件的地址";
.test{
width: 100px;
height: 100px;
line-height: 20px;
background-color: red;
}
在CSS文件中再导入CSS文件，会给服务器造成太大的文件请求压力，最好不要这样做。
@import是由CSS提供的一种导入样式的方式，当页面被加载时，@import会等到页面全部被加载完成时再加载CSS样式，所以在页面还未加载完成期间，页面还没有CSS样式效果，会导致“屏闪”，通过@import导入的CSS样式是无法用DOM去控制的
（3）行内样式
内联样式即只在某个元素内使用style属性，它只针对这个元素，而不会影响整个文件，所以可以控制某个HTML元素的外观表现，适合用于代码调试
<div style="color: #ccc; width: 200px; height: 100px;"></div>
（4）内嵌样式
<style type="css/text">
.text{
font-size: 20px;
padding-left: o;
margin: 0 auto;
}
</style>
<body>
<div class="text"></div>
</body>
style元素位于head标签内部，type属性指定CSS代码的文档类型。使用内部CSS样式必须为有选择器，常见的选择器有ID选择器，类（伪类CSS3新增）选择器，元素选择器，子选择器，属性选择器等，优先级ID > 类（伪类）> 元素，其他的选择器越详细，优先级越高，如属性选择器比元素选择器更能精确定位，故属性选择器优先级高。
style元素和内联样式一样，会造成代码混乱，不易查错，也会给文档加载带来巨大负担。
总结：使用CSS样式时，尽量将CSS代码与HTML代码分离，即最好使用引入外部CSS文件的方式。
四、引入方式的优先级？
1.就近原则
2.理论上：行内>内嵌>链接>导入
3.实际上：内嵌、链接、导入在同一个文件头部，谁离相应的代码近，谁的优先级高
五、CSS特性：继承性，层叠，优先级（5分）
1.继承
子代可以直接使用父代的某些样式（特征），当然有些可以继承，有些不能继承
2.1 层叠性
在权重(优先级)相同的情况下，同一个标签的样式发生冲突，最后定义的样式会将前面定义的样式覆盖。
注意：与定义样式的顺序有关，与调用的顺序无
3.优先级
内联>选择器>类选择器>元素选择器
内部样式>外部样式
六、子选择器和后代选择器的区别？（5分）
子选择器，即大于符号(>)，用于选择指定标签元素的第一代子元素
后代选择器即加入空格,用于选择指定标签元素下的后辈元素。
子选择器（child selector）仅是指它的直接后代，可以理解为作用于子元素的第一代后代
后代选择器是作用于所有子后代元素。
总结：>作用于元素的第一代后代，空格作用于元素的所有后代
六、长度单位px和em的区别？
px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的
em是相对长度单位。相对于当前对象内文本的字体尺寸。
七、选择器的优先级？（5分）
!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
八、九种选择器的用法？（5分）
1.标签选择器(如：body,div,p,ul,li)
2.类选择器(如：class="head",class="head_logo")
3.ID选择器(如：id="name",id="name_txt")
4.全局选择器(如：*号)
5.组合选择器(如：.head .head_logo,注意两选择器用空格键分开)
6.后代选择器 (如：#head .nav ul li 从父集到子孙集的选择器)
7.群组选择器 div,span,img {color:Red} 即具有相同样式的标签分组显示
8.继承选择器(如：div p,注意两选择器用空格键分开)
9.伪类选择器(如：就是链接样式,a元素的伪类，4种不同的状态：link、visited、active、hover。)
10.字符串匹配的属性选择符(^ $ *三种，分别对应开始、结尾、包含)
11.子选择器 (如：div>p ,带大于号>)
12.CSS 相邻兄弟选择器器 (如：h1+p,带加号+)
网友评论