每日面试题复习——css
1.引入css方式有些?优先级?
答：分为行内式，嵌入式和外部式
（1）写在标签里面，为行内式，又称为内联式。
例如<div style="width:200px; height:200px">我是一个盒子</div>
（2）将代码提出来写在style标签中，为嵌入式，虽然可以写在任意标签之间（不建议），不过一般写在html的头部，所以又称为头部样式表。
例如
<style>
div{
width:100%;
font-size:14px;
}
</style>
（3）
css单独写在一个文件中，用href引入，为外部式，又称外链式
<link rel="stylesheet" href="main.css" type="text/css">
（4）
css单独写在一个文件中，用@import引入，为外部式，又称为导入式
@import url(default.css)
（5）
css单独写一个文件，用import引入，此为es6新特性，可以用在模块化中，注意，这个import只能用于js文件中，.vue文件也可以用。
权重:行内>头部样式表>外部样式
2.href和src的区别?
回答:
(1).href用于引入文件建立联系，通常用于link和a标签中，src用于请求资源来替换内容，通常用于script和img标签中
(2).href请求时不会影响后续操作，即不会阻塞当前文件的处理，而src会暂停其他资源的处理，只有全部加载完毕才可继续执行
注意，由于src会阻断处理，所以js文件需要在尾部引入，否则影响性能，另外，图片资源很多可以用懒加载，即用data-src来存放图片地址，当鼠标划入该区域则用data-src中的图片地址替换src里面的空地址即可。
3.link和@import的区别?
(1)link属于 XHTML 标签，而@import完全是 CSS 提供的一种方式。link可定义连接属性，@import只能引入样式表
(2)页面加载时link即会被调用，@import会等页面加载完后在调用。
(3)@ import会有兼容性问题，即ie5以下版本不支持
(4)当使用js来改变页样式时，只能用link标签，即用js可插入link标签，不能操作@import
(5)link的权重高于@import的说法错误，后引入的优先级高，就近原则哦
类似资料：