在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. Even and Odd Functions

    \subsection{Even and Odd Functions} For a function $f$ in the form $y=f(x)$, we describe its type of ...

  2. Android中设置分割线

    设置分隔线的方法一: 在需要设置分隔线的布局文件中加入如下代码: <View     android:layout_width="fill_parent"      andr ...

  3. IDEA13 项目配置

    之前用了一段时间的idea,有些老的代码,用eclipse跑了一下,比较麻烦,于是试用一下idea,最后,项目可以顺利跑起来. 对项目的配置,主要是在F4中,即:Module Setting,在模块的 ...

  4. 创建TFS备份计划失败，错误提示：TF400997

    问题描述 在一个TFS 2018 + SQL Server 2017的环境中,从TFS控制台中配置备份计划时,系统提示错误TF400997,需要授予数据库服务账户sqlservice@domain.c ...

  5. LeetCode147:Insertion Sort List

    题目: Sort a linked list using insertion sort. 解题思路: 按题目要求,直接进行插入排序 实现代码: #include <iostream> us ...

  6. hdu 4325 Flowers（区间离散化）

    http://acm.hdu.edu.cn/showproblem.php?pid=4325 Flowers Time Limit: 4000/2000 MS (Java/Others)    Mem ...

  7. Validation failed for one or more entities. See ‘EntityValidationErrors’ property for moredetails[转]

    这里给大家介绍一个Exception类,让我们能够轻松的知道具体的哪一个字段出了什么问题. 那就是 System.Data.Entity.Validation.DbEntityValidationEx ...

  8. 第七章 ReentrantLock总结

    常用方式: int a = 12; //注意:通常情况下,这个会设置成一个类变量,比如说Segement中的段锁与copyOnWriteArrayList中的全局锁 final ReentrantLo ...

  9. 如何做好iOS应用安全？这有一把行之有效的“三板斧”

    本文由  网易云发布. iOS应用面临很多破解问题,常见的有IAP内购破解.山寨版本.破解版本等:大众应用上,微信抢红包.微信多开等:而在iOS游戏上,越来越泛滥的外挂问题也不断困扰着游戏厂商. 网易 ...

  10. 通过谷歌浏览器,找到页面某个事件属于哪个js文件

    在进行web开发中,有时候需要找到某个事件是属于哪个js文件,以便对文件进行修改,进行代码开发 1.打开谷歌浏览器, 打开事件所在页面, 鼠标右键, 点击"检查"项; 2.选中El ...