css引入的两种方法link和@import的区别和用法(转载)

序言

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

两者的基本语法

link语法结构

<!-- link语法结构 --> <link href="外部CSS文件的URL路径" rel="stylesheet" type="text/css" />

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

@import语法结构

<!-- @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语法)。

最后

感谢原博主,原博客的地址为:


__EOF__

本文作者damarkday知识库
本文链接https://www.cnblogs.com/GoodMemoryBlog/articles/14459445.html
关于博主:评论和私信会在第一时间回复。或者直接私信我。
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角推荐一下。您的鼓励是博主的最大动力!
posted @   DAmarkday  阅读(391)  评论(0编辑  收藏  举报
编辑推荐:
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
阅读排行:
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· 上周热点回顾(2.24-3.2)
点击右上角即可分享
微信分享提示