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

1.行内式
          行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用。
2.嵌入式
          嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下：

<head>

<style type="text/css">

...此处写CSS样式

</style>

</head>

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

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

<style type="text/css">

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

</style>

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

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

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

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

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

文章转载自：http://blog.163.com/njq_166/blog/static/11263806120104183237651/

HTML引入CSS样式的四种方法的更多相关文章

  1. HTML 引用Css样式的四种方式

    不才,只知道HTML引用CSS样式有四种方式,内部引用和外部引用各两种,因为老是忘记细节,记下了随时翻阅亦可方便如我般的初学者 内部引用方式1: 直接在标签内用 style 引用,如: <div ...

  2. react添加样式的四种方法

    React给添加元素增加样式 第一种方法: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  3. js和jquery设置css样式的几种方法

    一.js设置样式的方法 1. 直接设置style的属性  某些情况用这个设置 !important值无效 element.style.height = '50px'; 2. 直接设置属性(只能用于某些 ...

  4. CSS垂直居中的四种方法

    写在前面的话 最近在Stack Overflow上看到 一个不错的回答 ,以下是我对其的总结,分享给大家. 垂直居中的四种方法 ①基础的方法 设置父元素的line-height等于height,这种方 ...

  5. 【JS新手教程】JS修改css样式的几种方法

    本文试验了几种JS修改css样式的方法,方法1:元素.style.样式=样式值.方法2:元素.style.cssText=样式:样式值方法3:元素.style[样式]=样式值 .cssText这种,可 ...

  6. 使用CSS样式的三种方法

    一.内联样式 内联样式通过style属性来设置,属性值可以任意的CSS样式. 1 <!DOCTYPE html> 2 <html lang="en"> 3 ...

  7. 原生javascript 获得css样式有几种方法？

    css 样式分为行内样式和 外部样式: 1.javascript 获得行内样式 : 可以使用  ele.style."属性名称"(如果遇到属性名称带有"-", ...

  8. HTML页面中插入CSS样式的三种方法

    1. 外部样式 当样式需要应用于很多页面时,外部样式表将是理想的选择.在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观.每个页面使用<link>标签链接到样式表. &l ...

  9. js改变css样式的三种方法

    共用代码: <div id="div">this is a div</div> var div=document.getElementById('div') ...

随机推荐

  1. eclipse快捷键（增加一些4连组合快捷键）

    http://www.blogjava.net/i369/articles/83309.html   ECLISPE的快捷键大全 Eclipse 常用快捷键收集2006年09月29日 星期五 12:0 ...

  2. 浏览器中调用PHP在执行linux sudo指令时报sudo: sorry, you must have a tty to run sudo

    在php程序中使用了exec函数调用sudo指令,在浏览器中访问后,报sudo: sorry, you must have a tty to run sudo错误. 按照网上搜到的方法,修改/etc/ ...

  3. 经典串匹配算法（KMP）解析

    一.问题重述 现有字符串S1,求S1中与字符串S2完全匹配的部分,例如: S1 = "ababaababc" S2 = "ababc" 那么得到匹配的结果是5( ...

  4. c#中在函数后紧跟=>，几个意思，差点懵逼到没有朋友！

    以下是一段新建.net core web中的代码: namespace TempCoreApp { public class Program { public static void Main(str ...

  5. 自定义Asp.net core——日志记录

    本文我将演示如何定制日志记录.默认的日志记录仅仅向控制台或者debug窗口输出日志,这样可以满足一些情况,但是你可能还需要把日志记录到一个磁盘文件或者数据库,或者你想为记录额外的信息.这样的场景你就需 ...

  6. 2D Circular Geometry Kernel ( Geometry Kernels） CGAL 4.13 -User Manual

    1 Introduction The goal of the circular kernel is to offer to the user a large set of functionalitie ...

  7. ligerUI利用a标签下载文件

    一.利用WriteFile实现下载,并验证文件是否存在,将指定的文件直接写入HTTP响应输出流.注意:大型文件使用此方法可能导致异常.可以使用此方法的文件大小取决于 Web 服务器的硬件配置. (1) ...

  8. 廖雪峰Python学习笔记——序列化

    序列化 定义:程序运行时所有变量都存在内存中,把变量从内存中变成可存储或可传输的过程称为序列化pickling,在其他语言中称为serialization,marshalling,flattening ...

  9. 任务查询系统(cqoi2015,bzoj3932)(主席树)

    最近实验室正在为其管理的超级计算机编制一套任务管理系统,而你被安排完成其中的查询部分.超级计算机中的 任务用三元组\((S_i,E_i,P_i)\)描述,\((S_i,E_i,P_i)\)表示任务从第 ...

  10. linux crontab 实现每秒执行的实例

    linux crontab 命令,最小的执行时间是一分钟.如需要在小于一分钟内重复执行,可以有两个方法实现. 1.使用延时来实现每N秒执行 原理:通过延时方法 sleep N  来实现每N秒执行. 创 ...