• 技术文章 >web前端 >前端问答

    怎么外部引入css

    藏色散人藏色散人2021-05-14 10:26:32原创3882

    外部引入css的方法:1、使用link来调用外部的css文件,标签定义文档与外部资源的关系;2、使用@import引用外部CSS文件。

    大前端零基础入门到就业:进入学习

    本文操作环境:Windows7系统、css3版、Dell G3电脑

    怎么引入外部css?

    方法1:使用link来调用外部的css文件

    在网页的<head></head>标签对中使用<link>标记来引入外部样式表文件,使用html规则引入外部css。

    <link> 标签定义文档与外部资源的关系,<link> 标签最常见的用途是链接样式表。

    语法:

    <link rel="stylesheet" href="css文件路径" type="text/css" />

    链接外部css样式时候link标签的内容结构解释:

    href:为外部资源地址,这里是css的地址

    rel:定义当前文档与被链接文档之间的关系,这里是外部css样式表即stylesheet

    type:规定被链接文档的 MIME 类,这里是值为text/css

    说明:

    这种方法会以网页文件主体装载前装载CSS文件,因此显示出来的网页从一开始就是带样式的效果的,它不会象导入式那样先显示无样式的网页,然后再显示有样式的网页。

    方法2:使用@import引用外部CSS文件

    CSS @import规则,用于从其他样式表导入样式规则。这些规则必须先于所有其他类型的规则,@import不能在条件组的规则中使用。

    @import规则语法

    @import url("文件路径");

    说明:

    这种方法会在整个网页装载完后再装载CSS文件,因此这就导致了一个问题,如果网页比较大则会儿出现先显示无样式的页面,闪烁一下之后,再出现网页的样式。这是导入式固有的一个缺陷。

    两种调用外部css样式方法的区别:

    @import是 CSS 提供的语法规则,只有导入样式表的作用;link是HTML提供的标签,不仅可以加载 CSS 文件,还可以定义 RSS、rel 连接属性等。

    加载页面时,link标签引入的 CSS 被同时加载;@import引入的 CSS 将在页面加载完毕后被加载。

    @import是 CSS2.1 才有的语法,故只可在 IE5+ 才能识别;link标签作为 HTML 元素,不存在兼容性问题。

    可以通过 JS 操作 DOM ,插入link标签来改变样式;由于 DOM 方法是基于文档的,无法使用@import的方式插入样式。

    link引入的样式权重大于@import引入的样式。

    推荐学习:《css视频教程

    以上就是怎么外部引入css的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

    前端(VUE)零基础到就业课程:点击学习

    清晰的学习路线+老师随时辅导答疑

    自己动手写 PHP MVC 框架:点击学习

    快速了解MVC架构、了解框架底层运行原理

    专题推荐:css
    上一篇:css伪类是什么 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• ❤️‍🔥接口自动化测试不想写代码?• css中怎么进行注释• css怎么设置浮动• 什么是css样式层叠表• css怎么设置span的宽度• css怎么设置字体颜色大小
    1/1

    PHP中文网