XHTML與CSS介紹

2012/11/23 14:07:36作者：佚名來(lái)源：網(wǎng)絡(luò)

移動(dòng)端

一、(X)HTML與CSS

為了解決HTML結(jié)構(gòu)標(biāo)記與表現(xiàn)標(biāo)記混雜在一起的問(wèn)題，引入了 CSS這個(gè)新的來(lái)專(zhuān)門(mén)負(fù)責(zé)頁(yè)面的表現(xiàn)形式。XHTML用于結(jié)構(gòu)化內(nèi)容；CSS用于決定頁(yè)面的表現(xiàn)形式。

二、CSS標(biāo)準(zhǔn)

CSS(Cascading Style Sheet,層疊樣式表）是一種制作網(wǎng)頁(yè)的新技術(shù)，現(xiàn)在已經(jīng)為大多數(shù)瀏覽器所支持，成為網(wǎng)頁(yè)設(shè)計(jì)必不可少的工具之一。

網(wǎng)頁(yè)最初是用HTML標(biāo)記來(lái)定義頁(yè)面文檔及格式，如標(biāo)題<hl>、段落<p>、表格<table>等。但這標(biāo)記不能滿(mǎn)足更多的文檔樣式需求，為了解決這個(gè)問(wèn)題，在1997年W3C頒布HTML4標(biāo)準(zhǔn)的同時(shí)也公布了有關(guān)樣式表的第一個(gè)標(biāo)準(zhǔn)CSSl。自CSSl的版本之后，又在1998年5月發(fā)布了CSS2版本，樣式表得到了更多的充實(shí)。使用CSS能夠簡(jiǎn)化網(wǎng)頁(yè)的格式代碼，加快下載顯示的速度，也減少了需要上傳的代碼數(shù)量，大大減少了重復(fù)勞動(dòng)的工作量。

樣式表首要目的是為網(wǎng)頁(yè)上的元素精確定位。其次，它把網(wǎng)頁(yè)上的內(nèi)容結(jié)構(gòu)和格式控制相分離。瀏覽者想要看的是網(wǎng)頁(yè)上的內(nèi)容結(jié)構(gòu)，而為了讓瀏覽者更好地看到這些信息，就要通過(guò)使用格式來(lái)控制。內(nèi)容結(jié)構(gòu)和格式控制相分離，使得網(wǎng)頁(yè)可以?xún)H由內(nèi)容構(gòu)成，而將所有網(wǎng)頁(yè)的格式通過(guò)CSS樣式表文件來(lái)控制。

CSS主要有以下優(yōu)點(diǎn)。

· 利用CSS制作和管理網(wǎng)頁(yè)都非常方便，這只是CSS的其中一個(gè)優(yōu)點(diǎn)，它還有其他的優(yōu)點(diǎn)。
· CSS可以更加精細(xì)地控制網(wǎng)頁(yè)的內(nèi)容形式，如前面學(xué)過(guò)的<font>標(biāo)記中的size屬性，它
用來(lái)控制文字的大小，但它控制的字體大小只有7級(jí)，要是出現(xiàn)需要使用10像素或100像素大的字體的情況，HTM巴標(biāo)記就無(wú)能為力了。利用CSS可以辦到，它可以隨意設(shè)置字體的大小。
· CSS樣式是豐富多彩的，如滾動(dòng)條的樣式定義、鼠標(biāo)光標(biāo)的樣式定義等。
· CSS的定義樣式靈活多樣，可以根據(jù)不同的情況，選用不同的定義方法，如可以在HTML文件內(nèi)部定義，可以分標(biāo)記定義、分段定義，也可以在HTML文件外部定義，基本上能滿(mǎn)足使用。

三、傳統(tǒng)HTML的缺點(diǎn)

在CSS還沒(méi)有被引入頁(yè)面設(shè)計(jì)之前，傳統(tǒng)的HTML語(yǔ)言要實(shí)現(xiàn)頁(yè)面美工設(shè)計(jì)是十分麻煩的。例如，在一個(gè)網(wǎng)頁(yè)中有一個(gè)<h2>標(biāo)記定義的標(biāo)題，如果要把它設(shè)置為藍(lán)色，并對(duì)字體進(jìn)行相應(yīng)的設(shè)置，則需要引入<font>標(biāo)記，代碼如下所示。

