调用css时,link和@import url的区别

1,@import url()机制是不同于link的,link是在加载页面前把css加载完毕,而@import url()则是读取完文件后在加载,所以会出现一开始没有css样式,闪烁一下出现样式后的页面(网速慢的情况下)。

2,@import 是css2里面的,所以古老的ie5不支持。

3,当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的。

4,link除了能加载css外还能定义RSS,定义rel连接属性,@import只能加载css

5,@import url 会占用html文件空间

所以我认为结合来使用就最好,比如:<link href="css/style.css" rel="stylesheet" type="text/css">

引用了一个style.css文件,在main.css里面再引用@import url(head.css);@import url(body.css);

这样达到一个清晰明了的作用.

转载于:https://www.cnblogs.com/slsddy/p/11346799.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 除了使用link和@import方式引入CSS外,还有以下几种方式: 1. 使用<style>标签将CSS代码嵌入HTML文件中,例如: <style> body { background-color: #f1f1f1; } </style> 2. 使用JavaScript动态创建<style>标签,并将CSS代码添加到其中,例如: var style = document.createElement('style'); style.innerHTML = 'body { background-color: #f1f1f1; }'; document.head.appendChild(style); 3. 使用CSS的data URI方案,将CSS代码嵌入URL中,例如: <link rel="stylesheet" href="data:text/css;base64,LmJvZHkgewogICAgYm9keSB7CiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogI2YxZjFmMTsKICAgIH0KICAgIC5jbGlwLWhlYWRlcnMgeyBiYWNrZ3JvdW5kLWNvbG9yOiAjZjFmMWYxOyB9Cn0="> 注意:以上方式不一定适用于所有情况,具体应该根据实际需求进行选择。 ### 回答2: 除了使用link标签的style属性和@import规则之外,还可以使用以下方法来引入CSS: 1. 标签的style属性:可以直接在HTML标签的style属性中添加内联的CSS样式。这种方法适用于仅对一个具体元素应用样式的情况。 2. style标签:可以在HTML文档的<head>标签内使用style标签,将CSS样式直接嵌入到HTML文档中。这种方法适用于仅对当前文档使用的样式。 3. 内联样式表:可以在HTML标签的style属性中直接定义CSS样式,以内联方式应用样式。这种方法适用于仅对一个具体元素应用样式且样式较少的情况。 4. @import规则:可以在CSS文件中使用@import规则引入其他CSS文件。这种方法适用于将多个CSS文件组合成一个文件以便管理和调用的情况。 5. JavaScript:可以使用JavaScript动态地创建一个<style>标签或修改已有的<style>标签来引入CSS样式。这种方法适用于需要根据特定条件或动态操作来改变样式的情况。 6. CDN:可以使用内容分发网络(CDN)来引入CSS文件。通过在HTML的link标签中使用CDN提供的CSS文件链接,可以从CDN服务器加载所需的CSS文件。 总之,除了使用link style和@import规则外,可以使用内联样式表、style标签、JavaScript以及CDN等方法来引入CSS样式。根据具体需求选择合适的方法。 ### 回答3: 除了link 标签和 @import 指令外,还有一种方法可以引入 CSS 样式,那就是通过 JavaScript。通过 JavaScript 的 DOM 操作,我们可以动态地创建和添加 CSS 样式。 首先,我们可以使用 JavaScript 创建一个 <style> 标签,然后将需要的 CSS 样式插入到其中,最后将整个 <style> 标签添加到页面的 <head> 或 <body> 标签中。这样就能够同引入 CSS 样式了。 以下是一个简单的示例代码: ```javascript // 创建一个 style 标签 var styleTag = document.createElement('style'); // 设置 style 标签的属性 type styleTag.type = 'text/css'; // 设置 CSS 样式内容 var cssContent = 'body { background-color: #f1f1f1; }'; styleTag.appendChild(document.createTextNode(cssContent)); // 将 style 标签添加到 head 或 body 标签中 document.head.appendChild(styleTag); // 或 document.body.appendChild(styleTag); ``` 这样,通过 JavaScript 动态添加的 CSS 样式就会生效了。 需要注意的是,这种方式相对于使用 link 标签和 @import 指令引入 CSS 样式,有一些限制。因为它是通过 JavaScript 动态创建和插入 CSS 样式,所以可能存在一些性能方面的问题。同,如果样式内容较多或涉及到复杂的选择器,建议使用 link 标签或 @import 指令进行引入,以保持代码结构清晰和可维护性。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值