codecamp

CSS导入式

导入式与链接式在使用上非常相似,都实现了页面与样式的文件分离。区别在与导入式在页面初始化时,把样式文件导入到页面中,这样就变成了内嵌式,而链接式仅是发现页面中有标签需要格式时候才以链接的方式引入,比较看来还是链接式最为合理。


导入式是通过@import在<style>标签中进行声明的,如下例:

CSS导入式


(2)按【F12】键运行,结果如下图所示:

导入式

注意:从运行结果中可以看到,导入式与链接式运行效果一样。导入式除了可以在同一个页面中导入多个样式文件,还可以在样式文件中使用import进行导入。


各种方式的优先级

CSS优先级,是指CSS样式在浏览器中被解析的先后顺序。既然样式有优先级,那么就会有一个规则来约定这个优先级,而这个“规则”就是重点。当同一个页面采用了多种CSS使用方式,例如行内样式、链接样式和内嵌样式,如果这几种样式共同作用于同一个标记,就会出现优先级的问题,即究竟哪种样式设置有效果。如果内嵌样式设置字体为宋体,链接样式设置为红色,那么二者会同事生效;如果都设置字体颜色,情况就会复杂。


前面介绍过4种样式表,分别是行内样式、内嵌式、链接式和导入式,他们的优先关系是:行内样式>内嵌式>导入式>链接式。


CSS链接样式
CSS 3的2种声明方式
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }