有 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. 利用docker搭建本地私有镜像仓库

    主机名 角色 sht-sgmhadoopcm-01 Docker Repository sht-sgmhadoopnn-01 Docker Client 1. 在两台节点分别安装docker http ...

  2. PTA(Basic Level)1042.字符统计

    请编写程序,找出一段给定文字中出现最频繁的那个英文字母. 输入格式: 输入在一行中给出一个长度不超过 1000 的字符串.字符串由 ASCII 码表中任意可见字符及空格组成,至少包含 1 个英文字母, ...

  3. PostgreSQL查询数据库中包含某种类型的表有哪些

    and c.relnamespace = n.oid and nspname = 'public' and a.atttypid = t.oid and typname = 'TEXT' and c. ...

  4. powershell 删除7天前的文件

    powershell 删除7天前的文件 $today=Get-Date #"今天是:$today" #昨天 #"昨天是:$($today.AddDays(-1))&quo ...

  5. 面试40-一个数组，有2个数字出现奇数次，其余都是偶数次，求这两个数字O(n) O(1)

    #include<iostream> using namespace std; // 题目:数组中只有不多于两个数字出现次数是奇数次,其他都是偶数次,求出出现奇数次的数字(不含0的数组) ...

  6. C++11智能指针原理和实现

    一.智能指针起因 在C++中,动态内存的管理是由程序员自己申请和释放的,用一对运算符完成:new和delete. new:在动态内存中为对象分配一块空间并返回一个指向该对象的指针: delete:指向 ...

  7. 区间前k小的和（权值线段树+离散化）--2019牛客多校第7场C--砍树

    题目链接:https://ac.nowcoder.com/acm/contest/887/C?&headNav=acm 题意: 给你 n 种树,有 高度,花费和数量 ,现在问你最少需要花多少钱 ...

  8. GitHub从小白到熟悉<五>

    GitHub    主页 

  9. Robot Framework（一）安装笔记

    参考网址:https://www.cnblogs.com/yinrw/p/5837828.html因为自己安装了py,网上教程都是统一安装py2.7开始的. 所以这里总结下安装笔记:cmd命令界面进行 ...

  10. awk--基本操作

    二:awk--将一行分为数个字段处理 PS:awk [option] '条件类型 {动作1} 条件类型{动作2} ...' filename PS: awk 'Pattern {action}' fi ...