1、CSS三种引入方式怎么使用?
CSS三种引入方式是:
1:内联样式,又有人称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式
<div> <p style="color: green">我是一个段落</p> </div>
2:内接样式,又称内嵌式,是将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义
<style type="text/css"> /*写我们的css代码*/ span{ color: yellow; } </style>
3:外接样式,外接样式分两类,一类是链接式,第二类是导入式(具体看第二个代码)。链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中,通过link标签将外部样式表文件链接到HTML文档中,而导入式是通过将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中,通过CSS中的import将外部样式表文件链接到HTML文档中;
<link rel="stylesheet" href="./index.css">
<style type="text/css"> @import url('./index.css'); </style>
2、CSS引入方式 @import 和 link 的区别?
区别:
1.从属关系区别
@import 是 CSS 提供的语法规则,只有导入样式表的作用; link 是HTML提供的标签,不仅可以加载 CSS 文件,还可以定义 RSS、rel 连接属性等。
2.加载顺序区别
加载页面时, link 标签引入的 CSS 被同时加载; @import 引入的 CSS 将在页面加载完毕后被加载。
3.兼容性区别 @import
是 CSS2.1 才有的语法,故只可在 IE5+ 才能识别; link 标签作为 HTML 元素,不存在兼容性问题。
4.DOM可控性区别
可以通过 JS 操作 DOM ,插入 link 标签来改变样式;由于 DOM 方法是基于文档的,无法使用 @import 的方式插入样式。
5.权重区别 link
引入的样式权重大于 @import 引入的样式
3、解释回流重绘和重排?
回流/重排:渲染树的一部分必须要更新且节点的尺寸发生了变化,会触发重排操作。每个页面至少在初始化的时候会有一次重排的操作;
重绘:部分节点需要更新,但没有改变其形状,会触发重绘操作;
4、基础选择器的优先级?
CSS的基础选择器有类选择器、id选择器、标签选择器。优先级是:id选择器 > 类选择器 > 标签选择器;在基础选择器的基础上,每个页面都有默认样式,并在特殊情况下会使用的继承和通配符,所以具体的优先级是:id选择器 > 类选择器 > 标签选择器 > 通配符 > 继承 > 默认样式;(特别注意的是:如果选择器后面如果写上最高优先级的!important则这个选择器的优先级最高,并且不能修改;)
)
5、层级选择器的使用?
后代选择器:使用 空格 表示后代选择器。顾名思义,父元素的后代(包括儿子,孙子,重孙子)
.container p{
color: red;
}
.container .item p{
color: yellow;
}
子代选择器:使用 > 表示子代选择器。比如div>p,仅仅表示的是当前div元素选中的子代(不包含孙子....)元素p。
.container>p{
color: yellowgreen;
}
相邻兄弟选择器:找的是紧挨着class属性为c1的标签的下面的标签
.c1+p{
color:green;
}
通用兄弟选择器:找的是class属性为c1的标签的下面的标签
.c1~p{
color: green;
}
6、选择器权重的计算?
由于CSS具有两大特性:继承性和层叠性;
继承性:给父级设置一些属性,子级继承了父级的该属性,这就是继承;
层叠性:权重大的标签覆盖掉了权重小的标签,谁的权重大,浏览器就会显示谁的属性;所以要想优先显示某些样式就必须使用权重来显示属性:
行内样式 1000> id选择器 100 > 类选择器 10 > 标签选择器 1 > 继承样式 0