CSS系列：在HTML中引入CSS的方法
HTML与CSS是两个作用不同的语言，它们同时对一个网页产生作用，因此必须将CSS与HTML链接在一起使用。在HTML中，引入CSS的方法主要有4种：行内式、内嵌式、导入式和链接式。
1. 行内式
行内式即在标记的style属性中设定CSS样式，这种方式本质上没有体现CSS的优势，因此不推荐使用。
行内式示例：
<div style="font-size:12px; text-align:center;">HTML中引用CSS的行内式方法</div>
2. 嵌入式
嵌入式将页面中各种元素的设置集中写在<head></head>之间，对于单一的网页使用方便。但对于包含很多页面的网站，如果每个页面都以嵌入式方式设置各自的样式，也将失去CSS带来的优点，因此一个网站通常都是编写一个独立的CSS文件，然后将其引入HTML文档中。
嵌入式示例：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title></title>
<style type="text/css">
div {
font-size: 12px;
text-align: center;
}
</style>
</head>
<body>
<div>HTML中引用CSS的嵌入式方法</div>
</body>
</html>
3. 导入式与链接式
导入式和链接式的目的都是将一个独立的CSS文件引入HTML文件中，二者的区别在于链接式使用HTML的标记引入外部CSS文件，而使用导入式则是使用CSS的规则引入外部CSS文件。
使用链接式引入外部CSS文件示例：
<link href="~/Content/Base.css" rel="stylesheet" type="text/css" />
使用导入式引入CSS文件示例：
<style type="text/css">
@import "/Content/Base.css"
</style>
采用这两种方式的显示效果区别：使用链接方式时，会在加载页面主体部分之前加载CSS文件，这样显示出来的网页从一开始就是带有样式效果的。而使用导入式时，会在整个页面加载完成后再加载CSS文件，对于有的浏览器来说，在一些情况下，如果网页文件比较大，则会出现显示无样式的页面，闪烁一下之后再出现设置样式后的效果。从用户体验来说，这是使用导入式的一个缺陷。
对于一些比较大的网站，为了便于维护，可能会希望把所有的CSS样式分别写在几个CSS文件中，这样如果使用链接式引入，就需要几个语句分别导入CSS文件。如果要调整CSS文件的分类，就需要同时调整HTML文件。这对于维护工作来说是一个缺陷。如果使用导入式，则可以只引入一个总的CSS文件，在这个文件中再导入其他独立的CSS文件。
如果仅需要引入一个CSS文件，则使用链接方式；如果需要引入多个CSS文件，则首先用链接方式引入一个“目录”CSS文件，这个“目录”CSS文件中再使用导入式引入其他CSS文件。
但是如果希望通过JavaScript来动态决定引入哪个CSS文件，则必须使用链接方式才能实现。
4. 浏览器的私有属性
Webkit类型的浏览器（如Safari、Chrome）的私有属性是以-webkit-为前缀的，Gecko类型的浏览器（如Firefox）的私有属性是以-moz-为前缀的，Opera浏览器的私有属性是以-o-为前缀的，IE浏览器的私有属性是以-ms-为前缀的（只IE8+支持-ms-前缀）。
CSS系列：在HTML中引入CSS的方法的更多相关文章
- HTML中引入CSS的方法
在HTML中引入CSS的方法主要有四种,它们分别是行内式.内嵌式.链接式和导入式. 1.行内式 行内式是在标记的style属性中设定CSS样式.这种方式没有体现出CSS的优势,不推荐使用. 2.内嵌式 ...
- HTML中引入CSS的四种常用方法及各自的缺点
在HTML中引入CSS的方法主要有四种,它们分别是行内式.内嵌式.链接式和导入式. 1.行内式 行内式是在标记的style属性中设定CSS样式.这种方式没有体现出CSS的优势,不推荐使用.格式如下: ...
- 在html中引入css、js和jQuery的方法
在html中引入css代码 在html中插入CSS样式表的方法有三种: 1.外部样式表(External style sheet):即所有的样式单独写在一个.css文件中,在html文件的head部分 ...
- vue的cli中引入css文件
在public文件中创建一个文件夹css,放进reset.css 在main.js中引入即可 import '../public/css/reset.css'就可以啦
- 在HTML中引入CSS的方式
有 4 种方式可以在 HTML 中引入 CSS.其中有 2 种方式是在 HTML 文件中直接添加 CSS 代码,另外两种是引入 外部 CSS 文件. ㈠内联方式 内联方式指的是直接在 HTML 标 ...
- vue-cli中引入jquery的方法
vue-cli中引入jquery的方法 以前写vue项目都没有引入过jquery,今天群里面的一位小伙伴问了我这个问题,我就自己捣鼓了一下,方法如下: 我们先进入webpack.base.conf.j ...
- SSM项目 以及 springboot 中引入swagger2的方法
swagger2是一个非常好用的接口文档,在开发的过程中方便前后端接口的交接. 下面我们就来讲讲在使用java时,分别在SSM框架,以及springboot+mybatis框架中引入swagger2的 ...
- Spring MVC：在jsp中引入css
为了将css引入jsp中,今天可真是踩了好多坑,最后在stackoverflow上找到了解决方法,不多说贴出代码. 在web.xml中添加以下代码: <servlet-mapping> & ...
- vue中引入css文件
两种方式引入css文件,一种是直接在main.js中引入(也可以在其他的.vue文件中的<script></script>标签中),即下面这种写法: import 'eleme ...
随机推荐
- Git 总结
详情请参考:https://git-scm.com/book/zh/v2 注意事项:#1. 多提交(相当于多保存,多^S): 在Git中任何已提交的东西几乎总是可以恢复的. 甚至那些被删除的分支中的提 ...
- Zabbix自定义监控8080端口的连接数
Zabbix自定义监控8080端口的连接数 一 zabbix自定义监控实现思路 实际上我们要想使用zabbix来监控一些服务的原理很简单,步骤分别是:1.写一个脚本用于获取待监控服务的一些状态信息2. ...
- jQuery知识点二 实现隔行变色
<!DOCTYPE html> <html> <head> <meta name="viewport" content="wid ...
- 纯css3制作写轮眼开眼及进化过程
今天是火影忍者(漫画)宣告完结的日子,也是我首发的第一个随笔.看过火影的朋友都知道,写轮眼是什么,这里就不多说了.下面就直接展示整个效果,上张图,先睹为快: 目前已经测试 IE10.Firefox浏览 ...
- Java多线程--线程安全问题的相关研究
在刚刚学线程的时候我们经常会碰到这么一个问题:模拟火车站售票窗口售票.代码如下: package cn.blogs.com.isole; /* 模拟火车站售票窗口售票,假设有50张余票 */ publ ...
- XF custom render 各平台实现类
目前的XF还是非常简陋的,所以存在大量的自定义工作.一般情况下我们只是要需要派生原生的XF控件,然后在各平台下修改其呈现方法. 所以了解每个XF控件在不同平台上呈现使用的控件类是有所必须要的.以下别人 ...
- Javascript设计模式学习三（策略模式）
定义:定义一系列的算法,把它们一个个封装起来,并且使它们可以互相替换.目的:将算法的使用和算法的实现分离开来.比如: if(input == 'A'){ return 1; } if(input == ...
- php 全局变量
参考链接:http://www.cnblogs.com/borage/p/3645285.html
- 下载时，经常看见ASC、MD5、SHA1等，是干什么的呢？
一 进行文件一致性校验 为了确保你得到的文件是正确的版本,而没有被注入病毒和木马程序.例如我们经常在网上下载软件,而这些软件已经被注入了一些广告和病毒等,如果不进行文件与原始发布商的一致性校验的话,可 ...
- Ecmascript 6新特性
声明变量由var变成let.let实际上为JavaScript新增了块级作用域.let与var相比具有的特性有 1.不允许重复声明一个变量 var a=5; var a=7; let b=6; let ...