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 ...

随机推荐

sift特征
已经有很多博客已经将sift特征提取算法解释的很清楚了,我只是记录一些我不明白的地方,并且记录几个理解sift特征比较好的博客. 1. http://aishack.in/tutorials/sift ...
C3P0连接池配置和实现详解
一.配置 <c3p0-config> <default-config>  ...
C++类成员在内存中的存储及对齐方式
前言:数据对齐的基本理论参见文章:http://www.cnblogs.com/MyBlog-Richard/articles/5993448.html 一.空类的大小 C++中空类的大小是1,这是因 ...
juery学习总结(一)——juery选择器
juery在工作中经常使用,遇到不会的问题往往百度一下,事后就忘.使用到现在也感觉不到有什么提高,为了每天进步一点点,从今天起抽时间记录下对juery的学习. 学习之前,首先要了解什么是网页元素,网页 ...
MyBatis日志配置
关于MyBatis的日志,其实MyBatis已经弄得很好了,你甚至都不用配置,只要导入了jar包,MyBatis就会自动寻找. 具体步骤 1.导入jar包,就是把下载MyBatis时,lib里的包复制 ...
codevs3304 水果姐逛水果街
题目描述 Description 水果姐今天心情不错,来到了水果街. 水果街有n家水果店,呈直线结构,编号为1~n,每家店能买水果也能卖水果,并且同一家店卖与买的价格一样. 学过oi的水果姐迅速发现了 ...
poj Flip Game 1753 (枚举)
Flip Game Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 27005 Accepted: 11694 Descr ...
spring 静态注入
1.静态注入在setter 方法修改为非 static , 然后在上面注入即可 @Component public class WeixinConfig { // token public stat ...
C# socket send方法
转 http://msdn.microsoft.com/zh-cn/library/d318fkch(v=vs.80).aspx
BZOJ4318——OSU!
1.题意:一个序列,连续的一段1对得分具有贡献,那么问期望得分 2.分析:一道裸的期望dp,那么新加入一个1,对答案的贡献为直接暴力算出期望的平方和期望,每次dp的时候更新一下就好了 #includ ...