有 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. rtsp学习----海康RTSP客户端连接深入分析

    转载于:http://blog.csdn.net/zhouyongku/article/details/41546789 海康相机RTSP连接代码分析 最近在做海康相机rtsp连接获取音视频的工作,现 ...

  2. 列出bug的几种状态

    1.New:(新的) 当某个“bug”被发现的时候(第一次),测试人员需要与项目负责人沟通以确认发现的的确是一个bug,如果被确认是一个bug,就将其记录下来,并将bug的状态设为New. 2.Ass ...

  3. jenkins-docker部署

    安装docker http://www.cnblogs.com/cjsblogs/p/8717304.html 安装jenkins mkdir -p /root/dockerfile/base/cen ...

  4. Radio stations CodeForces - 762E (cdq分治)

    大意: 给定$n$个三元组$(x,r,f)$, 求所有对$(i,j)$, 满足$i<j, |f_i-f_j|\le k, min(r_i,r_j)\ge |x_i-x_j|$ 按$r$降序排, ...

  5. Css常用的技巧

    一.使用css缩写 使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.  具体内容请浏览:CSS常用缩写语法 二.明确定义单位,除非值为0. 忘记定义尺寸的单位是CSS新手普遍的错误.在HTML中 ...

  6. pycharm设置用滑轮改变字体大小

    在电脑第一次安装pycharm之后,发现每次调整代码界面的字体,总是需要到setting里面调整,这样非常不方便,特别是对于代码量很多的时候,我们有时候需要把目光聚焦到某一句代码,这个时候就需要放大, ...

  7. Linux硬件访问技术

    在Linux系统中,无论是内核程序还是应用程序,都只能使用虚拟地址,而芯片手册中给出的硬件寄存器地址或者RAM地址则是物理地址,无法直接使用,因此,我们读写寄存器的第1步就是将将它的物理地址映射为虚拟 ...

  8. Red Hat Enterprise Linux 6安装好，开启网卡到搭建tftp服务器和安装dnw驱动，安装samba服务器

    今天一顿误操作,只能把Red Hat Enterprise Linux 6重新安装,一些必备工作只能重做,重做之后立马把Linux的文件备份,以备不时只需! 开启Linux以太网卡:vim /etc/ ...

  9. 常见shell用法

    分析nginx访问日志 awk '{a[b[$1]++]}END{for(i=length(a);i>0;i--)for(j in b)if(b[j]==i){c++;if(c<=10)p ...

  10. java string split 怎么保留尾部空字符串

    # 不保留尾部空字符串 public class QQ { public static void main(String[] args) { String str = "a,b,c,d,&q ...