html引入css文件
在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文件的更多相关文章
- jquery，js引入css文件，js引入头尾
jquery,js引入css文件,js引入头尾 今天在项目中,需要把20多个页面加上头和尾部,头和尾是我写的,所以小师傅把这个工作交给我了. 我开始往里面加,先引入common.css,在body开始 ...
- vue脚手架使用swiper /引入js文件/引入css文件
1.安装vue-cli 参考地址:https://github.com/vuejs/vue-cli 如果不使用严格语法需要在后三项打no:(加了挺头疼的,老是报错,但是对自己的代码规范性也是有很大的帮 ...
- vue中引入css文件
两种方式引入css文件,一种是直接在main.js中引入(也可以在其他的.vue文件中的<script></script>标签中),即下面这种写法: import 'eleme ...
- (转)webpack和webpack-simple区别（如何引入css文件）
博主最近研究vue+webpack的时候想引入css文件死活引入不出来,在webpack-simple那里却能引得出来,十分的纳闷,然后细心的调试了一下,原来这webpack和webpack-simp ...
- 如何使用Jquery 引入css文件
如何使用Jquery 引入css文件: $("head").append("<link>");var toolbarCss = $("he ...
- vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件
vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件 ------------------------------------------- ...
- vue中如何引入css文件
两种方式引入css文件,一种是直接在main.js中引入(也可以在其他的.vue文件中的<script></script>标签中),即下面这种写法: import 'eleme ...
- 引入css文件时，css link和@import区别
这里link与@import介绍的是html引入css的语法单词.两者均是引入css到html的单词. 一.了解基本 1.link语法结构 <link href="CSSurl路径&q ...
- 引入CSS文件的@import与link的权重分析
我很少在CSS用到@import这个标签,最近看到一句话“link方式的样式的权重 高于@import的权重”,感觉不太对,@import只是一个引入外部文件而已,怎么会有高于link的权重呢?于是我 ...
随机推荐
- iOS开发笔记1:[转]导航栏里的"Back"按钮显示不出来
最近项目中遇到一个问题,push过去的ViewController的Nav上面没有返回按钮,遂搜索资料,找到了以下文档.经测试i,问题解决. 原文地址:http://www.cnblogs.com/s ...
- css display:inline-block 出现空格解决方案
一: 给父元素添加 display: table;(只加这一句在谷歌, safari里可以) 子元素加: display: table-cell(火狐) 两句都加完美解决 二: .nav ul{fon ...
- 初学Spring
Spring是当今最流行的框架,今天开始,dayday同学要正式开始学习Spring了,加油 以下是一个简单的应用Spring框架的java程序 src\dayday\HelloSpring.java ...
- web系统测试 - 理解网络协议1 - 互联网历史沿革
1. web1.0,web2.0,web3.0的区别? web1.0:信息的获取者和消费者,信息由网站运营商创建 web2.0:用户创建内容(UGC: user generated content,论 ...
- SQL联合查询（内联、左联、右联、全联）的语法
联合查询效率较高,举例子来说明联合查询:内联inner join .左联left outer join .右联right outer join .全联full outer join 的好处及用法. 联 ...
- AI第一次作业
1. 你认为什么是人工智能? 在我看来,人工智能是是对人的意识.思维的信息过程的高度模拟,虽然它不是人的智能,但是高度模仿人的思考方式,加上它的信息高度集中,对信息的处理速度快,甚至于超过 ...
- C++/java之间的Socket通信大小端注意事项
在一个物联往项目中,需要java云平台与一个客户端做socket定制协议的通信:然而在第一次测试时,并没有按照预想的那样完成解析.查找资料以后是因为客户端的数据读取方式为小端模式,而java默认采用大 ...
- 混合开发H5的图片怎么适配自己想要的大小
1.先上个自己没适配的图,这个图没显示全,因为用的是webview 所以 用的是webView的代理事件 解决 2.上代码 NSString *injectionJSString = @"v ...
- Mysql游标阻止执行最后一次
DELIMITER $$ USE `you`$$ DROP PROCEDURE IF EXISTS `stockCursor`$$ CREATE DEFINER=`root`@`localhost` ...
- HDU 1237
http://acm.hdu.edu.cn/showproblem.php?pid=1237 表达式计算,方法是中缀转后缀,再计算.中间处理用栈操作 讲解看http://blog.csdn.net/a ...