CSS系列：在HTML中引入CSS的方法

时间 2019-11-18

标签 css 系列 html 引入方法栏目 CSS 繁體版

原文原文链接

HTML与CSS是两个做用不一样的语言，它们同时对一个网页产生做用，所以必须将CSS与HTML连接在一块儿使用。在HTML中，引入CSS的方法主要有4种：行内式、内嵌式、导入式和连接式。css

1. 行内式

行内式即在标记的style属性中设定CSS样式，这种方式本质上没有体现CSS的优点，所以不推荐使用。html

　　行内式示例：web

<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文件。spa

　　使用连接式引入外部CSS文件示例：code

<link href="~/Content/Base.css" rel="stylesheet" type="text/css" />

使用导入式引入CSS文件示例：htm

1 <style type="text/css">
2     @import "/Content/Base.css"
3 </style>

采用这两种方式的显示效果区别：使用连接方式时，会在加载页面主体部分以前加载CSS文件，这样显示出来的网页从一开始就是带有样式效果的。而使用导入式时，会在整个页面加载完成后再加载CSS文件，对于有的浏览器来讲，在一些状况下，若是网页文件比较大，则会出现显示无样式的页面，闪烁一下以后再出现设置样式后的效果。从用户体验来讲，这是使用导入式的一个缺陷。blog

　　对于一些比较大的网站，为了便于维护，可能会但愿把全部的CSS样式分别写在几个CSS文件中，这样若是使用连接式引入，就须要几个语句分别导入CSS文件。若是要调整CSS文件的分类，就须要同时调整HTML文件。这对于维护工做来讲是一个缺陷。若是使用导入式，则能够只引入一个总的CSS文件，在这个文件中再导入其余独立的CSS文件。ip

　　若是仅须要引入一个CSS文件，则使用连接方式；若是须要引入多个CSS文件，则首先用连接方式引入一个“目录”CSS文件，这个“目录”CSS文件中再使用导入式引入其余CSS文件。

　　可是若是但愿经过JavaScript来动态决定引入哪一个CSS文件，则必须使用连接方式才能实现。

4. 浏览器的私有属性

Webkit类型的浏览器（如Safari、Chrome）的私有属性是以-webkit-为前缀的，Gecko类型的浏览器（如Firefox）的私有属性是以-moz-为前缀的，Opera浏览器的私有属性是以-o-为前缀的，IE浏览器的私有属性是以-ms-为前缀的（只IE8+支持-ms-前缀）。