CSS - 导入样式文件的两种方法： link 标签和 @import 指令

最新推荐文章于 2024-04-19 12:52:58 发布
最新推荐文章于 2024-04-19 12:52:58 发布
阅读量1.3w 收藏 11
点赞数 4
分类专栏： 前端（HTML，CSS，JS，框架） 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kikajack/article/details/79058722
版权

语法：

<link href="url路径" rel="stylesheet" type="text/css" media="媒体查询列表"/>

示例：

<link href="common.css" rel="stylesheet" type="text/css" media="print,tv"/>

link 是 HTML 文件中的标签，在 <head> 标签中使用。如果指定了媒体查询类型，则只有在满足条件的情况下才会引入指定的样式文件。

2. @import

MDN 中的资料

语法：

@import url;
@import url 媒体查询列表; /*一个逗号分隔的 媒体查询 条件列表，满足条件时才引入 CSS。*/

示例：

@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import 'custom.css';
@import url("chrome://communicator/skin/");
@import "common.css" screen, projection;
@import url('mobile.css') (max-width: 680px);
@import url('landscape.css') screen and (orientation:landscape);

@import 是 CSS 中的一个@规则，必须先于所有其他类型的规则（@charset 规则除外），结尾需要加分号。@import 用于从其他样式表导入样式规则。因为必须要用 CSS 引擎来解析，所以只能出现在 CSS 文件中或 HTML文件的 <style> 标签中。

  1. link 是 HTML 文件中的标签，在 <head> 标签中引入 CSS 文件。
  2. @import 是 CSS 中的一个 @规则，只能出现在 CSS 文件中或 HTML文件的 <style> 标签中。
  3. @import 和 link 一样，都可以定义媒体查询(media queries)

4. 非模块化开发时尽量不要用 @import

1. 非模块化开发

@import 引入的样式在所在的 CSS 文件加载完成后再加载，不推荐使用。

正常开发时，所有的 CSS 文件都需要引入。如果在某个 CSS 文件中使用了 @import ，浏览器要先下载使用了 @import 的 CSS，解析完后发现有另外的 CSS 文件需要下载，再去下载、解析，增加了用户的等待时间。
如果 CSS 内容不多, 可以合并到一个文件里, 减少请求次数。对于多个独立的 CSS 文件, 最好直接用 link 标签加载。

2. 模块化开发

在用 webpack 等工具开发时，会合并 CSS 文件。如果 CSS 文件相互之间有依赖，可以直接用也只能用 @import 引入，最后构建好的文件会合并文件，不会出现 @import。

