XHTML与CSS介绍

2012/11/23 14:07:36作者：佚名来源：网络

移动端

一、(X)HTML与CSS

为了解决HTML结构标记与表现标记混杂在一起的问题，引入了 CSS这个新的来专门负责页面的表现形式。XHTML用于结构化内容；CSS用于决定页面的表现形式。

二、CSS标准

CSS(Cascading Style Sheet,层叠样式表）是一种制作网页的新技术，现在已经为大多数浏览器所支持，成为网页设计必不可少的工具之一。

网页最初是用HTML标记来定义页面文档及格式，如标题<hl>、段落<p>、表格<table>等。但这标记不能满足更多的文档样式需求，为了解决这个问题，在1997年W3C颁布HTML4标准的同时也公布了有关样式表的第一个标准CSSl。自CSSl的版本之后，又在1998年5月发布了CSS2版本，样式表得到了更多的充实。使用CSS能够简化网页的格式代码，加快下载显示的速度，也减少了需要上传的代码数量，大大减少了重复劳动的工作量。

样式表首要目的是为网页上的元素精确定位。其次，它把网页上的内容结构和格式控制相分离。浏览者想要看的是网页上的内容结构，而为了让浏览者更好地看到这些信息，就要通过使用格式来控制。内容结构和格式控制相分离，使得网页可以仅由内容构成，而将所有网页的格式通过CSS样式表文件来控制。

CSS主要有以下优点。

· 利用CSS制作和管理网页都非常方便，这只是CSS的其中一个优点，它还有其他的优点。
· CSS可以更加精细地控制网页的内容形式，如前面学过的<font>标记中的size属性，它
用来控制文字的大小，但它控制的字体大小只有7级，要是出现需要使用10像素或100像素大的字体的情况，HTM巴标记就无能为力了。利用CSS可以办到，它可以随意设置字体的大小。
· CSS样式是丰富多彩的，如滚动条的样式定义、鼠标光标的样式定义等。
· CSS的定义样式灵活多样，可以根据不同的情况，选用不同的定义方法，如可以在HTML文件内部定义，可以分标记定义、分段定义，也可以在HTML文件外部定义，基本上能满足使用。

三、传统HTML的缺点

在CSS还没有被引入页面设计之前，传统的HTML语言要实现页面美工设计是十分麻烦的。例如，在一个网页中有一个<h2>标记定义的标题，如果要把它设置为蓝色，并对字体进行相应的设置，则需要引入<font>标记，代码如下所示。

<h2><font color="#000oFF" face="黑体">css标记1</font></h2>

看上去这样的修改并不是很麻烦，但是当页面的内容不仅仅只有一段，而是整个页面时，情况就变得复杂了。首先看如下HTMI。代码，这段代码显示效果如图所示。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>传统HTML的缺点</title>
</head>
<body>
<h2><font color="#0000FF" face="幼圆">这是标题文本</font></h2>
<p>这里是正文内容</p>
<h2><font color="#0000FF" face="幼圆">这是标题文本</font></h2>
<p>这里是正文内容</p>
<h2><font color="#0000FF" face="幼圆">这是标题文本</font></h2>
<p>这里是正文内容</p>
</body>
</html>
HTML标题代码运行效果

这段代码在浏览器中的显示效果如图10．1所示，3个标题都是蓝色幼圆体字。这时如果要将这3个标题改成红色，在这种传统的HTML语言中就需要对每个标题的<font>标记进行修改如果是一个规模很大的网站，而且需要对整个网站进行修改，那么工作量就会非常大，甚至无法实现。

其实传统HTML的缺陷远不止上例中所反映的这一个方面，相比CSS为基础的页面设计方法，其所体现出的劣势主要有以下几点。

(1)维护困难。为了修改某个特殊标记(例如上例中的<h2>标记)的格式，需要花费很多的时间，尤其对于整个网站而言，后期修改和维护的成本很高。
(2)标记不足。HTML本身的标记很少，很多标记都是为网页内容服务的，而关于美工样式的标记，如文字间距、段落缩进等标记在HTML中很难找到。
(3)网页过“胖”。由于没有统一对各种风格样式进行控制，因此HTML的页面往往体积过大，占用了很多宝贵的带宽。
(4)定位困难。在整体布局页面时，HTML对于各个模块的位置调整显得捉襟见肘，过多的其他标记同样也导致页面的复杂和后期维护的困难。

四、如何编辑CSS

CSS的语句是内嵌在HTML文档中的。所以，编写css的方法和编写HTML文档的方法是一样的。可以用任何一种文本编辑工具来编写。比如Windows下的记事本和写字板、专门的HTML文本编辑工具(FrontPage、Dreamweaver等)，都可以用来编辑CSS文档。

要在Dreamweaver中添加CSS，先在Dreamweaver的主界面中，将编辑界面切换成“拆分视图，使用“拆分”视图能同时查看代码和设计效果。编辑语法在“代码”视图中进行。

在Dreamweaver中，我们不需要熟悉CSS的语法，就可以很轻松地设计出很美妙的网页效果。Dreamweaver代码模式对CSS代码有着非常好的语法着色和提示功能，对CSS的学习很有帮助。

标签： HTML