看上去這樣的修改并不是很麻煩，但是當(dāng)頁(yè)面的內(nèi)容不僅僅只有一段，而是整個(gè)頁(yè)面時(shí)，情況就變得復(fù)雜了。首先看如下HTMI。代碼，這段代碼顯示效果如圖所示。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>傳統(tǒng)HTML的缺點(diǎn)</title>
</head>
<body>
<h2><font color="#0000FF" face="幼圓">這是標(biāo)題文本</font></h2>
<p>這里是正文內(nèi)容</p>
<h2><font color="#0000FF" face="幼圓">這是標(biāo)題文本</font></h2>
<p>這里是正文內(nèi)容</p>
<h2><font color="#0000FF" face="幼圓">這是標(biāo)題文本</font></h2>
<p>這里是正文內(nèi)容</p>
</body>
</html>
HTML標(biāo)題代碼運(yùn)行效果

這段代碼在瀏覽器中的顯示效果如圖10．1所示，3個(gè)標(biāo)題都是藍(lán)色幼圓體字。這時(shí)如果要將這3個(gè)標(biāo)題改成紅色，在這種傳統(tǒng)的HTML語(yǔ)言中就需要對(duì)每個(gè)標(biāo)題的<font>標(biāo)記進(jìn)行修改如果是一個(gè)規(guī)模很大的網(wǎng)站，而且需要對(duì)整個(gè)網(wǎng)站進(jìn)行修改，那么工作量就會(huì)非常大，甚至無(wú)法實(shí)現(xiàn)。

其實(shí)傳統(tǒng)HTML的缺陷遠(yuǎn)不止上例中所反映的這一個(gè)方面，相比CSS為基礎(chǔ)的頁(yè)面設(shè)計(jì)方法，其所體現(xiàn)出的劣勢(shì)主要有以下幾點(diǎn)。

(1)維護(hù)困難。為了修改某個(gè)特殊標(biāo)記(例如上例中的<h2>標(biāo)記)的格式，需要花費(fèi)很多的時(shí)間，尤其對(duì)于整個(gè)網(wǎng)站而言，后期修改和維護(hù)的成本很高。
(2)標(biāo)記不足。HTML本身的標(biāo)記很少，很多標(biāo)記都是為網(wǎng)頁(yè)內(nèi)容服務(wù)的，而關(guān)于美工樣式的標(biāo)記，如文字間距、段落縮進(jìn)等標(biāo)記在HTML中很難找到。
(3)網(wǎng)頁(yè)過(guò)“胖”。由于沒(méi)有統(tǒng)一對(duì)各種風(fēng)格樣式進(jìn)行控制，因此HTML的頁(yè)面往往體積過(guò)大，占用了很多寶貴的帶寬。
(4)定位困難。在整體布局頁(yè)面時(shí)，HTML對(duì)于各個(gè)模塊的位置調(diào)整顯得捉襟見(jiàn)肘，過(guò)多的其他標(biāo)記同樣也導(dǎo)致頁(yè)面的復(fù)雜和后期維護(hù)的困難。

四、如何編輯CSS

CSS的語(yǔ)句是內(nèi)嵌在HTML文檔中的。所以，編寫(xiě)css的方法和編寫(xiě)HTML文檔的方法是一樣的?？梢杂萌魏我环N文本編輯工具來(lái)編寫(xiě)。比如Windows下的記事本和寫(xiě)字板、專(zhuān)門(mén)的HTML文本編輯工具(FrontPage、Dreamweaver等)，都可以用來(lái)編輯CSS文檔。

要在Dreamweaver中添加CSS，先在Dreamweaver的主界面中，將編輯界面切換成“拆分視圖，使用“拆分”視圖能同時(shí)查看代碼和設(shè)計(jì)效果。編輯語(yǔ)法在“代碼”視圖中進(jìn)行。

在Dreamweaver中，我們不需要熟悉CSS的語(yǔ)法，就可以很輕松地設(shè)計(jì)出很美妙的網(wǎng)頁(yè)效果。Dreamweaver代碼模式對(duì)CSS代碼有著非常好的語(yǔ)法著色和提示功能，對(duì)CSS的學(xué)習(xí)很有幫助。

標(biāo)簽： XHTML CSS 介紹