当前位置 : 主页 > 网页制作 > css >

导入css文件问题

来源:互联网 收集:自由互联 发布时间:2021-06-13
1 在html文件中导入css文件 1.1导入式 link href= "style.css" rel= "stylesheet" type= "text/css" / 1.2 链接式 style type= "text/css" @ import "style.css" / style 2 二者的区别 1 两者标签所放位置都是head标签中. 2 导

1 在html文件中导入css文件

 

1.1 导入式

  <link href="style.css" rel="stylesheet" type="text/css" />

1.2 链接式

  <style type="text/css">

    @import "style.css"

  </style>

2 二者的区别

1 两者标签所放位置都是<head>标签中.

2 导入式和链接式的目的都是将一个独立的css文件引入一个文件中,二者的区别不大,事实上,二者最大的区别在于链接式使用html的标记引入外部css文件,而使用导入式则是使用css规则引入外部css文件。因此它们的语法也不同.

3 采用这两种方式后的现实效果也略有区别。使用链接式时,会在装载页面主体部分之前装载css文件,这样现实出来的页面从一开始就是带有样式效果的,而使用导入式时,会在整个页面装载完成之后再装载css文件,对于有的浏览器来说, 在一些情况下,如果页面文件的体积比较大,则会出现先现实无样式的页面,闪烁一下之后再出现设置样式的效果。从浏览者的感受来说,这是使用导入式的一个缺陷.

 

2 在CSS文件中导入css文件

三个css样式表:

css_red.css  ,  css_blue.css  , css_green.css

一个主样式    style.css  把三个样式表都装进去:
@import "css_red.css"; 
@import "css_blue.css";
@import "css_green.css";
调用的时候只需要调用  style.css  就行了。

————————————————版权声明:本文为CSDN博主「ADreamClusive」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。原文链接:https://blog.csdn.net/u013943420/article/details/71597529

网友评论