引入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. mysql区分大小写问题

  2. spring框架相关概念

    软件行业的二八法则?技术中只有20%是最常用和最关键的,决定你的基础,后面的80%决定你的潜能! 概念: 1,轻量级框架,用户需要什么功能就自己添加相应的功能模块,不像重量级框架,一旦用,所有功能都添 ...

  3. 吴裕雄 python 机器学习——数据预处理字典学习模型

    from sklearn.decomposition import DictionaryLearning #数据预处理字典学习DictionaryLearning模型 def test_Diction ...

  4. 【PAT甲级】1101 Quick Sort (25 分)

    题意: 输入一个正整数N(<=1e5),接着输入一行N个各不相同的正整数.输出可以作为快速排序枢纽点的个数并升序输出这些点的值. trick: 测试点2格式错误原因:当答案为0时,需要换行两次

  5. Ansible playbooks（任务、角色、模板、变色器、）

    playbooks配置文件: [root@ansible ~]# vim /etc/ansible/hosts [test01] 192.168.200.114 [test02] 192.168.20 ...

  6. python中for循环中的循环变量

    废话不多说,代码伺候: for i in range(3): print("hello") print(i) 运行结果如下: 从上面的例子可以看出,for循环里面的循环变量i作用域 ...

  7. 5_5 集合栈计算机（UVa12096）<stack与STL其他容器的综合运用>

    有一个专门为了集合运算而设计的“集合栈”计算机.该机器有一个初始化为空的栈,并支持以下操作:( 维护 N(1≤N≤2000) 个操作, 可能的五种操作如下:) ■PUSH: 在栈顶加入一个空集合 A= ...

  8. np.multiply

    用法:np.multiply(x1,x2),作用:逐元素相乘,若x1和x2均为标量,则返回标量 x1=np.array([,,]) x2=np.array([,,]) np.multiply(x1,x ...

  9. Vue 项目中使用less

    首先 你得有 完整的 Vue开发环境第一步 安装less 依赖 npm install less less-loader --save 第二步 修改webpack.config.js文件,配置load ...

  10. 第十八天re模块和&#183;正则表达式

    1.斐波那契  # 问第n个斐波那契数是多少 def func(n): if n>2: return func(n-2)+func(n-1) else: return 1 num=int(inp ...