在HTML中,引入CSS的方法主要有行内式、内嵌式、导入式和链接式

  行内式:即在标记的style属性中设定CSS样式,这种方式本质上没有体现出CSS的优势,因此不推荐使用。
例:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Text Demo</title>
</head>
<body>
<h1 style=color:white;background-color=blue;>
This is a line of Text.
</h1>
</body>
</html>

  嵌入式:嵌入式则将对页面中各种元素的设置集中写在<head>和</head>之间,对于单一的网页,这种方法很方便。但是对于一个包含很多页面的网站,如果每个页面都以

内嵌方式设置各自的样式,就失去了CSS带来的巨大优点,因此一个网站通常都是编写一个独立的CSS样式表文件,使用以下两种方式中的一种,引入HTML文档中。

例:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Text Demo</title>
<style type="text/css">
h1{
color:white;
background-color:blue;
}
</style>
</head>
<body>
<h1>This is a line of Text.</h1>
<h1>This is another line of Text.</h1>
</body>
</html>

  导入式与链接式:导入式和链接式的目的都是将一个独立的CSS文件引入HTML文件,二者有相应的区别。

  事实上,二者最大的区别在于链接式使用HTML的标记引入外部CSS文件,而使用导入式则是使用CSS的规则引入外部CSS文件。因此它们的语法也不同。

如果使用链接式,需要使用如下语句引入外部CSS文件。

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

  如果使用导入式,则需要使用如下语句。

<style type="text/css">
@import"mystyle.css";
</style>

  此外,采用这两种方式后的显示效果也略有区别。使用链接方式时,会在装置页面主体部分之前装载CSS文件,这样显示出来的网页从一开始就是带有样式的效果,而使用导入

式时,会在整个页面装载完成后再装载CSS文件,对于有的浏览器来说,在一些情况下,如果网页文件的体积比较大,则会出现先显示无样式的页面,闪烁一下之后再出现样式设置

后的效果。从浏览者的感受来说,这是使用导入式的一个缺陷。对于一些比较大的网站,为了便于维护,可能会希望把所有的CSS样式分类别放到几个CSS文件中,这样如果使用链

接式引入,就需要几个语句分别导入CSS文件。如果要调整CSS文件的分类,就需要同时调整HTML文件。这对于维护工作来说,是一个缺陷。如果使用导入式,则可以只引进一个

总的CSS文件,在这个文件中再导入其他独立的CSS文件;而链接式则不具备这个特征。

  因此建议,如果需要引入一个CSS文件,则使用链接方式;如果需要引入多个CSS文件,则首先用链接方式引入一个“目录”CSS文件,这个“目录”CSS文件中再使用导入式引入

其他CSS文件。

如果希望通过JavaScript来动态决定引入哪个CSS文件,则必须使用链接方式才能实现。

html引入css文件的更多相关文章

  1. jquery,js引入css文件,js引入头尾

    jquery,js引入css文件,js引入头尾 今天在项目中,需要把20多个页面加上头和尾部,头和尾是我写的,所以小师傅把这个工作交给我了. 我开始往里面加,先引入common.css,在body开始 ...

  2. vue脚手架使用swiper /引入js文件/引入css文件

    1.安装vue-cli 参考地址:https://github.com/vuejs/vue-cli 如果不使用严格语法需要在后三项打no:(加了挺头疼的,老是报错,但是对自己的代码规范性也是有很大的帮 ...

  3. vue中引入css文件

    两种方式引入css文件,一种是直接在main.js中引入(也可以在其他的.vue文件中的<script></script>标签中),即下面这种写法: import 'eleme ...

  4. (转)webpack和webpack-simple区别(如何引入css文件)

    博主最近研究vue+webpack的时候想引入css文件死活引入不出来,在webpack-simple那里却能引得出来,十分的纳闷,然后细心的调试了一下,原来这webpack和webpack-simp ...

  5. 如何使用Jquery 引入css文件

    如何使用Jquery 引入css文件: $("head").append("<link>");var toolbarCss = $("he ...

  6. vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件

    vue引入swiper  vue使用swiper  vue脚手架使用swiper /引入js文件/引入css文件 ------------------------------------------- ...

  7. vue中如何引入css文件

    两种方式引入css文件,一种是直接在main.js中引入(也可以在其他的.vue文件中的<script></script>标签中),即下面这种写法: import 'eleme ...

  8. 引入css文件时,css link和@import区别

    这里link与@import介绍的是html引入css的语法单词.两者均是引入css到html的单词. 一.了解基本 1.link语法结构 <link href="CSSurl路径&q ...

  9. 引入CSS文件的@import与link的权重分析

    我很少在CSS用到@import这个标签,最近看到一句话“link方式的样式的权重 高于@import的权重”,感觉不太对,@import只是一个引入外部文件而已,怎么会有高于link的权重呢?于是我 ...

随机推荐

  1. WebGL如何解决中文文字载入

    关于WebGL载入中文字体问题,我在网上搜了一下,发现例子并不多,而且只能实现隶书的载入,不支持其他中文字体. 下面是实现的代码: <script src="../js/three.m ...

  2. 第6章 第一个Linux驱动程序:统计单词个数

    编写一个Linux的一般步骤: 第1步:建立Linux驱动骨架(装载和卸载Linux驱动) 第2步:注册和注销设备文件 第3步:指定和驱动相关的信息 第4步:指定回调函数 第5步:编写业务逻辑 第6步 ...

  3. difference between forward and sendredirect

    Difference between SendRedirect and forward is one of classical interview questions asked during jav ...

  4. docker基本操作

    centos 7 安装docker 目前,CentOS 仅发行版本中的内核支持 Docker. Docker 运行在 CentOS 7 上,要求系统为64位.系统内核版本为 3.10 以上. Dock ...

  5. PHP开发调试环境配置(基于wampserver+Eclipse for PHP Developers )

    1 软件准 WampServer 下载地址:http://www.wampserver.com/en/#download-wrapper    我下的是 里面包含了搭建PHP必须的4个软件:   1. ...

  6. javascript之小积累-匿名函数表达式的最佳实践

    在写js的时候,还是经常会用的匿名函数表达式,比如 setTimeout(function() { console.log(110); }, 1000); 上面那个function()就是匿名函数表达 ...

  7. Java(六)——抽奖系统

     总体思路: 将编号加入ArrayList动态数组中,利用集合的静态方法Collections.shuffle() 乱序集合中的元素从而获得随机数,remove删除已抽编号  代码如下: import ...

  8. 必须掌握的八个cmd 命令

    一,ping 它是用来检查网络是否通畅或者网络连接速度的命令.作为一个生活在网络上的管理员或者黑客来说,ping命令是第一个必须掌握的DOS命令,它 所利用的原理是这样的:网络上的机器都有唯一确定的I ...

  9. Python 基礎 - 列表的使用

    如果想要存所有 Marvel's The Avengers 角色的人名,該如何存呢?請用目前已學到的知識來實做- #!/usr/bin/env python3 # -*- coding:utf-8 - ...

  10. logcat 基本使用

    adb logcat -c    //清空以前的日志 adb logcat -v time >  d:/sss.log       //将当前日志输出到d盘的sss.log中  sss.log不 ...