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-前缀)。

posted @ 2014-12-25 15:51  libingql  阅读(4861)  评论(0编辑  收藏  举报