有 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. 【Python】【demo实验2】【打印乘法口诀表】

    打印乘法口诀表 源代码: # encoding=utf-8 for i in range(1,10): print("\n") for j in range(1,10): if i ...

  2. GrapeCity Documents for Excel 与 Apache POI 功能对比

    GrapeCity Documents for Excel 与 Apache POI 功能对比 GrapeCity Documents for Excel 是什么? GrapeCity Documen ...

  3. Python中的 _init__和 _new__的区别

    使用python 的面向对象写过程序之后,相信童鞋对 __init__ 方法已经非常的熟悉了.这个方法通常是 在初始化一个实例的时候使用的. 例如: class MysqlConnector(obje ...

  4. CF 1133B Preparation for International Women's Day

    题目链接:http://codeforces.com/problemset/problem/1133/B 题目分析 读完题目,凡是先暴力.....(不用想,第四组数据就TLE了,QAQ) 当两个数的和 ...

  5. AppCan调试问题

    来源:http://edu.appcan.cn/theVideoMain1.html?chapterId=248_1 第1步, 生成AppCan调试中心 第2步, 启动AppCan调试中心 第3步, ...

  6. php 如何生成path及其日常维护

    php 如何生成path及其日常维护 path字段重要性不言而喻,在查询的时候,如果只用pid,查询效率会很低,增加path,查询效率大大提高,最起码不用递归查库了,重点是维护推荐关系的时候要维护pa ...

  7. iView 发布后台管理系统 iview-admin

    简介 iView Admin 是基于 Vue.js,搭配使用 iView UI 组件库形成的一套后台集成解决方案,由 TalkingData 前端可视化团队部分成员开发维护.iView Admin 遵 ...

  8. C语言经典100例（51-100）

    [程序51] 题目:学习使用按位与 & . 分析:0&0=0; 0&1=0; 1&0=0; 1&1=1 #include "stdio.h" ...

  9. html5_禁止复制网站内容

    ```//若是你不想别人复制你的网站内容,可以把这段js代码加到你网页上,即可屏蔽鼠标右键菜单.复制粘贴.选中等 有时候的需求是网站中有些内容不希望别人复制,那么就需要用代码控制.方法有多种:第一种: ...

  10. Vue开发——实现吸顶效果

    因为项目需求,最近开始转到微信公众号开发,接触到了Vue框架,这个效果的实现虽说是基于Vue框架下实现的,但是同样也可以借鉴到其他地方,原理都是一样的. 进入正题,先看下效果图: 其实js做这个效果还 ...