引入CSS的方式有四种：内联方式、嵌入方式、链接方式、导入方式。

内联方式

内联方式指的是直接在 HTML 标签中的 style 属性中添加 CSS。

<div style="background: red"></div>

这通常是个很糟糕的书写方式，它只能改变当前标签的样式，如果想要多个 <div> 拥有相同的样式，你不得不重复地为每个 <div> 添加相同的样式，如果想要修改一种样式，又不得不修改所有的 style 中的代码。很显然，内联方式引入 CSS 代码会导致 HTML 代码变得冗长，且使得网页难以维护。

嵌入方式

嵌入方式指的是在 HTML 头部中的 <style> 标签下书写 CSS 代码。

<head>

    <style>

    .content {

        background: red;

    }

    </style>

</head>

嵌入方式的 CSS 只对当前的网页有效。因为 CSS 代码是在 HTML 文件中，所以会使得代码比较集中，当我们写模板网页时这通常比较有利。因为查看模板代码的人可以一目了然地查看 HTML 结构和 CSS 样式。因为嵌入的 CSS 只对当前页面有效，所以当多个页面需要引入相同的 CSS 代码时，这样写会导致代码冗余，也不利于维护。

链接方式

链接方式指的是使用 HTML 头部的 <head> 标签引入外部的 CSS 文件。

<head>

    <link rel="stylesheet" type="text/css" href="style.css">

</head>

这是最常见的也是最推荐的引入 CSS 的方式。使用这种方式，所有的 CSS 代码只存在于单独的 CSS 文件中，所以具有良好的可维护性。并且所有的 CSS 代码只存在于 CSS 文件中，CSS 文件会在第一次加载时引入，以后切换页面时只需加载 HTML 文件即可。

导入方式

导入方式指的是使用 CSS 规则引入外部 CSS 文件，在<style>标签中使用@import。

<style>

    @import url(style.css);

</style>

链接方式link和导入方式@import的区别

两者都是外部引用CSS的方式，但是存在一定的区别：

  1. 放置的位置不同

    　　link一般放在head标签中

    @import必须放在<style  type="text/css">标签中

  2. 加载方式不同

    link会和dom结构一同加载渲染

    　　@import只能能dom结构加载完成以后才能渲染页面

  3. 兼容性不同

    link是在xhtml的标签，兼容IE各个版本

    　　@import是css2.1时提出来的，只能在IE6以上进行解析。

  4. 加载内容不同

    link是XHTML标签，除了可以加载css文件外，还可以定义RSS等其他事务。

    　　@import属于CSS范畴，只能加载css文件

  5. 当使用 Javascript 控制 DOM 去改变样式的时候，只能使用 link 方式，因为 @import 眼里只有 CSS ，不是 DOM 可以控制的，而link是html元素，可用javascript去控制dom元素最后达到改变样式的效果；

优先级

内联方式 > 嵌入方式 > 链接方式 > 导入方式

引入CSS的方式、link和@import的区别的更多相关文章

  1. css中：link和@import的区别

    两者都是外部引用css的方式.但是有一定的区别: 1. 从属关系:link是一个xhtml标签,除了加载css外,还可以定义 RSS.rel 连接属性等: @import属于css范畴,只能加载css ...

  2. css加载方式link和@import的区别！

    本质上,这两种方式都是为了加载CSS文件,但还是存在着细微的差别. 1. 老祖宗的差别.link属于XHTML标签,而@import完全是CSS提供的一种方式. link标签除了可以加载CSS外,还可 ...

  3. 引入CSS文件的方式，以及link与@import的区别

    一.引入css的方式 在HTML中引入css的方法主要有4种:行内式.内嵌式.链接式和导入式. 1.行内式 <div style="background:yellow;"&g ...

  4. 引入CSS的方式有哪些?link和@import的有何区别应如何选择【转载】

    看到淘宝网页中这样写使用的是import,而很多网站都是使用link,当然还有一些页面比较简单,流量很大的网站,是直接将CSS写在html代码中的?他们有什么区别?CSS用import还是link好? ...

  5. 页面引入css用link和import的区别

    假设有一个css文件a.css,文件里的内容如下: p { font-size: 18px; } 现在分别使用两种方式引入a.css: 1.使用html的link标签 <link rel=&qu ...

  6. css 样式引入的方法 link 与import的区别

    <link> 元素所参考的样式用户可以自由的选择加以改变,而导入的样式表单就自动的与剩下的样式表融合在一起了 CSS与HTML文档结合的4中方法:1 使用<link>元素链接到 ...

  7. 由link和@import的区别引发的CSS渲染杂谈

    我们都知道,外部引入 CSS 有2种方式,link标签和@import. 它们有何本质区别,有何使用建议,在考察外部引入 CSS 这部分内容时,经常被提起. 如今,很多学者本着知其然不欲知其所以然的学 ...

  8. 引入css的方式

    ---恢复内容开始--- 引入css的样式及link和@import的区别 有3种引入方式 1.内部样式(写在标签内) 2.内联样式 3.外部样式(link @import) 区别: 1.本质区别:l ...

  9. link 和@import 的区别

    两者都为外部引入css的方式. 他们的区别: 1.link属于HTML标签,而@import是css提供的 2.页面被加载时候,link会同时加载,而@import引入的文件会等到页面加载完成之后再进 ...

随机推荐

  1. 原生js浏览器兼容性问题

    1.HTML对象获取问题 FireFox:document.getElementById(“idName”); ie:document.idname或者document.getElementById( ...

  2. RHEL6-HA集群在VMware虚拟机环境安装配置文档

    (一)系统环境描述 本文档基于RHEL6u5 系统安装,配置为2节点高可用集群,节点为两台VMware虚拟机. 也可参考http://blog.51cto.com/ty1992/1325327 (二) ...

  3. Sunday算法浅谈

    一.Sunday算法简介 Sunday算法在我看来比起Kmp和bm都更加容易理解,代码实现也更加简洁.Sunday算法由Daniel M.Sunday在1990年提出,它的思想跟BM算法很相似只不过S ...

  4. es6二进制数组--基础

    一.概念二进制数组由 ArrayBuffer对象 TypeArray 视图和DataView视图 三部分组成是javascript操作二进制数据的一个接口. 早在2011年2月就已经发布,但是由于ES ...

  5. python练习：使用二分法查找求近似平方根，使用二分法查找求近似立方根。

    python练习:使用二分法查找求近似平方根,使用二分法查找求近似立方根. 重难点:原理为一个数的平方根一定在,0到这个数之间,那么就对这之间的数,进行二分遍历.精确度的使用.通过最高值和最低值确定二 ...

  6. python csv 读写操作

    import csv def read_csvList(path="./datasets/test.csv")->list: """return ...

  7. Ubuntu国内镜像

    编辑文件:sudo vim /etc/apt/sources.list 全部替换为:如下根据需要替换一个即可,修改保存后记得要执行更新软件包列表命令: sudo apt-get update 一.清华 ...

  8. Python - int()

    参考 https://docs.python.org/3/library/functions.html?highlight=int#int If x is not a number or if bas ...

  9. 利用 systemd 实现 Clash 开机自启

    利用 systemd 实现 Clash 开机自启 首先准备 Clash 的服务脚本,并保存为/etc/systemd/system/clash.service.内容如下: [Unit] Descrip ...

  10. Python NumPy中数组array.min(0)返回数组

    如果没有参数min()返回一个标量,如果有参数0表示沿着列,1表示沿着行.