1.2 (X)HTML与CSS

(X)HTML与CSS的关系就是“内容”与“形式”的关系，由(X)HTML确定网页的内容，而通过CSS来决定页面的表现形式。

一、CSS标准简介

和HTML类似，CSS也是由W3C组织负责制定和发布的。1996年12月，发布了CSS 1.O规范；1998年5月，发布了CSS 2.0规范。目前有两个新版本正在处于工作状态。即CSS 2.1版和CSS 3.0版。

图1所示的是2011年3月24日CSS 3.0发布的待批准的推荐版，读者可以到http://www.w3.org/TR/下载

图1 W3C组织发布的CSS 3.0规范工作稿

然而W3C并没有任何强制力要求软件厂商的产品必须符合规范，因此目前流行的浏览器都没有完全符合CSS的规范，这也就给设计师设计网页带来了一些难题。

但是随着技术的发展，各种浏览嚣都会逐渐在这方面做更多的努力，相信情况会越来越好。目前，最主流的3种浏览器是IE 7.0，IE 8.0和Firefox．它们在中国的使用率总和越过了99%,．而以这3种浏览器为目标．已经完全可以做出显示非常一致的CSS布局页面。

在了解了XHTML与HTML之间的关系以后，为了便于讲解，本教程在后面的讲解中都不再使用XHTML这个名词，而统一使用HTML，其含义为(X)HTML。

二、在HTML中引入CSS的方法

HTML与CSS是两个作用不同的语言，它们同时对一个网页产生作用，因此必须通过一些方法，将CSS与HTML挂接在一起，才能正常工作。

在HTMI中，引入CSS的方法主要有行内式、内嵌式，导入式和链接式4种。

1.行内式

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

2.嵌入式

嵌入式则将对页面中各种元素的设置集中写在<head>和</head>之阃。对于单一的两页。

这种方式很方便。但是对于一个包含很多页面的网站，如果每个页面都以内嵌方式设置各自的样式，就失去了CSS带来的巨大优点，因此一个网站通常都是编写一个独立的CSS样式表文件，使用以下两种方式中的一种，引入HTML文档中。

3.导入式与链接式

导入式和链接式的目的都是将一个独立的CSS文件引入HTML文件，二者的区别不大。这里给出一个比较深入的介绍，因为很多读者对此都有疑问。

事实上．二者最大的区别在于链接式使用HTML的标记引入外部CSS文件，而使用导入式则是使用CSS的规则引入外部CSS文件。因此它们的语法也不同。

如果使用链接式，需要使用如下语句引入外部CSS文件。

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

如果使用导人式，则需要使用如下语句。

<style type="text/css">
@import "wangyexx.css";
</style>

此外，采用这两种方式后的显示效果也略有区别。使用链接方式时，会在装载贞面主体部分之前装载CSS文件，这样显示出来的网页从一开始就是带有样式效果的，而使用导入式时，会在整个页面装载完成后再装载CSS文件，对于有的浏览器来说，在一些情况下，如果网页文件的体积比较大，则会出现先显示无样式的页丽，闪烁一下之后再出现设置样式后的效果。从浏览者的感受来说，这是使用导入式的一个缺陷。

对于一些比较大的网站，为了便于维护，可能会希望把所有的CSS样式分类别放到几个CSS文件中，这样如果使用链接式引入，就需要几个语句分别导入CSS文件。如果要调整CSS文件的分类，就需要同时调整HTML文件。这对于维护工作来说，是一个缺陷。如果使用导入式，则可以只引进一个总的CSS文件，在这个文件中再导人其他独立的CSS文件；而链接则不具备这个特性。

因此这里给大家的建议是，如果仅需要引入一个CSS文件，则使用链接方式；如果需要引入多个CSS文件，则首先用链接方式引入一个“目录”CSS文件，这个“目录”CSS文件中再使用导人式引入其他CSS文件。

但是如果希望通过JavaScript来动态决定引入哪个css文件，则必须使用链接方式才能实现。

这里给出一个完整的例子，演示各种导入方式的具体写法。为了在本教程后面的章节中便于讲解，大多数情况使用内嵌式来完成，因为所举的例子通常就是一个独立的页面。

假设有如下页面代码。