WEB標準略解（二）：XHTML代碼規範、CSS等

XHTML代碼規範

在開始正式內容製作之前，我們必須先了解一下web標準有關代碼的規範。瞭解這些規範可以幫助你少走彎路,儘快通過代碼校驗。

1.所有的標記都必須要有一個相應的結束標記

以前在HTML中，你可以打開許多標籤，例如<p>和<li>而不一定寫對應的</p>和< /li>來關閉它們。但在XHTML中這是不合法的。XHTML要求有嚴謹的結構，所有標籤必須關閉。如果是單獨不成對的標籤，在標籤最後加一個 "/"來關閉它。例如:

2.所有標籤的元素和屬性的名字都必須使用小寫

與HTML不一樣，XHTML對大小寫是敏感的，<title>和<TITLE>是不同的標籤。XHTML要求所有的標籤和屬性的名字都必須使用小寫。例如：<BODY>必須寫成<body> 。大小寫夾雜也是不被認可的，通常dreamweaver自動生成的屬性名字"onMouseOver"也必須修改成"onmouseover"。

3.所有的XML標記都必須合理嵌套

同樣因爲XHTML要求有嚴謹的結構，因此所有的嵌套都必須按順序，以前我們這樣寫的代碼：

必須修改爲：

就是說，一層一層的嵌套必須是嚴格對稱。

4.所有的屬性必須用引號""括起來

在HTML中，你可以不需要給屬性值加引號，但是在XHTML中，它們必須被加引號。例如:

<height=80>

必須修改爲：

<height="80">

特殊情況，你需要在屬性值裏使用雙引號，你可以用"，單引號可以使用'，例如：

<alt="say'hello'">

5.把所有<和&特殊符號用編碼表示

任何小於號（<），不是標籤的一部分，都必須被編碼爲& l t ;
任何大於號（>），不是標籤的一部分，都必須被編碼爲& g t ;
任何與號（&），不是實體的一部分的，都必須被編碼爲& a m p;

注：以上字符之間無空格。

6.給所有屬性賦一個值

XHTML規定所有屬性都必須有一個值，沒有值的就重複本身。例如：

必須修改爲：

7.不要在註釋內容中使“--”

“--”只能發生在XHTML註釋的開頭和結束，也就是說，在內容中它們不再有效。例如下面的代碼是無效的:

用等號或者空格替換內部的虛線。

以上這些規範有的看上去比較奇怪，但這一切都是爲了使我們的代碼有一個統一、唯一的標準，便於以後的數據再利用。

CSS入門

在瞭解XHTML代碼規範後，我們就要進行CSS佈局。首先先介紹一些CSS的入門知識。如果你已經很熟悉了，可以跳過這一節。

CSS是Cascading Style Sheets(層疊樣式表)的縮寫。是一種對web文檔添加樣式的簡單機制，屬於表現層的佈局語言。

1.基本語法規範

分析一個典型CSS的語句：

p {COLOR:#FF0000;BACKGROUND:#FFFFFF}

其中"p"我們稱爲"選擇器"(selectors)，指明我們要給"p"定義樣式；
樣式聲明寫在一對大括號"{}"中；
COLOR和BACKGROUND稱爲"屬性"(property)，不同屬性之間用分號";"分隔；
"#FF0000"和"#FFFFFF"是屬性的值(value)。

2.顏色值

顏色值可以用RGB值寫，例如：color : rgb(255,0,0)，也可以用十六進制寫，就象上面例子color:#FF0000。如果十六進制值是成對重複的可以簡寫，效果一樣。例如:#FF0000可以寫成#F00。但如果不重複就不可以簡寫，例如#FC1A1B必須寫滿六位。

3.定義字體

web標準推薦如下字體定義方法：

body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋體,sans-serif; }

字體按照所列出的順序選用。如果用戶的計算機含有Lucida Grande字體，文檔將被指定爲Lucida Grande。沒有的話，就被指定爲Verdana字體，如果也沒有Verdana，就指定爲Lucida字體，依此類推，；
Lucida Grande字體適合Mac OS X；
Verdana字體適合所有的Windows系統；
Lucida適合UNIX用戶
"宋體"適合中文簡體用戶;
如果所列出的字體都不能用，則默認的sans-serif字體能保證調用;

4.羣選擇器

當幾個元素樣式屬性一樣時，可以共同調用一個聲明，元素之間用逗號分隔，： p, td, li { font-size : 12px ; }

5.派生選擇器

可以使用派生選擇器給一個元素裏的子元素定義樣式，例如這樣：

li strong { font-style : italic; font-weight : normal；}

就是給li下面的子元素strong定義一個斜體不加粗的樣式。

6.id選擇器

用CSS佈局主要用層"div"來實現，而div的樣式通過"id選擇器"來定義。例如我們首先定義一個層

