当前位置: 主页 > 建站教程 >

使用@import和link导入CSS样式文件有什么区别

我们知道在网页中引用外部CSS有两种方式,即:@import与link。我们也经常听到有人说要使用link来引入CSS更好,那么使用@import和link导入CSS样式文件有什么区别吗?

使用link导航CSS样式文件

1、link可以把外部CSS与网页连接起来
2、使用link方式一个最主要的原因就是你可以让用户切换CSS样式.现代浏览器如Firefox,Opera,Safari都支持 rel="alternate stylesheet"属性(即可在浏览器上选择不同的风格),当然你还可以使用Javascript使得IE也支持用户更换样式.

使用@import在CSS文件中导入其他CSS文件

1、import文字上与link的区别就是它可以把在一个CSS文件中引入其它几个CSS文件。
2、大部分使用@import方式的人是因为旧的浏览器是不支持@import方式的,这意味着我们可以使用@import来引入只让现代浏览器解析的CSS样式。基础这种应用可以达到更高的兼容性,例如我们在网站上使用了动画效果,然而旧浏览器不支持,我们可以使用这个方法,这时动画只在新浏览器中播放。
3、当你的网页需要引入几个外部CSS文件时.你可以使用link引入一个CSS,然后在这个CSS文件中用@import方式引入其它几个CSS文件.这样看起来更容易管理.

使用@import的缺点

1、当用户浏览的网速较慢时,他会看到一个没有风格样式的页面,然后随着CSS文件被下载完成才可以看到应有的风格
2、@import会使得CSS整体载入时间变长.并且在IE中会导致文件下载次序被更改,例如放置在@import后面的script文件会在CSS之前被下载.

就目前看来小型的网站还是使用link比较合适(或者说比较流行),当然如果将来我们需要把CSS进行模块化管理也肯定要用到@import.
分享到:

最新发布MORE

  • 网站banner设计_网站建设
  • 网站设计时的风格创新与统一原则-青锋建站
  • 符合seo的网站建设标准
  • 单页网站制作的应用场景与设计原则
  • 网站打开速度优化与减少加载项-web开发
  • 网站前端页面加载过程
  • web前端代码的规范与精简-网站开发教程
  • 响应式网站建设设计方法-石家庄网站制作公司
  • 为什么响应式网站建设更节省投入-石家庄网站制作
  • 网站建设要有明确的定位与网站优化
  • 石家庄网站建设   石家庄网络公司   网站建设教程   网络营销技巧   石家庄SEO   石家庄网络营销   网站案例   青锋工作室
  • 联系电话:15632335515   QQ:943703539
  • 联系地址:石家庄高新区汾河道69号
  • Copyright © 2016-2026 青锋建站 版权所有
  • 15632335515