CSS中link和import的加载顺序级别以及HTML加载顺序详解

最新推荐文章于 2021-07-05 14:11:07 发布
最新推荐文章于 2021-07-05 14:11:07 发布
阅读量6.1k 收藏 4
点赞数 1
分类专栏： css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_31765427/article/details/74230886
版权

概念：
(1)import与link的区别：
@import url(“CSS地址”) CSS专用语法
作用：@import作用于团队分工，最后合并一起
可以在.css中使用，即在一个css文件中能够引入另外的CSS文件，
或者是在标签使用，如下：

link：链接 relation：关联(可以省略)
type：类型 href： HyperText Reference超文本引用
作用：主要用来引入CSS和网页图标，指示告知搜索引擎，网页之间的关系…

(2)link与import加载顺序级别：link比import优先加载
加载顺序对于网站前台重构（优化网页结构，性能）有影响
第一：HTML，同时加载link,CSS和加载import的样式
HTML加载：1 加载HTML-DOM结构
2 CSS,JS
3 图片，多媒体
4 加载完成后onload事件触发
第二：加载顺序对网站的影响：
import：import放到底部，数据先出来，然后美化
link：CSS优先，边加载，边渲染
link无论放到哪里都是优先加载，import受代码顺序影响

用自己的CSS建议使用link，放前面
用第三方：import,js放到底部，不影响自己网站

实战讲解

<head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            @import url("css/a.css");
        </style>
        <link rel="stylesheet" type="text/css" href="css/b.css"> 
    </head>

在火狐浏览器中进行调试
这里写图片描述
由此可见 虽然在程序中a写在b的上面，但是b先比a加载。