然後在樣式表裏這樣定義：

#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}

其中"menubar"是你自己定義的id名稱。注意在前面加"#"號。

id選擇器也同樣支持派生，例如：

#menubar p { text-align : right; margin-top : 10px; }

這個方法主要用來定義層和那些比較複雜，有多個派生的元素。

6.類別選擇器

在CSS裏用一個點開頭表示類別選擇器定義，例如：

.14px {color : #f60 ;font-size:14px ;}

在頁面中，用class="類別名"的方法調用：

<span class="14px">14px大小的字體</span>

這個方法比較簡單靈活，可以隨時根據頁面需要新建和刪除。

7.定義鏈接的樣式

CSS中用四個僞類來定義鏈接的樣式，分別是：a:link、a:visited、a:hover和a : active，例如：

a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
a:active {font-weight : bold ;text-decoration : none ;color : #F90 ;}

以上語句分別定義了"鏈接、已訪問過的鏈接、鼠標停在上方時、點下鼠標時"的樣式。注意，必須按以上順序寫，否則顯示可能和你預想的不一樣。記住它們的順序是“LVHA”。

呵呵，看了這麼多，有點頭暈吧，實際上CSS的語法規範還有很多，這裏列的只是一些常用的，畢竟我們是循序漸進，不可能一口吃成胖子:)

CSS佈局入門

CSS佈局與傳統表格(table)佈局最大的區別在於：原來的定位都是採用表格，通過表格的間距或者用無色透明的GIF圖片來控制文佈局版塊的間距；而現在則採用層(div)來定位，通過層的margin,padding,border等屬性來控制版塊的間距。

1.定義DIV

分析一個典型的定義div例子：

#sample{ MARGIN: 10px 10px 10px 10px;
PADDING:20px 10px 10px 20px;
BORDER-TOP: #CCC 2px solid;
BORDER-RIGHT: #CCC 2px solid;
BORDER-BOTTOM: #CCC 2px solid;
BORDER-LEFT: #CCC 2px solid;
BACKGROUND: url(images/bg_poem.jpg) #FEFEFE no-repeat right bottom;
COLOR: #666;
TEXT-ALIGN: center;
LINE-HEIGHT: 150%; WIDTH:60%; }

說明如下：

層的名稱爲sample，在頁面中用<div id="sample">就可以調用這個樣式。
MARGIN是指層的邊框以外留的空白，用於頁邊距或者與其它層製造一個間距。"10px 10px 10px 10px"分別代表"上右下左"(順時針方向)四個邊距，如果都一樣，可以縮寫成"MARGIN: 10px;"。如果邊距爲零，要寫成"MARGIN: 0px;"。注意：當值是零時，除了RGB顏色值0%必須跟百分號，其他情況後面可以不跟單位"px"。MARGIN是透明元素，不能定義顏色。
PADDING是指層的邊框到層的內容之間的空白。和margin一樣，分別指定上右下左邊框到內容的距離。如果都一樣，可以縮寫成"PADDING:0px"。單獨指定左邊可以寫成"PADDING-LEFT: 0px;"。PADDING是透明元素，不能定義顏色。
BORDER是指層的邊框，"BORDER-RIGHT: #CCC 2px solid;"是定義層的右邊框顏色爲"#CCC"，寬度爲"2px"，樣式爲"solid"直線。如果要虛線樣式可以用"dotted"。
BACKGROUND是定義層的背景。分2級定義，先定義圖片背景，採用"url(../images/bg_logo.gif)"來指定背景圖片路徑；其次定義背景色"#FEFEFE"。"no-repeat"指背景圖片不需要重複，如果需要橫向重複用"repeat-x",縱向重複用"repeat-y",重複鋪滿整個背景用"repeat"。後面的"right bottom;"是指背景圖片從右下角開始。如果沒有背景圖片可以只定義背景色BACKGROUND: #FEFEFE
COLOR用於定義字體顏色，上一節已經介紹過。
TEXT-ALIGN用來定義層中的內容排列方式，center居中,left居左,right居右。
LINE-HEIGHT定義行高，150%是指高度爲標準高度的150%，也可以寫作：LINE-HEIGHT:1.5或者LINE-HEIGHT:1.5em，都是一樣的意思。
WIDTH是定義層的寬度，可以採用固定值，例如500px，也可以採用百分比，象這裏的"60%"。要注意的是:這個寬度僅僅指你內容的寬度，不包含margin,border和padding。但在有些瀏覽器中不是這麼定義的，需要你多試試。

下面是這個層的實際表現:

這裏是演示內容，這裏是演示內容，這裏是演示內容，這裏是演示內容，這裏是演示內容，這裏是演示內容，這裏是演示內容，這裏是演示內容，

這裏是演示內容，這裏是演示內容，

