我们知道,css文件引入方式有两种:
1. HTML中使用link标签
2.CSS中@import
第一种方式最为常见最为主流,第二种方式则很少见到有人这么写,因而也常被开发工程师所忽略。这篇文章就详细解剖之。
语法
@import语法有两种:
这两种语法并没什么差别。
规则
import规则一定要先于除了@charset的其他任何CSS规则,这句话是什么意思呢,我们看个例子:
index.html
测试发现,p的颜色并不是import.css里所定义的蓝色,而是之前定义的橘黄色。打开网络请求会发现没有请求import.css文件,这正是因为,再次强调一遍,import规则一定要先于除了@charset的其他任何CSS规则,所以需要将index.html改成酱紫:
这时候能看到import.css网络请求,p的颜色为橘黄色,覆盖了import.css里定义的蓝色。
媒体查询
@import和link一样,同样可以定义媒体查询(media queries),我们先看看link定义的方式:
新闻热点
疑难解答