在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. Discoverer Table

    http://www.cnblogs.com/fandychen/p/3182826.html EUL4_BAS Table gives list of Business Areas EUL4_OBJ ...

  2. [FMX]在你的跨平台应用中使用剪贴板进行复制粘贴

    [FMX]在你的跨平台应用中使用剪贴板进行复制粘贴 2017-08-10 • Android.C++ Builder.Delphi.iOS.教程 • 暂无评论 • swish •浏览 516 次 VC ...

  3. [JS] Ajax请求会话过期处理

    对于页面来说,处理session过期比较简单,一般只需在过滤器里面判断session用户是否存在,不存在则跳转页面到登陆页即可. 对于Ajax请求来说,这个办法则无效,只能获取到登录页的html代码. ...

  4. Layui 手册一

    icon-图标 1:√2:×3:问号4:锁5:哭脸6:笑脸7:感叹号 使用layer.msg('',{ icon:1 });  目前只提供7种图标可选,用的适当还是很好看的. 表格刷新 parent. ...

  5. NET 集合交集、并集、差集操作

    , , , , , , , }; , , , , , , , , }; // List1:1 3 5 7 9 11 13 15 Console.WriteLine("List1:" ...

  6. .net mvc使用FlexPaper插件实现在线预览PDF,EXCEL,WORD的方法

    FlexPaper插件可以实现在浏览器中在线预览pdf,word,excel等. 在网上看到很多关于这个插件实现预览的技术,但是很难做到word和excel在线预览. pdf很好实现. 首先下载相关的 ...

  7. pageadmin CMS网站建设教程：如何修改用户密码？

    pageadmin CMS网站建设教程: 当我们想修改密码,该如何修改呢? 1. 首先,登录会员中心,会员中心的地址是在网址后面加上/member/login: 2. 例:我的网站地址是localho ...

  8. Day 19 re 模块 random模块,正则表达式

    https://www.cnblogs.com/Eva-J/p/7228075.html#_label10 findall search match方法 和 search相比 match自带 ^ se ...

  9. Windows 环境下使用强大的wget工具

    安装 下载[http://www.interlog.com/~tcharron/wgetwin.html] 解压到目录 比如我解压到D:\Tool\wget 添加wget环境变量,这样使用就更方便了, ...

  10. 873. Length of Longest Fibonacci Subsequence

    A sequence X_1, X_2, ..., X_n is fibonacci-like if: n >= 3 X_i + X_{i+1} = X_{i+2} for all i + 2 ...