這裏是演示內容...

我們可以看到邊框是2px的灰色，背景圖片在右下沒有重複，內容距離上和左邊框20px，內容居中，一切和預想的一樣。hoho，雖然不好看，但它是最基本的，掌握了它，你就已經學會一半的CSS佈局技術了。就是這樣，不算難吧！(另一半是什麼？另一半是層與層之間的定位。我會在後面逐步講解。)

2.CSS2盒模型

自從1996年CSS1的推出，W3C組織就建議把所有網頁上的對像都放在一個盒(box)中，設計師可以通過創建定義來控制這個盒的屬性，這些對像包括段落、列表、標題、圖片以及層<div>。盒模型主要定義四個區域：內容(content)、邊框距(padding)、邊界 (border)和邊距(margin)。上面我們講的sample層就是一個典型的盒。對於初學者，經常會搞不清楚margin，background -color，background-image，padding，content，border之間的層次、關係和相互影響。這裏提供一張盒模型的3D 示意圖，希望便於你的理解和記憶。

3.輔助圖片一律用背景處理

用XHTML+CSS佈局，有一個技術一開始讓你不習慣，應該說是一種思維方式與傳統表格佈局不一樣，那就是：所有輔助圖片都用背景來實現。類似這樣：

BACKGROUND: url(images/bg_poem.jpg) #FEFEFE no-repeat right bottom;

儘管可以用<img>直接插在內容中，但這是不推薦的。這裏的"輔助圖片"是指那些不是作爲頁面要表達的內容的一部分，而僅僅用於修飾、間隔、提醒的圖片。例如：相冊中的圖片、圖片新聞中的圖片，上面的3d盒模型圖片都屬於內容的一部分，它們可以用<img>元素直接插在頁面裏，而其它的類似logo，標題圖片，列表前綴圖片都必須採用背景方式或者其他CSS方式顯示。

這樣做的原因有2點：

將表現與結構徹底相分離(參考閱讀：《理解表現與結構相分離》)，用CSS控制所有的外觀表現，便於改版。使頁面更具有易用性，更有親和力。例如：盲人使用屏幕閱讀機，用背景技術實現的圖片就不會被朗讀出來。

第一個CSS佈局實例

接下來開始要真正設計佈局了。和傳統的方法一樣，你首先要在腦海裏有大致的輪廓構想，然後用photoshop把它畫出來。你可能看到有關web標準的站點大都很樸素，因爲web標準更關注結構和內容，實際上它與網頁的美觀沒有根本衝突，你想怎麼設計就怎麼設計，用傳統表格方法實現的佈局，用DIV 也可以實現。技術有一個成熟的過程，把DIV看成和TABLE一樣的工具，如何運用就看你的想象力了。

注：在實際應用過程中，DIV在有些地方的確不如表格方便，比如背景色的定義。但任何事情都有得有失，取捨在於你的價值判斷。好，不羅嗦了，我們開始：

1.確定佈局

如下設計草圖：

用表格的設計方法的話，一般都是上中下三行佈局。用DIV的話，我考慮使用三列來佈局,成爲這樣。

2.定義body樣式

先定義整個頁面的body的樣式,代碼如下：

body { MARGIN: 0px;
PADDING: 0px;
BACKGROUND: url(../images/bg_logo.gif) #FEFEFE no-repeat right bottom;
FONT-FAMILY: 'Lucida Grande','Lucida Sans Unicode','宋體','新宋體',arial,verdana,sans-serif;
COLOR: #666;
FONT-SIZE:12px;
LINE-HEIGHT:150%; }

以上代碼的作用在上一天的教程有詳細說明，大家應該一看就明白。定義了邊框邊距爲0；背景顏色爲#FEFEFE，背景圖片爲bg_logo.gif，圖片位於頁面右下角，不重複；定義了字體尺寸爲12px；字體顏色爲#666;行高150%。

3.定義主要的div

初次使用CSS佈局，我決定採用固定寬度的三列布局(比自適應分辨率的設計簡單,hoho，別說我偷懶，先實現簡單的，增加點信心嘛！)。分別定義左中右的寬度爲200:300:280，在CSS中如下定義:

/*定義頁面左列樣式*/
#left{ WIDTH:200px;
MARGIN: 0px;
PADDING: 0px;
BACKGROUND: #CDCDCD;
}
/*定義頁面中列樣式*/
#middle{ POSITION: absolute;
LEFT:200px;
TOP:0px;
WIDTH:300px;
MARGIN: 0px;
PADDING: 0px;
BACKGROUND: #DADADA;
}
/*定義頁面右列樣式*/
#right{ POSITION: absolute;
LEFT:500px;
TOP:0px;
WIDTH:280px;
MARGIN: 0px;
PADDING: 0px;
BACKGROUND: #FFF; }

