微信公众号 讲师中心
首页
文章
web3.0 后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 JavaScript 后端开发 数据库 移动端 运维开发 UI设计 计算机基础 XML Web Services
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
最近更新
搜索
web3.0 后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程
游戏教程 自媒体 新闻
首页 > web前端 > html教程 > 正文

@import与link的区别与选择_html/css_WEB-ITnose

php中文网
发布： 2016-06-24 11:50:46
原创
1506人浏览过

link

1 <head>2     <link rel="stylesheet" type="text/css" href="sheet1.css" media="all">3 </head>
登录后复制

@import

1 <style type="text/css">2     @import url(sheet1.css);      3 </style>
登录后复制

区别

  • 加载顺序：

    • 　　　　link是先将css文件加载到网页，然后再进行编译。@import是先加载完html结构再加载css文件，如果网速较慢则会影响视觉效果。

    　　　　link确保并行下载css文件，@import是一个一个下载。

    立即学习“前端免费学习笔记（深入）”；

    　　　　在IE中，link会阻断@import延长加载时间，多个@import的使用还会打乱资源文件的下载顺序引发js问题。

  • 兼容性：link是xhtml标签无兼容问题，@import是css2.1提出的所以不支持IE5以前的浏览器。
  • DOM支持：link支持DOM改变样式，@import不支持。
  • 此外，link标签还可以调用js文件、声明目录等，@import只能加载css。

    • 选择

  •  使用link:

    • 　　　　　link可以选定要加载的媒体media。由于上述加载、兼容与IE的原因，普通站点应当尽量使用link。　　　

    稿定AI社区
    稿定AI社区

    在线AI创意灵感社区

    稿定AI社区60
    查看详情 稿定AI社区
  •  使用@import:

    • 　　　　　大型门户网站（如淘宝）多个页面link同一个css文件会造成速度下降，@import可以在css中调入样式表，方便对css进行模块化管理。

     

    参考资料：

    高性能网站设计：不要使用@import

    [讨论]@import调用样式表的优势是什么呢？

    @import导入外部样式表与link链入外部样式表的区别

    大家都在看：

    HTML速学教程(入门课程)
    HTML速学教程(入门课程)

    HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！

    下载
    来源：php中文网
    收藏 点赞
    上一篇：css入门基础详细教程_html/css_WEB-ITnose 下一篇：使用模板引擎渲染HTML界面_html/css_WEB-ITnose
    本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
    最新问题
    使用JavaScript从HTML表格中获取成绩并按科目分类计算平均值 本教程详细介绍了如何利用JavaScript和DOM遍历技术，从动态生成的HTML表格中准确获取特定科目的成绩数据，并实现自动计算平均分。文章将通过优化HTML结构和JavaScript代码，指导开发者如何高效地关联成绩与科目，从而构建一个功能完善的成绩平均分计算器，并提供实际代码示例及注意事项。
    2025-11-03 08:21:10
    514
    HTML5在线如何实现文件预览 HTML5在线文档处理的编程技巧 答案：HTML5通过FileReader实现本地文件预览，结合PDF.js解析PDF、第三方库处理Office文档，并需注意安全与性能优化。
    2025-11-03 08:20:02
    610
    html内部链接怎么打_html内部链接如何打详细说明 内部链接通过锚点实现页面内跳转，先为目标元素设置唯一id，再用链接，配合scroll-behavior可实现平滑滚动。
    2025-11-03 08:18:02
    968
    html条款链接怎么打_html条款链接如何打专业教程 答案：使用标签插入条款链接需正确设置href属性指向目标页面，推荐添加target="_blank"和rel="noopenernoreferrer"确保安全，结合title提升可访问性，避免“点击这里”类文本，保持路径正确并优化移动端体验。
    2025-11-03 07:15:26
    810
    如何编辑网页HTML中的按钮动画_如何编辑网页HTML中按钮hover动画的代码 通过CSS实现按钮hover动画效果，可提升交互体验。一、使用transition属性设置平滑过渡，如颜色和缩放变化；二、结合transform实现旋转或缩放动画；三、利用box-shadow增强立体浮起感；四、通过@keyframes定义复杂动画序列，如渐变移动效果。
    2025-11-03 07:07:22
    674
    html打印链接怎么打_html打印链接如何打详细教程 使用CSS的@mediaprint和::after伪元素可在打印时显示链接地址，如a::after{content:"("attr(href)")";}，仅对外部链接显示可加属性选择器，配合word-wrap和字体调整优化布局，通过打印预览测试效果。
    2025-11-03 05:35:27
    534
    HTML第三方组件漏洞怎么更新_HTML引入第三方库漏洞更新与检查流程 答案：需建立包含资产清点、漏洞发现、评估、修复与验证的闭环流程。应使用依赖扫描工具、关注安全通告、配置CSP与SRI，并定期更新带版本号的CDN组件，结合自动化测试与CI/CD实现持续安全管理。
    2025-11-03 05:27:29
    110
    如何编辑网页HTML中的时间显示_如何编辑网页HTML中动态时间显示的代码 使用JavaScript在静态网页中动态显示时间，首先创建用于展示时间的HTML元素，通过Date对象获取当前时间并格式化为年月日或时分秒，利用setInterval每秒更新；可选择仅显示时间部分，支持12小时制AM/PM格式转换，并通过CSS设置字体、颜色、动画等样式，使时间信息清晰且美观地呈现在页面上。
    2025-11-03 02:23:09
    935
    如何书写html标签_HTML基础标签（div/p/img）书写规范与示例 div、p、img标签需规范书写：div用小写，合理使用class/id，避免过度嵌套；p标签成对出现，不嵌套块级元素；img为自闭合标签，必加src和alt属性。
    2025-11-03 00:19:20
    567
    怎么判断html5_HTML5特性检测与浏览器兼容性判断 通过特性检测判断HTML5支持情况，使用JavaScript直接测试功能或Modernizr库，避免依赖浏览器类型，结合渐进增强与polyfill方案确保兼容性。
    2025-11-03 00:11:35
    790
    相关专题
    更多>
    热门推荐
    开源免费商场系统广告
    热门教程
    更多>
    相关推荐
    热门推荐
    最新课程
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板
    关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
    php中文网：公益在线php培训，帮助PHP学习者快速成长！
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送
    PHP中文网APP
    随时随地碎片化学习
    PHP中文网抖音号
    发现有趣的

    Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部