在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. [H5-Compress-Image]利用canvas实现 javascript 图片压缩处理_基于requirejs模块化的代码实现

    // 还存在有问题的代码,问题在于processFile()中// 问题:在ipone 5c 下,某些图片压缩处理后,上传到服务器生成的文件size为0,即是空白 ;define(['mod/tool ...

  2. smarty-2014-02-28

    使用smarty,在tpl文件中如何使用相对路径调用css&javascript文件,实际上这个相对路径的参照物就是以调用该tpl文件的php文件来写. 假如,我在index.php这个文件中 ...

  3. Python学习-2.安装IDE

    Python安装包中已经包含了一个IDE了,叫IDLE,可以在Python的安装目录内找到路径为 ./Lib/idlelib/idle.bat 或者可以在开始菜单中找到. 但是这个IDE功能很弱,缺少 ...

  4. CSS 温故而知新

    如何让文字垂直居中 需要设置div的height,line-height 为一样的值,如下所示: <div class="ui-bar ui-bar-e" style=&qu ...

  5. 深入理解Aspnet Core之Identity(3)

    主题 账户管理一个比较常见的功能就是密码强度策略,Identity已经内置了一个通用的可配置的策略,我们一般情况下可以直接拿来用即可.本篇我会介绍一些Identity内置的密码策略类:Password ...

  6. AJPFX简评：MT5平台

    MetaTrader 5全面改进的图表和扩展的功能 MetaTrader软件开发商在MT4获得全球交易商全面好评之后,又再次研发推出了更为先进的MT5交易软件.   MT5的主要特征●改进的图表和即时 ...

  7. Day 9 函数的初识1

    def my_len(): l1 = [1,2,3,5,6] print(111) print(222) return print(333)print(my_len()) 一.函数的定义1.遇到ret ...

  8. Python3.5 学习十

    多进程: 多线程和多进程的区别: Python多线程不适合CPU操作密集型的任务,适合IO操作密集型的任务(IO操作不占用CPU) Python折中解决多线程不能真正同步运算的方案是:起多个进程,每个 ...

  9. css3效果隔两秒旋转然后停两秒再继续旋转，无限循环

    1.旋转效果 <style type="text/css"> /*底部天象APP红包下载*/ .public_footer_app,.animation{ positi ...

  10. 【文文殿下】【CF724C】Ray Tracing (中国剩余定理）

    题解 我们考虑将棋盘扩大一倍,这样相当于取膜.然后,我们只要对x,y,的位置分类讨论,做四次crt就行.具体细节看文文代码. #include<cstdio> #include<al ...