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

引入外部CSS的两种方式及区别_html/css_WEB-ITnose

php中文网
发布： 2016-06-24 11:21:22
原创
1086人浏览过

1、CSS的两种引入方式

  • 通过@import指令引入

    • 　　@import指令是css语言的一部分，使用时把这个指令添加到html的一个

    　　要与外部的CSS文件关联起来，得使用url而不是href，并且要把路径放在一个圆括号里面；

    <html><head><style type="text/css">        @import url(css/styles.css);</style><!--此处的type属性是针对HTML4.01的，若在HTML5中则不需要加--></head><body>......</body></html
    登录后复制

  • 通过标签引入（最常用方式）

    • <link type="text/css" href="style.css" rel="stylesheet" /><!--同理，type属性是针对HTML4.01的-->
    登录后复制

    2、两种方式的区别

  • 标签属于html标签，而@import是css提供的一种方式，标签不仅可以引入css，还可以做其他事，而@import只能引入css；
  • 加载顺序的区别：当一个页面被浏览时，link引入的css会被同步加载，而@import引用的css是等到其他元素全被下载完之后才被加载；
  • 兼容性的不同：@import是CSS2.1才提出的，所以只有在IE5以上才支持，低版本的浏览器不支持，而标签无此问题；
  • 当使用javascript控制DOM去改变样式时，只能使用标签，因为@import不是DOM可以控制的。

    • 　　

    　　//笔试或面试中有可能遇到！！！

    火山方舟
    火山方舟

    火山引擎一站式大模型服务平台，已接入满血版DeepSeek

    火山方舟 99
    查看详情 火山方舟

     

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

    大家都在看：

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

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

    下载
    来源：php中文网
    收藏 点赞
    上一篇：请教大神，使用js在文本段落后插入div图片容器,结果图片却显示到段落前了，代码如下。非常感谢！_html/css_WEB-ITnose 下一篇：关于IE8下css的background属性不起作用的解决办法_html/css_WEB-ITnose
    本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
    最新问题
    如何解决团队在线HTML编辑权限管理的解决办法 选择支持细粒度权限的协作平台如GitHub、Notion等，实现只读、评论、编辑等角色控制；2.建立RBAC机制，按角色分配操作权限，结合分支保护与CI/CD流程防止非法修改；3.使用Git进行版本控制，通过PullRequest审核和提交记录追踪确保修改可审计；4.隔离生产环境，搭建测试环境供编辑预览，经审批后通过部署流程上线，关键页面锁定以防误改。
    2025-11-15 23:59:02
    318
    html转pdf转换器_html转pdf网页版工具 答案：推荐使用html2pdf.com在线工具，支持网页链接或HTML代码转PDF，保留排版、图片和字体，操作简单无需安装软件，提供自定义页面设置与多语言支持，转换速度快且保障隐私安全。
    2025-11-15 23:59:02
    932
    如何在Atom中集成HTML预处理器Sass的详细教程 首先安装Node.js和DartSass，再在Atom中安装atom-sass等插件，配置文件结构与编译规则，通过插件或命令行监听实现.scss文件自动编译为CSS，并在HTML中引入生成的CSS文件，从而提升开发效率。
    2025-11-15 23:58:02
    252
    Windows11如何用右键新建HTML文件快速开始学习？ 通过修改注册表或使用第三方工具，可在Windows11右键菜单添加“新建HTML文件”选项。首先可进入HKEY_CLASSES_ROOT.html创建ShellNew项并设置FileName值为空，实现快速新建空白HTML文件；若需预设结构，可创建包含标准HTML代码的template.html模板文件，并将其路径填入FileName值中，使新建文件自动继承基础结构；为避免手动编辑注册表风险，还可借助ContextMenuManager等工具可视化添加该功能，简化操作流程。
    2025-11-15 23:56:02
    936
    Linux gnome-text-editor设置CSS自动补全HTML标签 GNOMETextEditor不支持HTML标签自动补全或CSS提示，因其功能基础且无LSP支持；推荐使用VisualStudioCode、SublimeText等编辑器实现HTML/CSS智能补全与语法高亮。
    2025-11-15 23:55:31
    356
    手机HTML网页版入口 HTML网页版手机免费工具 手机HTML网页版入口在CodePen官网（https://www.codepen.io），用户可通过浏览器直接访问，使用其在线编辑、实时预览、多设备适配及社区分享功能进行移动端网页开发与测试。
    2025-11-15 23:55:02
    509
    视图如何插入html_视图（如MVC）中HTML内容插入方法 在MVC中插入HTML可通过五种方式实现：一、使用@Html.Raw(ViewBag.HtmlContent)输出未编码的HTML字符串；二、通过@Html.Partial("_MyPartial")嵌入可复用的分部视图；三、利用@awaitComponent.InvokeAsync("MyComponent")调用ViewComponent动态生成内容；四、使用JavaScript的innerHTML或insertAdjacentHTML方法在客户端动态插入；五、在控制器中将HTML字符串赋值
    2025-11-15 23:54:06
    355
    html滚动条样式怎么在safari生效_html滚动条Safari浏览器适配方法 Safari桌面版支持-webkit-scrollbar自定义滚动条，需确保元素可滚动并使用::-webkit-scrollbar、track、thumb等伪元素设置样式，同时添加border:1pxsolidtransparent等触发渲染；而移动端Safari不支持该特性，建议保持默认样式或用JavaScript模拟。
    2025-11-15 23:54:06
    570
    html在线编辑器有哪些推荐 html在线工具的性能对比评测 根据用途选择在线HTML编辑器：学习测试可用W3Schools或菜鸟工具，开发者协作推荐CodePen或JSFiddle，需可视化编辑可选HTML-Online.com。
    2025-11-15 23:53:02
    223
    Windows OneDrive同步HTML+CSS项目到多台电脑 使用OneDrive同步HTML+CSS项目可行，需将项目放入OneDrive文件夹并登录同一账号实现多端同步。应采用英文命名、避免特殊字符，使用相对路径引用资源，如href="css/style.css"。推荐结构：my-website/下分设css、js、images目录。注意同步延迟、文件冲突可能产生副本，且无版本控制功能。建议配合VSCode等编辑器统一环境，手动备份重要版本，进阶用户可结合GitHub实现双重备份与版本管理。
    2025-11-15 23:51:05
    996
    相关专题
    更多>
    热门推荐
    开源免费商场系统广告
    热门教程
    更多>
    相关推荐
    热门推荐
    最新课程
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板
    关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
    php中文网：公益在线php培训，帮助PHP学习者快速成长！
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送
    PHP中文网APP
    随时随地碎片化学习

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

  • PHP学习

  • 技术支持

  • 返回顶部