1.2 (X)HTML与CSS

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

学85网3y页TSN网(http://www.xwangye.com)

1.2.1 CSS标准简介

和HTML类似，CSS也是由W3C组织负责制定和发布的。1996年12月，发布了CSS1.0规范；1998年5月，发布了CSS2.0规范。目前有两个新版本正在处于工作状态，即CSS2.1版和CSS3.0版。
目前，最主流的3中浏览器是IE6.0、IE7.0和Firefox,它们在中国的使用率总和超过了99％，而以这3种浏览器为目标，已经完全可以做出显示非常一致的CSS布局页面。
在了解了HTML与XHTML之间的关系以后，为了便于讲解，本书在后面的讲解种都不再使用XHTML这个名词，而统一使用HTML，起含义为(X)HTML。

学85网3y页TSN网(http://www.xwangye.com)

1.2.2在HTML种引入CSS的方法

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

学85网3y页TSN网(http://www.xwangye.com)

1.行内式

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

学85网3y页TSN网(http://www.xwangye.com)

2.嵌入式

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

学85网3y页TSN网(http://www.xwangye.com)

3.导入式与链接式

导入式和链接式的目的都是将一个独立的CSS文件引入HTML文件中，二者的区别不大。这里给出一个比较深入的介绍，因为很多读者对此都有疑问。
事实上，二者最大的区别在于链接式使用HTML的标记引入外部的CSS文件，而使用导入式则是使用CSS规则引入外部的CSS文件。因此它们的语法不同。
如果使用链接式，需要使用如下的语句引入外部的CSS文件

学85网3y页TSN网(http://www.xwangye.com)

<LINK href="mystlyle.css" type=text/css rel=stylesheet>

学85网3y页TSN网(http://www.xwangye.com)

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

学85网3y页TSN网(http://www.xwangye.com)

<STYLE type=text/css>
@import"mystyle.css";
</STYLE>

学85网3y页TSN网(http://www.xwangye.com)

此外，采用这两种方式后的显示效果也略有区别。使用链接方式时，会在装载页面主体部分之前装载CSS文件，这种显示出来的网页从一开始就时带有样式效果的，而使用导入式时，会在整个页面装载完成后再装载CSS文件，对于浏览器来说，在一些情况下，如果页面文件的体积比较大，则会出现显示无样式的页面，闪烁一下之后再出现设置样式后的效果。从浏览者的感受来说，这是使用导入式的一个缺陷。
对于一些比较大的网站，为了便于维护，可能会希望吧所有的CSS样式分类别放到几个CSS文件中，这样如果使用链接式引入，就需要几个语句分别导入CSS文件。如果要调整CSS文件的分类，就需要同时调整HTML文件。这对于维护工作来说，是一个缺陷。如果使用导入式，则可以只引进一个总的CSS文件，在这个文件中再导入其他独立的CSS文件；而且链接则不具备这个特性。
因此这里给大家的建议是，如果仅需要引入一个CSS文件，则使用链接方式；如果需要引入多个CSS文件，则受限用链接方式引入一个“目录”CSS文件，这个“目录”CSS文件中再使用导入式引入其他CSS文件。
但是，如果希望通过JavaScript来动态决定引入那个CSS文件，则必须使用链接方式才能实现。
这里给出一个完整的例子，显示各种导入方式的具体写法。为了本书中后面的章节中便于讲解，大多数情况使用内嵌式来完成，因为所举的例子通常都是一个独立的页面。
假设有如下页面代码。

学85网3y页TSN网(http://www.xwangye.com)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Text Demo</title>
</head>

学85网3y页TSN网(http://www.xwangye.com)

<body>
<h1 style="color:white; background-color:blue;">
This is a line of Text.</h1>
</body>
</html>

学85网3y页TSN网(http://www.xwangye.com)

代码中使用的是行内式，也就是直接在h1标记的style属性中设置CSS样式。这里将文字颜色设置为白色，背景色设置为蓝色，浏览器的效果如图1.4所示。

学85网3y页TSN网(http://www.xwangye.com)



图1.4  使用行内样式设置CSS

这种方式仅对这一个h1标题产生效果，因此如果希望页面中的所有h1标记都是使用这中样式，就可以将代码改造为内嵌式。方法是把样式从行内移动到head部分,具体的代码如下。

学85网3y页TSN网(http://www.xwangye.com)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Text Demo</title>
<style type="text/css">
h1{ color:white; background-color:blue}</style>
</head>

学85网3y页TSN网(http://www.xwangye.com)

<body>
<h1>This is a line of Text.</h1>
<h1>This is another line of Text.</h1>
</body>
</html>

学85网3y页TSN网(http://www.xwangye.com)

在head部分，这里的h1就称为“选择器”，即选中了网页中的某些特定元素，后面的样式规则和前面的行内规则的写法相同。注意，每一条规则都要以分号结束，最后一条则不必以分号结束。
这样，页面中所有的h1标题都会按照这种效果显示，如图1.5所示。

学85网3y页TSN网(http://www.xwangye.com)



图1.5  使用内嵌式设置CSS


 

学85网3y页TSN网(http://www.xwangye.com)

如果希望把CSS的规则都写到一个独立的文件中，然后引入HTML，应再单独写一个文件，文件名的后缀为.css，内容如下：

学85网3y页TSN网(http://www.xwangye.com)

h1{
color:white;background-color:blue
}

学85网3y页TSN网(http://www.xwangye.com)

然后将HTML文档中的<STLYE></STLYE>部分改为：

学85网3y页TSN网(http://www.xwangye.com)

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

学85网3y页TSN网(http://www.xwangye.com)


注意，这里需要指定正确的CSS文件路径
这样显示效果与上面的例子完全相同。如果要使用连接式引入这个CSS文件，可将上面的<stlye></stlye>部分删除，然后在head部分加入如下语句：

学85网3y页TSN网(http://www.xwangye.com)

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

学85网3y页TSN网(http://www.xwangye.com)

显示效果也完全相同的。

学85网3y页TSN网(http://www.xwangye.com)