kikajack
关注
  • 4
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS
huangyh技术栈
04-30 2209
1.1 CSS美化的好处 概念：Cascading Style Sheet 层叠样式表 作用：在网页制作时可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。让HTML制作出来的网页更加漂亮，页面更容易维护。 1.2 CSS的编写规范 <style type="text/css"> /*选择...
CSS的三种引入方式
无糖加冰
11-06 4076
【CSS】CSS(凡境—大圆满)——CSS的三种引入方式(附带凡境汇总案例) 学完前期和中期我们来看看凡境最后的一个知识点! CSS的三种引入方式 行内样式表 行内样式表就是在元素标签内部设置style属性来设置CSS样式 选择器在style标签中 <标签 style="属性:属性值;"></标签> 内部样式表 内部样式表也是选择器放在style中 然后在HTML文档的head中书写 一般在平时练习的时候使用内部样式表 <标签 style="属性:
CSS入门：link链接样式和4种状态的详解
最新发布
u013179804的博客
04-19 1438
我们在之前 HTML 基础 提到了，标签是一个超链接标签，它在不添加样式时，文本颜色：通常是浏览器默认的蓝色，表示链接状态下的文本颜色。下划线：链接文本会默认显示下划线，表示它是一个可点击的链接。光标样式：当鼠标悬停在链接上时，光标通常会变为手型指示点击状态。访问后的样式：当鼠标点击过过链接时，是紫色。那如果这些默认的样式，不符合设计稿要求，能不能修改呢？当然能。本文，就说一下这个。我们在之前 HTML 基础 提到了，标签是一个超链接标签，它在不添加样式时，文本颜色。
CSS 的 link 标签放在 head 标签之间的作用
TianXuab的博客
11-11 1644
当我们在开发网页时，经常会遇到关于CSS文件引入位置的讨论。有些人喜欢将CSS文件的链接放在HTML文件的底部，而另一些人则认为最好将CSS链接放在标签之间。那么，究竟应该将CSS的link标签放在head标签之间的原因是什么呢？让我们来深入探讨一下。
link标签的用法及link属性大全
杨春建的博客
09-20 1万+
原文地址：http://blog.sina.com.cn/s/blog_161005e400102w5aj.html   link标签是网页头部head中的元素，在html语言中，link标签是单独出现的，并且可以被多次使用，该元素的用途是与外部文件建立链接，例如我们打开“搜狐门户网”的首页查看源代码：  在一个html文件中，link标签还包含许多其它属性，其中最常见的是使用link
CSS——link标签和@import的区别
月来better
06-07 913
link标签与@import的区别
grunt-css-injector:解析 CSS 文件并从 @import 指令注入另一个 css 文件
07-14
grunt-css-injector 这个插件解析 css/scss/sass 文件，找到所有 @import 指令并注入这些文件。入门这个插件需要 Grunt。 如果您以前没有使用过 ，请务必查看指南，因为它解释了如何创建以及安装和使用 Grunt 插件。...
postcss-import：PostCSS插件以内联@import规则内容
02-03
postcss导入 插件通过内联内容来转换@import规则。 该插件可以使用本地文件，节点模块或web_modules。 要解析@import规则的路径，它可以查看根目录（默认为process.cwd() ）， web_modules ， node_modules或本地...
CSS两种方式link和@import
12-03
看到淘宝网页中大部分是这样写的 <style type="text/css" media="screen">@import url("http://www.taobao.com/home/css/global/v2.0.css?t=20070518.css");...　当然使用链接link和导入impo
css中link和@import的区别分析详解
01-19
导入CSS文件主要有两种方式： 链接式（link） 代码如下 复制代码代码如下: <link rel=”stylesheet” href=”style.css” type=”text/css”/> 导入式（@impot） 复制代码代码如下: <style type=”text/...
html通过link标签引入css
qq_42650433的博客
12-17 3528
1.css文件： div{ border: 1px solid red; } span{ border: 4px solid green; } html文件: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--link标签专门用来引入css样式代码-->
字节跳动的面试经验，CSS学习记录01CSS简介、入门及三种导入方式，2024年前端开发书籍推荐
04-05 580
CSS代码保存在扩展名为.css的样式表中HTML文件引用扩展名为.css的样式表，有两种方式：链接式、导入式。语法：1、链接式2、导入式链接式:推荐使用导入式1、属于XHTML2、优先加载CSS文件到页面@import1、属于CSS2.1特有2、先加载HTML结构在加载CSS文件。
CSS：链接外部css样式时候link标签使用方法
热门推荐
weixin_43731793的博客
06-12 2万+
1、link实例 <link rel="stylesheet" href="img/divcss5.css" type="text/css" /> 链接外部css样式时候link标签的内容结构解释——css引用 href值为外部资源地址，这里是css的地址 rel定义当前文档与被链接文档之间的关系,这里是外部css样式表即stylesheet type规定被链接文档的 MIME 类...
HTML link 标签
小蜜蜂的专栏
03-04 2069
概述 link标签,当在文档中声明使用外接资源(比如CSS)时使用此标签 link标签是单独出现的属性 href -- 指定需要加载的资源(CSS文件)的地址URI media -- 媒体类型rel -- 指定链接类型,设定是指对象和链接目标的关系,可选值, link还可以用Shortcut Icon等rev -- 指定链接类型 type -- 指定所连接文档的MIME类型，css的M
css之link标签
weixin_30484247的博客
10-08 171
html5发布后，对html5标签做了一些解释，比如html5是继承自html4.01而不是xhtml,因此在xhtml里面强制要求的东西在html5就不在强制，事实上，浏览器对他们毫无负担，完全是人为规定，个人来说虽然我有完美情节，更崇尚简介原则。 <link rel="stylesheet" href="style.css" /> 　　 是html5对的推荐...
多个CSS样式文件的link问题
u013679573的博客
12-07 7612
在web项目的开发过程中，CSS样式无疑是页面设计中不可缺少的一环。然而当写了多个CSS文件以后，并且在同一个页面进行link引用。就会出一些问题。接下来就对问题及其解决方式做出说明。 调用样式的部分代码如下： 在本web开发中，此页面link了如下样式： 当以这种顺序来编写时，页面的样式结果如下： 很明显诸如字体、背景颜色等样式被下面两种CSS文件的样式所覆盖。 当把CSS
CSS 页面中引用外部 .css 文件(<link />)
houyanhua1的专栏
10-31 1384
CSS中link 和@import的区别是？
stranger5的博客
03-16 481
本质上，这两种方式都是为了加载CSS文件，但还是存在着细微的差别。 　　1. 老祖宗的差别。link属于XHTML标签，而@import完全是CSS提供的一种方式。 link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。 　　2. 加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的
CSS中 link 和@import 的区别是什么
weixin_44346202的博客
10-12 141
link属于HTML标签，而@import是CSS提供的，且只能加载 CSS 页面被加载时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载 import只在IE5以上才能识别，而link是HTML标签，无兼容问题 link方式的样式的权重 高于@import的权重 ...
除了link style和@import还有什么方法可以引入css
09-17
### 回答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、付费专栏及课程。

余额充值