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 ...
随机推荐
- Windows快捷键
一.常见用法: F1 显示当前程序或者windows的帮助内容. F2 当你选中一个文件的话,这意味着“重命名” F3 当你在桌面上的时候是打开“查找:所有文件” 对话框 F10或ALT 激活当前程序 ...
- C数组下标越界
之前总听说C语言的各种毛病,今天算是遇到一个:数组下标越界 事情经过 两段完成不相干的代码,一段是测温度的,一段是测转速的.两段代码单独运行都没有问题,但是若运行测转速的代码,测温度的数据就会发生错误 ...
- Backbone事件模块及其用法
事件模块Backbone.Events在Backbone中占有十分重要的位置,其他模块Model,Collection,View所有事件模块都依赖它.通过继承Events的方法来实现事件的管理,可以说 ...
- 转→js数组遍历 千万不要使用for...in...
看到一篇内容还不错,但是排版实在糟糕, 逼死强迫症患者啊,直接拉下去找原文连接,找到了,但是已经消失了···500错误... 第一次因为实在看不下去一篇博客的排版, 为了排版而转载... 转载地址:h ...
- spring MVC mybatis dispacherServlet(源码解读)
以下源码版本(4.2.0.RELEASE) dispacherServlet是servlet的实现类,是spring MVC的前端转发器,是spring MVC的核心. 那么它做了哪些事呢? 它主要做 ...
- SVN搭建简单教程
一.引言 笔者曾经试图在网上搜索一篇关于SVN源代码服务器搭建方面的中文技术文章,可惜,所找到的,要么是不完整,要么就是对笔者没什么帮助的文章,TortoiseSvn的帮助文档固然强大,但因为是英文, ...
- C程序汇编运行模式简析
SJTUBEAR 原创作品转载请注明出处 /<Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 1. 汇编 ...
- mysql 目录的了解以及Linux
Linux 目录 描述 / ...
- 用Python生成测试数据
转载自:http://blog.csdn.net/caz28/article/details/45972109 有时我们需要大量的数据,一般编个程序生成一堆随机数据,Python很适合文本处理,干这个 ...
- 【Android Studio】android Internal HTTP server disabled 解决
报错:Cannot start internal HTTP server. Git integration, JavaScript debugger and LiveEdit may operate ...