注意：定義中列和右列div我都採用了POSITION: absolute;，然後分別定義了LEFT:200px;TOP:0px;和LEFT:500px;TOP:0px;這是這個佈局的關鍵，我採用了層的絕對定位。定義中間列距離頁面左邊框200px，距離頂部0px；定義右列距離頁面左邊框500px，距離頂部0px；。

這時候整個頁面的代碼是：

<!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" lang="gb2312">
<head>
<title>歡迎進入新《網頁設計師》:web標準教程及推廣</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="gb2312" />
<meta content="all" name="robots" />
<meta name="author" content="ajie(at)netease.com,阿捷" />
<meta name="Copyright" content="www.w3cn.org,自由版權,任意轉載" />
<meta name="description" content="新網頁設計師,web標準的教程站點,推動web標準在中國的應用." />
<meta content="web標準,教程,web, standards, xhtml, css, usability, accessibility" name="keywords" />
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="http://www.w3cn.org/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" rev="stylesheet" href="css/style01.css" type="text/css" media="all" />
</head>
<body>
<div id="left">頁面左列</div>
<div id="middle">頁面中列</div>
<div id="right">頁面右列</div>
</body>
</html>

這時候頁面的效果僅僅可以看到三個並列的灰色矩形，和一個背景圖。但是我希望高度是滿屏的，怎麼辦呢？

4.100%自適應高度?

爲了保持三列有同樣的高度，我嘗試在#left、#middle和#right中設置"height:100%;"，但發現完全沒有預想的自適應高度效果。經過一番嘗試後，我只好給每個div一個絕對高度:"height:1000px;"，並且隨着內容的增加，需要不斷修正這個值。難道沒有辦法自適應高度了嗎？隨着阿捷自己學習的深入，發現一個變通的解決辦法，實際上根本不需要設置100%，我們已經被table思維禁錮太深了，這個辦法在下一節的學習中詳細介紹。

自適應高度

如果我們想在3列布局的最後加一行頁腳，放版權之類的信息。就遇到必須對齊3列底部的問題。在table佈局中，我們用大表格嵌套小表格的方法，可以很方便對齊三列；而用div佈局，三列獨立分散，內容高低不同，就很難對齊。其實我們完全可以嵌套div，把三列放進一個DIV中，就做到了底部對齊。下面是實現例子(白色背景框模擬一個頁面)：

Body

這裏是#mainbox { MARGIN: 0px; WIDTH: 580px; BACKGROUND: #FFF; }包含了#menu,#sidebar和#content

這裏是#content{ FLOAT: right; MARGIN: 1px 0px 2px 0px; PADDING:0px; WIDTH: 400px; BACKGROUND: #E0EFDE;}

這裏是主要內容，根據內容自動適應高度

這個例子的頁面主要代碼如下：

具體樣式表都寫在相應版塊裏了。重點在於#mainbox層嵌套了#menu,#sidebar和#content三個層。當#content的內容增加，#content的高度就會增高，同時#mainbox的高度也會撐開，#footer層就自動下移。這樣就實現了高度的自適應。

另外值得注意的是：#menu和#content都是浮動在頁面右面"FLOAT: right;",#sidebar是浮動在#menu層的左面"FLOAT: left;"，這是浮動法定位，還可以採用絕對定位來實現這樣的效果。

這個方法存在另一個問題，就是側列#sidebar的背景無法百分之百。一般的解決辦法就是用body的背景色來填充滿。(不能使用#mainbox的背景色，因爲在Mozilla等瀏覽器中#mainbox的背景色失效。) <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>

AndyDevelope

發佈了36 篇原創文章 · 獲贊 0 · 訪問量 24萬+

私信關注

WEB標準略解（二）：XHTML代碼規範、CSS等

XHTML代碼規範

1.所有的標記都必須要有一個相應的結束標記

2.所有標籤的元素和屬性的名字都必須使用小寫

3.所有的XML標記都必須合理嵌套

4.所有的屬性必須用引號""括起來

5.把所有<和&特殊符號用編碼表示

6.給所有屬性賦一個值

7.不要在註釋內容中使“--”

CSS入門

1.基本語法規範

2.顏色值

3.定義字體

4.羣選擇器

5.派生選擇器

6.id選擇器

6.類別選擇器

7.定義鏈接的樣式

CSS佈局入門

1.定義DIV

2.CSS2盒模型

3.輔助圖片一律用背景處理

第一個CSS佈局實例

1.確定佈局

2.定義body樣式

3.定義主要的div

4.100%自適應高度?

自適應高度

WEB標準略解（二）：XHTML代碼規範、CSS等

Visual Studio 2005常用插件蒐羅

HTML和XHTML常見問答

極力推薦一個del.icio.us書籤瀏覽小工具

Yahoo YUI的Ajax工具包

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結