在HTML中引入CSS的方法主要有四种，它们分别是行内式、内嵌式、链接式和导入式。

1、行内式

行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用。格式如下：

<div style=" width: 100%;height: 100%;margin: 10px;"> 内容 </div>

2、嵌入式

嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下：

<head>

<style type="text/css">

...此处写CSS样式

</style>

</head>

缺点是对于一个包含很多网页的网站，在每个网页中使用嵌入式，进行修改样式时非常麻烦。单一网页可以考虑使用嵌入式。

3、导入式

将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，<style>标记也是写在<head>标记中，使用的语法如下：

<head>

<style type="text/css">

@import url(mystyle.css); 此处要注意.css文件的路径

</style>

</head>

导入式会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。这是导入式固有的一个缺陷。

4、链接式

也是将一个.css文件引入到HTML文件中，但它与导入式不同的是链接式使用HTML规则引入外部CSS文件，它在网页的<head></head>标签对中使用<link>标记来引入外部样式表文件，使用语法如下：

<head>

<link href="mystyle.css" rel="stylesheet" type="text/css"/>

</head>

使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件，因此显示出来的网页从一开始就是带样式的效果的，它不会象导入式那样先显示无样式的网页，然后再显示有样式的网页，这是链接式的优点。

总结：一般来说，做网站时把样式多写在多个样式表文件中，因此我们先用链接式引入一个总的CSS文件，然后在这个CSS文件中在使用导入式来引入其他的CSS文件。但如果通过JavaScrip来动态引入CSS文件则只能使用链接式。

HTML中引入CSS的四种常用方法及各自的缺点的更多相关文章

  1. PHP中引入文件的四种方式详解

    四种语句 PHP中有四个加载文件的语句:include.require.include_once.require_once. 基本语法 require:require函数一般放在PHP脚本的最前面,P ...

  2. PHP中引入文件的四种方式及区别

    文件加载语句:include,require,include_once,require_once include,require: require函数通常放在 PHP 程序的最前面,PHP 程序在执行 ...

  3. 引入css的四种方式

    1.内联式引用:直接用在标签上,但维护成本高 style='font-size:16px;color:#000000' 2.外部连接式引用:css代码与html代码分离,便于代码重复使用 <li ...

  4. 页面中CSS的四种引入方式的介绍与比较

    转自:https://blog.csdn.net/qq_38689666/article/details/79039392 一:行内式 <p style="color:red" ...

  5. 《网页设计基础——CSS的四种引入方式详解》

    网页设计基础--CSS的四种引入方式详解     一.行内式:   规则: 1. 行内式是所有样式方法中最为直接的一种,它直接对HTML的标记使用style属性,然后将CSS代码直接写在其中.   格 ...

  6. 使用CSS隐藏HTML元素的四种常用方法

    CSS隐藏HTML元素的四种常用方法 1.opacity:设置opacity: 0可以使一个元素变得完全透明. 设置的透明度会被子元素继承,而且无法取消. 通常可以使用opacity属性来制作元素的淡 ...

  7. Java更新XML的四种常用方法简介

    本文简要的讨论了Java语言编程中更新XML文档的四种常用方法,并且分析这四种方法的优劣.其次,本文还对如何控制Java程序输出的XML文档的格式做了展开论述. JAXP是Java API for X ...

  8. HTML中引入CSS的方法

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

  9. 在HTML中引入CSS的方式

    有 4 种方式可以在 HTML 中引入 CSS.其中有 2 种方式是在 HTML 文件中直接添加 CSS 代码,另外两种是引入 外部 CSS 文件.   ㈠内联方式 内联方式指的是直接在 HTML 标 ...

随机推荐

  1. python字符串内置方法

    网上已经有很多,自己操作一遍,加深印象. dir dir会返回一个内置方法与属性列表,用字符串'a,b,cdefg'测试一下 dir('a,b,cdefg') 得到一个列表 ['__add__', ' ...

  2. jvm参数及分析工具

    -Xmx4G 设置堆的最大内存大小为4GB,也可通过-XX:MaxHeapSize=4GB进行设置 -Xms256m 设置堆的初始内存大小为256兆,如果未设置此选项,则初始大小将设置为新生代和年老代 ...

  3. my goal

    I want to get a good command of a programming language at the university, and I have to pass the tes ...

  4. ABP异常处理

    1.编译器错误消息: CS0012: 类型“System.Object”在未被引用的程序集中定义.必须添加对程序集“System.Runtime, Version=4.0.0.0, Culture=n ...

  5. eclipse Android项目 DDMS db文件 导出 Failed to pull selection null 问题

    我在 eclipse的Android项目中,在 DDMS导出db文件 时,发现报错:Failed to pull selection null 在左侧选中设备,在进行导出 这样就可以正常的进行导出db ...

  6. JavaScript几种常见的继承方法

    1.call() 方法 call() 方法是与经典的对象冒充方法最相似的方法.它的第一个参数用作 this 的对象.其他参数都直接传递给函数自身 function Huster(name,idNum, ...

  7. 在Linux服务器上使用Vbox安装虚拟机

    先去官网(www.virtualbox.org)上下载对应Linux系统的Vbox版本. 我这边用的是Oracle Linux 7系统(KDE安装) 使用rpm安装virtualbox 发现报错,按照 ...

  8. （原创）Spice 网表范例

    一.常规网表 Inverter .lib "D:\lib\l0040ll_v1p4_1r.lib" TT .param SUPPLY=.1V .param T=10ns .para ...

  9. python学习第四次笔记

    python学习第四次记录 列表list 列表可以存储不同数据类型,而且可以存储大量数据,python的限制是 536870912 个元素,64位python的限制是 1152921504606846 ...

  10. Java学习笔记(7)

    File类用于处理文件和目录 isDirectory()用于检查当前对象是否目录,isFile()用于检查当前对象是否文件 构造File对象时,传入的路径不一定要求存在,要通过exists()方法判断 ...