牛腩发布系统--在HTML中引入CSS

浏览数：29 / 时间：2015年06月09日

1、CSS简介

级联样式表（Cascading style Sheet）简称CSS，是一种用来表现HTML或XML等文件样式的计算机语言，也是能够真正做到网页表现与内容分离的一种样式设计语言。能够对网页中的对象的位置排版进行像素级的控制，是目前基于文本展示应用最为广泛的语言。

牛腩发布系统中，就应用了CSS对网页进行了排版和控制，接下来讲解一下CSS在HTML中的引入方式。

2、引入方式

HTML与CSS时两个作用不同的语言，他们同时对一个网页产生作用，因此必须把两者挂接在一起，才能正常工作。在HTML中，引入CSS的方法主要有：行内式、内嵌式、导入式和链接式四种。

1）行内式

行内式即在标记的style属性中设定CSS样式，这种方式仅对一个标题产生效果，这种方式本质上没有体现出CSS的优势，所以，在实践中应用较少。

<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>HTML引入CSS</title>
</head>
<body>
    <h1 style ="color :cadetblue ;background-color : gray ">
        行内式引入
    </h1>
</body>

以上代码为行内式，仅对这一个h1标题产生效果，将文字颜色设为蓝色，背景色设为灰色，效果如下：

2）嵌入式

嵌入式将对页面中各种元素的设置集中在<head>和</head>之间，比较适用于单一的网页，对于多页面网站，内嵌式的引入就失去了CSS自身的优点。

上例中，如果希望页面中所有的h1标记都使用同一样式，就可以把样式移动到head部分，升级到内嵌式，代码如下：

<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>HTML引入CSS</title>
    <style type="text/css" >
        h1 {
            color: cadetblue;
            background-color: gray;
        }  
    </style>
</head>
<body>
    <h1>内嵌式引入CSS</h1>
    <h1>对整页h1标题产生效果</h1>
</body>

效果如图：

3）导入式

导入式是将一个独立的CSS文件引入HTML文件中。相对于前两种引入方式使用更为广泛。但是，使用导入式时，整个页面装载完成后才会装载CSS文件，对于一些网页文件体积比较大的浏览器，会先显示出无样式的页面，然后才会显示设置样式后的页面。代码如下：

h1 {    /*mystyle.css*/
    color :cadetblue;background-color: gray
}

/*HTML文档中style部分改为*/
<style type ="text/css" >
    @import "mystyle.css"
</style>

4）链接式

链接式与导入式一样是将一个独立的CSS文件引入HTML文件中。但在显示效果方面，会先载入CSS文件然后装载页面主体部分，所以页面从一开始显示就是带有样式效果的，在浏览者感受上来说，优于导入式。引入代码直接将导入式style部分删除，在head部分加入如下语句（也是牛腩中用的导入方法）：

<link href="mystyle.css" rel="stylesheet" type="text/css" />

导入式和链接式两种引入方法，都是将独立的CSS文件导入。除了以上在显示效果方面有差别以外，是否容易维护方面也有差别。当有多个CSS文件时，如果使用链接式引入，就需要几个语句分别导入CSS 文件。如果要调整整CSS 文件的分类,就需要调整HTML文件，不利于维护。导入式则可以指引见一个总的CSS文件，再在文件中导入其他独立的CSS文件。使用何种引入方式，要视具体情况而定。

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

牛腩发布系统--在HTML中引入CSS