有 4 种方式可以在 HTML 中引入 CSS。其中有 2 种方式是在 HTML 文件中直接添加 CSS 代码，另外两种是引入 外部 CSS 文件。

 

㈠内联方式

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

 

㈡嵌入方式

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

 

 

㈢链接方式

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

 

 

㈣导入方式

导入方式指的是使用 CSS 规则引入外部 CSS 文件。

 

比较链接方式和导入方式

链接方式（下面用 link 代替）和导入方式（下面用 @import 代替）都是引入外部的 CSS 文件的方式，下面我们来比较这两种方式。

  • link 属于 HTML，通过 <link> 标签中的 href 属性来引入外部文件，而 @import 属于 CSS，所以导入语句应写在 CSS 中，要注意的是导入语句应写在样式表的开头，否则无法正确导入外部文件；

  • @import 是 CSS2.1 才出现的概念，所以如果浏览器版本较低，无法正确导入外部样式文件；

  • 当 HTML 文件被加载时，link 引用的文件会同时被加载，而 @import 引用的文件则会等页面全部下载完毕再被加载；

参考：菜鸟笔记

       希望有所帮助。

在HTML中引入CSS的方式的更多相关文章

  1. 引入CSS的方式、link和@import的区别

    引入CSS的方式有四种:内联方式.嵌入方式.链接方式.导入方式. 内联方式 内联方式指的是直接在 HTML 标签中的 style 属性中添加 CSS. <div style="back ...

  2. HTML中引入CSS的方法

    在HTML中引入CSS的方法主要有四种,它们分别是行内式.内嵌式.链接式和导入式. 1.行内式 行内式是在标记的style属性中设定CSS样式.这种方式没有体现出CSS的优势,不推荐使用. 2.内嵌式 ...

  3. HTML中引入CSS的四种常用方法及各自的缺点

    在HTML中引入CSS的方法主要有四种,它们分别是行内式.内嵌式.链接式和导入式. 1.行内式 行内式是在标记的style属性中设定CSS样式.这种方式没有体现出CSS的优势,不推荐使用.格式如下: ...

  4. 在html中引入css、js和jQuery的方法

    在html中引入css代码 在html中插入CSS样式表的方法有三种: 1.外部样式表(External style sheet):即所有的样式单独写在一个.css文件中,在html文件的head部分 ...

  5. CSS系列：在HTML中引入CSS的方法

    HTML与CSS是两个作用不同的语言,它们同时对一个网页产生作用,因此必须将CSS与HTML链接在一起使用.在HTML中,引入CSS的方法主要有4种:行内式.内嵌式.导入式和链接式. 1. 行内式 行 ...

  6. vue中引入css文件

    两种方式引入css文件,一种是直接在main.js中引入(也可以在其他的.vue文件中的<script></script>标签中),即下面这种写法: import 'eleme ...

  7. Spring MVC：在jsp中引入css

    为了将css引入jsp中,今天可真是踩了好多坑,最后在stackoverflow上找到了解决方法,不多说贴出代码. 在web.xml中添加以下代码: <servlet-mapping> & ...

  8. vue的cli中引入css文件

    在public文件中创建一个文件夹css,放进reset.css 在main.js中引入即可 import '../public/css/reset.css'就可以啦

  9. 引入css的方式

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

随机推荐

  1. 修改state（react）中的某一个对象中的单个参数

    react项目中我们经常会涉及到修改state中参数的问题,如果参数为常用的基本类型变量,我们可以直接通过this.setState({...})方法来进行修改,但是如果变量为一个对象我们要如何修改呢 ...

  2. C关于字符串操作的库函数实现总结

    常用C关于字符串操作的库函数实现: //获取字符串长度 int Strlen(const char* s) { assert(s != NULL); ; while (*s++ != '\0') { ...

  3. hue改下载行数

    参考: https://blog.csdn.net/lingbo229/article/details/85991230 修改hue所在机器的默认配置后,重启hue即可 find / -name be ...

  4. Windows文件共享配置与遇到的问题

    一.Windows 7 访问共享文件权限不足 问题 最近在 Windows 10 上共享了一个文件夹,并创建了一个用户,用于在别人访问该共享文件夹时进行认证,但是在一个同事的电脑(Windows7,当 ...

  5. PostgreSQL查看等待锁的SQL和进程

    查看等待锁的查询和进程: The following query may be helpful to see what processes are blocking SQL statements (t ...

  6. leecode100热题 HOT 100（2）

    # 题名 题解 通过率 难度 出现频率     142 环形链表 II       43.3% 中等     146 LRU缓存机制       43.3% 中等     148 排序链表       ...

  7. sql--index 索引

    CREATE INDEX 语句用于在表中创建索引. 在不读取整个表的情况下,索引使数据库应用程序可以更快地查找数据. 索引 您可以在表中创建索引,以便更加快速高效地查询数据. 用户无法看到索引,它们只 ...

  8. PanDownload/AD16/MDK5/CAD2019及2007/Dev-C++/Office2016专业版软件安装包

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明. 作者:struct_mooc 博客地址:https://www.cnblogs.com/stru ...

  9. 物联网的语言c,python,go等

    日本生鱼片 电热水器的使用方法http://www.hiry.cn/b/mt/33959.html 物联网层次很多,首先要看你从事哪个层级的工作了.既然你问语言,那么肯定是开发类的工作,开发类的对象中 ...

  10. （转）java并发编程：CopyOnWriteArrayList

    原文链接:http://ifeve.com/java-copy-on-write/ Copy-On-Write简称COW,是一种用于程序设计中的优化策略.其基本思路是,从一开始大家都在共享同一个内容, ...