html中嵌入css怎么没有效果图,CSS系列：在HTML中引入CSS的方法

HTML与CSS是两个作用不同的语言，它们同时对一个网页产生作用，因此必须将CSS与HTML链接在一起使用。在HTML中，引入CSS的方法主要有4种：行内式、内嵌式、导入式和链接式。

1. 行内式

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

行内式示例：

HTML中引用CSS的行内式方法

2. 嵌入式

嵌入式将页面中各种元素的设置集中写在

之间，对于单一的网页使用方便。但对于包含很多页面的网站，如果每个页面都以嵌入式方式设置各自的样式，也将失去CSS带来的优点，因此一个网站通常都是编写一个独立的CSS文件，然后将其引入HTML文档中。

嵌入式示例：

div {

font-size: 12px;

text-align: center;

}

HTML中引用CSS的嵌入式方法

3. 导入式与链接式

导入式和链接式的目的都是将一个独立的CSS文件引入HTML文件中，二者的区别在于链接式使用HTML的标记引入外部CSS文件，而使用导入式则是使用CSS的规则引入外部CSS文件。

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

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

1

2 @import "/Content/Base.css"

3

采用这两种方式的显示效果区别：使用链接方式时，会在加载页面主体部分之前加载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-前缀)。

来源：http://www.cnblogs.com/joyco773/p/6182078.html