HTML5学堂-码匠 HTML5学堂

您当前位于:HTML+CSS ——> CSS引入方式 | link和@import的区别 — 生僻的前端考点

CSS引入方式 | link和@import的区别 — 生僻的前端考点

2015/05/28 11:36:41 | 作者:HTML5学堂(码匠) | 分类:HTML+CSS | 关键词:CSS,样式,引入方式,link,important

link和@import的区别

HTML5学堂:CSS的引入方式有外部引入、页面头部书写、标签内联书写,其实还有@import的引入方式,但是现在基本被淘汰掉了。为了让大家了解到更多的知识,今天给大家分享link和@import的区别。

页面中使用CSS的方式主要有3种:

行内添加定义style属性值,页面头部内嵌调用和外面链接调用,其中外面引用有两种:link和@import。外部引用CSS两种方式link和@import的方式分别是:

  1. XML/HTML代码
  2. <link rel="stylesheet" rev="stylesheet" href="CSS文件" type="text/css" media="all" />   
  3. XML/HTML代码
  4. <style type="text/css" media="screen">   
  5. @import url("CSS文件");   
  6. </style>  

两者都是外部引用CSS的方式,但是存在一定的区别:

区别1:link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS。

区别2:link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。

区别3:link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。

区别4:link支持使用JavaScript控制DOM去改变样式;而@import不支持。

欢迎沟通交流~HTML5学堂

补充:@import最优写法

@import的写法一般有下列几种:

@import 'style.css' //Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别

@import "style.css" //Windows IE4/ NS4, Macintosh IE4/NS4不识别

@import url(style.css) //Windows NS4, Macintosh NS4不识别

@import url('style.css') //Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别

@import url("style.css") //Windows NS4, Macintosh NS4不识别

由上分析知道,@import url(style.css) 和@import url("style.css")是最优的选择,兼容的浏览器最多。从字节优化的角度来看@import url(style.css)最值得推荐。

相关文章推荐

CSS引入方式

CSS important

CSS文件中url的路径含义及使用

CSS选择器优先级

reset 样式重置

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端