css引入的两种方法link和@import的区别和用法

link和@import都是HTML中引入CSS的语法单词。

两者的基本语法

link语法结构

<link href="外部CSS文件的URL路径" rel="stylesheet" type="text/css" />

link标签通过URL路径引入外部的CSS文件到HTML中,是一种HTML标签,属于书写HTML的语法,只能放在HTML源代码中使用。

@import语法结构

<style type="text/css">
  @import + 空格 + url(外部CSS文件URL路径地址);
</style>

@import是在样式表定义中再引入外部的CSS文件,相当于一种样式,属于书写CSS的语法。

两者的区别

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

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

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

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

区别4:link支持使用JavaScript控制DOM去改变样式;@import不支持这样的操作(JavaScript可以获取link标签元素,但获取不到@import,因为@import只是一种CSS语法)。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,026评论 1 92
  • 我们都知道,外部引入 CSS 有2种方式,link标签和@import。它们有何本质区别,有何使用建议,在考察外部...
    马蹄丙阅读 2,370评论 0 5
  • 1.内联方式 内联方式指的是直接在 HTML 标签中的style属性中添加 CSS。 示例: 这通常是个很糟糕的书...
    lihaiting阅读 461评论 0 0
  • 昨天早上陪爸爸去了趟医院,结果没去成,8点半就到公司了,坐着玩儿了半天手机,说起来也奇怪,当时就感觉到他在后面,一...
    谁说太阳找得到月亮阅读 254评论 0 0
  • 时间:2018年11月6日 课堂流程: 1.打招呼歌 2.引入音节小精灵 3.练习一:判断音节 4.练习二:判断音...
    Tyger老师阅读 2,006评论 28 5

友情链接更多精彩内容