骑着毛驴的小猴子
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
关于html,css,javascript的加载顺序问题
C05230的博客
01-04 647
CSS: link: 将样式单独抽离出来，写成一个css文件，在head标签中通过link标签导入 <link rel="stylesheet" href=""> @import 将样式单独抽离出来，写成一个css文件，在style标签内通过@import导入路径 <style> @import url('./cyh22.css'); </style> 1. link先加载css文件，@import先加载html文件 2.link 引
前端性能优化点总结
dianchou8532的博客
11-17 137
前端优化是一个大项目，不仅需要知道有哪些优化的点，还需要为什么去这样优化。 前端优化的思维导图 介绍一些知识，使大家对前端性能的优化有更深入的了解 html的渲染过程 用户输入网址（假设是个html页面，并且是第一次访问），浏览器向服务器发出请求，服务器返回html文件。 浏览器开始载入html代码，发现<head>标签内有一个<link&...
html/css基础篇——link和@inport详解以及脚本执行顺序探讨
chulinhu9266的博客
02-26 214
　　先说一说两者之间的异同 　　两者都可以引用外部CSS的方式，现在主流浏览器两者都支持（ps:@import是CSS2.1提出的），但是存在一定的区别： 1.link是XHTML标签，除了加载CSS外，还可以定义其他事务；@import属于CSS范畴，只能加载CSS也只能在css代码里面...
【Python】import xxx 文件的加载顺序分析
寒泉
12-25 3万+
测试代码 示例为精简版代码，与测试无关的部分（如必要的刷新缓冲区等）已省略。 运行 scheduler.py，其中引用了 core.py 中的 job_example() 函数。 然后验证其输出结果。 scheduler.py from app.job.core import job_example def job_1(): print 'Here run job_1, in sched...
链接样式顺序：link、visited、hover、active
y1238r的博客
11-26 1120
1、介绍 a:link - 正常，未访问过的链接 a:visited - 用户已访问过的链接 a:hover - 当用户鼠标放在链接上时 a:active - 链接被点击的那一刻 当设置为若干链路状态的样式，也有一些顺序规则： a:hover 必须跟在 a:link 和 a:visited后面 a:active 必须跟在 a:hover后面 2、css a:link { color: gray; } a:visited { color: red; } a:hover { color: green
css中link和@import的区别分析详解
01-19
导入CSS文件主要有两种方式： 链接式（link） 代码如下 复制代码代码如下: <link rel=”stylesheet” href=”style.css” type=”text/css”/> 导入式（@impot） 复制代码代码如下: <style type=”text/...
css link与@import区别详解
01-19
如何在html中添加css？ 在html中设置css共有三种方式，分别是： 行内式 内嵌式 导入式-link 导入式-@import 1.行内式。即在html标签中的style属性中设置css，值得注意的是css代码的名值对儿用冒号:来连接，用...
href和src、link和@import的区别详解
09-24
在HTML和CSS的世界里，`href` 和 `src`、`link` 和 `@import` 是两个关键的概念，它们在创建动态和静态网页时扮演着重要角色。理解这些概念的区别对于优化网页性能和布局至关重要。 首先，让我们来看一下 `href` 和...
Spring解析，加载及实例化Bean的顺序（零配置）
热门推荐
点滴之积
02-16 6万+
Spring零配置下@Bean,@Import,@ComponentScan形式定义Bean的解析，加载及实例化顺序
html超链接样式顺序,CSS页面布局常用知识汇总（超链接样式）
weixin_42423817的博客
06-04 1891
CSS中的知识非常多，我们不可能全都记得住。闲暇时整理了一些CSS页面布局的常用知识，这篇文章就和大家分享一下CSS超链接样式的常用知识。需要的朋友可以参考一下，希望可以帮助到你。设计网页时，我们可以通过伪类对链接的样式进行控制，引导用户浏览网页，增加互动的丰富元素。1、链接的属性超链接的标签为，网页上的超链接一般用来链接文字或者图片。超链接有4个伪类，分别代表链接的不同状态。a: link(超链...
Html中a标签的四个属性 link ,visited , hover ,active 是有顺序的! LVHA
u013257544的博客
03-25 2243
1。html中a标签的四个属性书写是有顺序的，如果顺序不对，显示效果有可能出现差错。 a:link{text-decoration:none ; color:#c00 ;} a:visited {text-decoration:none ; color:#c30 ;} a:hover {text-decoration:underline ; color:#f60 ;} a:activ...
Java SpringBoot @Import注解
这就是快乐嘛
07-05 783
@Import注解须知： 1.@Import只能用在类上，@Import通过快速导入的方式实现把实例加入spring的IOC容器中，可以实现@EnableXXX开启bean的加载。 2.加入IOC容器的方式有很多种，@Import注解就相对很牛皮了，@Import注解可以用于导入第三方包 ，当然@Bean注解也可以，但是@Import注解快速导入的方式更加便捷 @Import的用法 1.@Import({A.class,B,class,…}) 将括号里面的bean加入到spring容器中。 可以结合自定义
CSS引入样式的四种方法及优先级顺序
hong
09-11 7213
CSS引入样式的几种方法 css可以通过4种方式引入样式表 根据不同的需求可以选择不同的引入方式 但是它们也有不同的优缺点 内联样式 嵌入式样式 外部样式 @import 导入的方式 1.行内样式 特点 : 通过HTML的style属性实现 <div> <ul> <li style='margin-top: 10px;'></li> <li></li> <li></li> <li&
HTML引入CSS样式三种方法及优先级
王文松的博客
12-05 4万+
方法     css的样式引用由3种方式。分别为内联定义、链入内部CSS和链入外部CSS。有一点注意，样式表放在不同的地方，产生作用的范围不同（以下会说明）。 内联定义    内联定义，即在对象的标记内使用对象的style属性定义适用的样式表属性，格式定义为 :，如下示例 浏览器此时显示内容 链入内部CSS   CSS内链接是由标记对放在中，在中有一个类型属性type，
CSS详解漫谈
hwinte的博客
11-12 333
1 CSS介绍 HTML与CSS就是装修前后的区别 CSS是指层叠样式表 cascading style sheets 通过CSS可以让我们定义HTML元素如何显示（如何美丽的显示） CSS可以让我们原本HTML不能描述的效果，通过CSS描述出来（通过div） 通过CSS描述我们的html页面，可以让我们的页面更加漂亮，可以提高工作效率 HTML是创造世界，CSS是在创造世界的基础上让世界更加美丽 2 CSS与HTML结合方式 2.1 第一种方式 内联/行内样式 就是在我们的HTML标签上通过style属性
HTML页面的加载顺序
m0_37550086的博客
08-24 3万+
html、css、js前端老三样，JSP服务器端页面，我们讨论的是加载顺序的问题
【python】import导入顺序（风格）
shuhuai007的专栏
01-06 9530
核心风格: import 语句的模块顺序 我们推荐所有的模块在 Python 模块的开头部分导入。 而且最好按照这样的顺序: 1. Python 标准库模块 2. Python 第三方模块 3. 应用程序自定义模块 然后使用一个空行分割这三类模块的导入语句。 这将确保模块使用固定的习惯导入, 有助于减 少每个模块需要的 import 语句数目。 其他的提示请参考《 Python 风格指
nuxt设置css文件在客户端加载
最新发布
03-31
在Nuxt中，可以使用`nuxt-link`标签来加载客户端CSS文件。以下是在Nuxt中加载客户端CSS文件的步骤： 1. 在`nuxt.config.js`文件中设置`css`属性，指定要加载的CSS文件： ```javascript export default { css: [ '@/assets/css/main.css' ] } ``` 2. 在模板中使用`nuxt-link`标签来加载CSS文件： ```html <template> <div> <nuxt-link rel="stylesheet" href="/dist/css/main.css" /> <h1>Hello, world!</h1> </div> </template> ``` 注意：`nuxt-link`标签的`href`属性应该是相对于`static`文件夹的路径，而不是相对于根目录的路径。如果要使用绝对路径，请在路径前加上`~`符号。 ```html <nuxt-link rel="stylesheet" href="~assets/css/main.css" /> ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值