點擊這裡返回武林網HTML教程欄目．
上文：標記語言-再談清單
原文出處Chapter 9 精簡標籤
先前我們不斷提到結構化內容能夠把結構與設計細節分類並精簡標籤,該怎麼做呢?我們可以使用符合標準的XHTML與CSS代替表格,圖片製作我們所需要的版面.
使用標準技術製作網站(特別是十分依賴CSS的網站)的時候,我們常常會養成一個不太好的習慣,就是加上多餘的標籤和class屬性,技術完全不需要它們.
通過在CSS中使用集成選擇器(descendant selectors),我們就能消除多餘的<div>,<span>與分類屬性.精簡標籤代表頁面將能讀取得更快,同時更容易維護,在這一章中,我們會討論幾個完成這項任務的簡單做法.以標準技術製作網站時,如何精簡標籤?
精簡標籤是個值得討論的重要話題,製作網站時,用合法的XHTML書寫,用CSS設定展示效果能得到的巨大好處之一,就是精簡標籤.簡短的代碼代表著下載速度加快,對於使用56k撥號上網的用戶來說,這絕對是關鍵,簡短的代碼也代表服務器空間需求,帶寬消耗減少,這能讓老闆,系統管理者開心.
問題在於,單純的確定頁面符合W3C標準規範並不代表內容所使用的代碼會縮短,你當然能為符合標準的標記內容加上各種不需要的標籤,沒錯,他的確符合標準,但可能為了讓設計CSS的時候方便一點,加了不少多餘的代碼.
別怕!這邊有些技巧,讓你能設計出簡潔,有符合標準的標記內容,但也同時保留足夠的CSS樣式控制能力.接著讓我們學習幾個精簡標籤的簡單技巧.繼承選擇器
在這裡我們要看看兩種在個人網站標記側邊欄(包括信息,鏈接和其他東西)的做法.把所有好東西塞進一個id是sidebar的<div>裡,以便稍後把它放到瀏覽器視窗中的某一處(第二部分將會討論CSS佈局/ 排版功能).方法A:高興的分類
<div id=sidebar>
<h3 class=sideheading>About This Site</h3>
<p>This is my site.</p>
<h3 class=sideheading>My Links</h3>
<ul class=sidelinks>
<li class=link><a href=archives.html>Archives</a></li>
<li class=link><a href=about.html>About Me</a></li>
</ul>
</div>
我在許多網站上看過類似方法A的標記內容,在設計者剛發現CSS的威力的時候,很容易感動過頭,為每個想要製定特殊樣式的標籤指定class.
以前面這個例子來說,或許我們認為<h3>指定class=sideheading是為了幫助它們指定與頁面之內其他標題不同的樣式;為<ul>和<li>指定class也是為了同樣的理由.分類CSS
指定樣式時,假設我們想讓標題變成橘色,使用serif字體,底部加上淺灰色邊線,而sidelinks無序清單則要把小圓點符號去掉,清單項目改為粗體.
方法A需要的CSS內容看起來會像這樣:
.sideheading {
font-family: Georgia, serif;
color: #c63;
border-bottom: 1px solid #ccc;
}
.sidelinks {
list-style-type: none;
}
.link {
font-weight: bold;
}
我們能參照標記內製定的分類名稱(class),為這些標籤指定特殊樣式,你甚至能想像頁面的其他部分也照這個方式組織: 導航條,頁尾與內容區,每個標籤都加上了雜亂的分類,以便對它們有完全控制權.
沒錯,它的確能運作,但是有個簡單的做法能夠節省這些分類屬性(class),同時讓你的CSS更容易閱讀,更具組織性,接著看方法B.方法B:自然的選擇
<div id=sidebar>
<h3>About This Site</h3>
<p>This is my site.</p>
<h3>My Links</h3>
<ul>
<li><a href=archives.html>Archives</a></li>
<li><a href=about.html>About Me</a></li>
</ul>
</div>
方法B短小精悍!但是等等,分類都到哪裡去了?恩...你很快就會發現我們其實並不是真的需要它們,主要是因為我們把這些標籤都塞進一個具有惟一名稱(本例是sidebar)的<div>的關係.
這就是發揮繼承選擇器作用的地方了.我們只需要直接以標籤名稱指定位於sidebar之內的標籤,就能去掉這些多餘的分類屬性.以內容前後關係指定CSS
讓我們看看與方法A相同的樣式,但是這次我們用繼承選擇器指定位於sidebar裡的標籤.
#sidebar h3 {font-family: Georgia, serif;
color: #c63;
border-bottom: 1px solid #ccc;
}
#sidebar ul {list-style-type: none;
}
#sidebar li {font-weight: bold;
}
通過參考#sidebar ID,就能為包含在其中的標籤指定特殊樣式,舉例來說,只有位於<div id=sidebar>之內的<h3>標籤會設定上述的CSS規則.
這種根據內容前後關係指定樣式的做法是縮短標記內容的關鍵.通常在為內容設計好語義結構之後,就不必為標籤加上分類屬性了.不止用在側邊欄
我們只展示了頁面的一個段落(就是側邊欄),不過這個做法可以應用到整個頁面結構上,只要將標記內容依照邏輯分成幾個段落(或許是#nav,#content,#sidebar,#footer),然後以繼承選擇器為這個段落內的標籤分別制定特殊樣式就可以了.
舉例來說,假設在頁面內的#content與#sidebar段落內都用了<h3>標籤,並且希望它們都使用serif字體,然而,你希望其中一個段落的<h3>以紫色顯示,另一個則是橘色.
這是不需要修改任何標籤,加上分類屬性.我們可以通過一個全局樣式指定所有<h3>標籤共用的規則,然後用繼承選擇器根據標籤的位置設定顏色.
h3 {
font-family: Georgia, serif; /* All h3s to be serif */
}
#content h3 {
color: purple;
}
#sidebar h3 {
color: orange;
}
指定所有<h3>標籤都使用senif字體,而顏色必鬚根據內容上下文關係選擇使用紫色或是橘色,此時我們不需要重複共享規則(這個例子中是font-family),因此能縮短CSS的內容,同時防止多個聲明內出現重複的規則.
我們不僅能減少class屬性需要的額外的標記空間,同時CSS結構也變得更具意義,讓我們更容易閱讀它的內容,更容易依照頁面分段進行組織,修改特定的規則也變得很簡單,對龐大,複雜的排版來說特別明顯,因為這時你可能會同時擁有上百條CSS規則.
舉例來說,在這個例子中,如果把共享規則加到每個聲明中,而稍後想把所有<h3>換成sans serif字體的話,就得修改三個地方,沒辦法一次搞定.越少分類越好維護
除了減少需要使用的源代碼空間之外,用繼承選擇器代替多餘分類還代表了標記內容未來易於擴展.
舉例來說,讓我們假設你想讓sidebar之內的鏈接變成紅色,而不是像頁面的其餘部分那樣使用藍色,因此你建立了一個red類,像這樣加到錨點標籤中:
<div id=sidebar>
<h3>About This Site</h3>
<p>This is my site.</p>
<h3>My Links</h3>
<ul>
<li> <a href=archives.html class=red > Archives</a></li>
<li> <a href=about.html class=red > About Me</a></li>
</ul>
</div>
而把這些鏈接變成紅色(假設預設的鏈接顏色不是紅色)則需要類似這樣的CSS:
a:link.red {
color: red;
}
這些動作沒什麼問題,也完全可以正常運作,但是如果未來你改變心意,想把這些鏈接換成綠色的話怎麼辦?或者更實際一點,你的老闆偶爾說了今年紅色已經過時了,把這些側邊欄鏈接換成綠色!沒問題,你只要修改CSS裡的red類就搞定了,但是標記內容裡的class屬性還是red,明顯這不完全符合語義,就跟使用其他顏色當作分類名稱一樣.
這不是個使用顯示效果當作分類名稱的好地方,但是完全不指定分類的話,我們能省去許多處理分類的精力(以及代碼),同時讓內容語義更合理,我們倒不如以繼承選擇器選擇這些側邊欄的鏈接,依照需要指定樣式.
標記內容和方法B完全相同,而設定側邊欄的鏈接所需的CSS將是這樣:
#sidebar li a:link {color: red;
}
基本上,這代表只有在<div id=sidebar>之內的<li>標籤裡的使用了href屬性的錨點標籤應還顯示成紅色.
現在,我們維持了簡短靈活的標記內容,而未來更新只需要用到CSS,不管想讓鏈接變成紅色,綠色,粗體,斜體都沒問題.
接著,來看看另一個精簡標籤的做法:消除不必要的<div>標籤,直接取用現有的塊級標籤.
上一頁1 2 3 下一頁閱讀全文