Web設計師可以使用HTML4和CSS2.1完成一些很酷的東西。我們可以在不使用陳舊的基於table佈局的基礎上完成文檔邏輯結構並創建內容
豐富的網站。我們可以在不使用內聯<font>和<br>標籤的基礎上對網站添加漂亮而細膩的風格樣式。事實上，我們目前的設計
能力已經讓我們遠離了那個可怕的瀏覽器戰爭時代、專有協議和那些充滿閃動、滾動和閃爍的醜陋網頁。
雖然我們現在已經普遍使用了
HTML4和CSS2.1，但是我們還可以做得更好！我們可以重組我們代碼的結構並能讓我們的頁面代碼更富有語義化特性。我們可以縮減帶給頁面美麗外觀樣
式代碼量並讓他們有更高的可擴展性。現在，HTML5和CSS3正躍躍欲試的等待大家，下面讓我們來看看他們是否真的能讓我們的設計提升到下一個高度吧…
您還可以參考以下CSS3相關教程及資源:
《提
升你設計水平的CSS3新技術
》
《學無止境的
CSS(xHTML+CSS技巧教程資源大全)
》
《目前最全的瀏覽器
/CSS選擇器兼容性總結
》
《你
應當瞭解的5個CSS3新技術
》
跟<div>說再見,歡迎語義化標籤
曾經，設計師們經常會跟頻繁使用基於table的沒有任何語義的佈局。不過最終還是要感謝像Jeffrey Zeldman和EricMeyer這樣的思想革新者，聰明的設計師們慢慢的接受了相對更語義化的<div>佈局替代了table佈局，並且 開始調用外部樣式表。但不幸的是，複雜的網頁設計需要大量不同的標籤結構代碼，我們把它叫做“<div>-soup” 綜合症。也許你很熟悉下面的代碼:
<div class = "section" >
<div class = "article" >
<div class = "header" >
<h1 > Div Soup Demonstration</ h1 >
<p > Posted on July 11th, 2009</ p >
</ div >
<div class = "content" >
<p > Lorem ipsum text blah blah blah.</ p >
<p > Lorem ipsum text blah blah blah.</ p >
<p > Lorem ipsum text blah blah blah.</ p >
</ div >
<div class = "footer" >
<p > Tags: HMTL, code, demo</ p >
</ div >
</ div >
<div class = "aside" >
<div class = "header" >
<h1 > Tangential Information</ h1 >
</ div >
<div class = "content" >
<p > Lorem ipsum text blah blah blah.</ p >
<p > Lorem ipsum text blah blah blah.</ p >
<p > Lorem ipsum text blah blah blah.</ p >
</ div >
<div class = "footer" >
<p > Tags: HMTL, code, demo</ p >
</ div >
</ div >
</ div >
</ div >
儘管這有些勉強，但上面這個實例還是可以說明使用HTML4對一個複雜的設計進行代碼化後依然過於臃腫(其實xHTML1.1也不過如 此)。不過值得激動的是，HTML5解決“<div>-soup”綜合症並帶給我們一套新的結構化元素。這些新的HTML5元素富有更細緻的 語義從而代替了那些毫無語義的<div>標籤，並同時爲CSS的調用提供了”自然”的CSS鉤子。下面是HTML5的解決方案實例:
<section>
<article>
<header>
<h1 > Div Soup Demonstration</ h1 >
<p > Posted on July 11th, 2009</ p >
</ header>
<section>
<p > Lorem ipsum text blah blah blah.</ p >
<p > Lorem ipsum text blah blah blah.</ p >
<p > Lorem ipsum text blah blah blah.</ p >
</ section>
<footer>
<p > Tags: HMTL, code, demo</ p >
</ footer>
</ article>
<aside>
<header>
<h1 > Tangential Information</ h1 >
</ header>
<section>
<p > Lorem ipsum text blah blah blah.</ p >
<p > Lorem ipsum text blah blah blah.</ p >
<p > Lorem ipsum text blah blah blah.</ p >
</ section>
<footer>
<p > Tags: HMTL, code, demo</ p >
</ footer>
</ aside>
</ section>
</ section>
正如我們所見，HTML5可以讓我們用很多更語義化的結構化代碼標籤代替那些大量的無意義的<div>標籤。這種語義化的特性不僅 提升了我們網頁的質量和語義，並且大量減少了曾經代碼中用於CSS必須調用的class和id屬性。事實上，CSS3也是可以然通過我們忽略掉所有 class和id的。
跟class屬性說再見，歡迎整潔的標籤
結合了富有新的語義化標記的HTML5，CSS3爲web設計師們的網頁提供了神一般的力量。有了HTML5的能量，我們將得到更多的對文檔代 碼的控制權，有了CSS3的能量，我們的控制權將趨於無窮大！
即使沒有那些高級的CSS選擇器，我們仍然可以通過強大的HTML5條調用不同的容器而不勞駕class和id這類屬性。像以往的DIV佈局， 我們在css中可能要這樣調用:
|
|
div#news
{
}
div.section { } div.article { } div.header { } div.content { } div.footer { } div.aside { } |
我們再來看看基於HTML5的實例:
|
|
section {
}
article { } header { } footer { } aside { } |
這是個進步，但仍有一些問題需要解決。在<div>實例中，我們需要通過class或id屬性來調用頁面中的元素。這種邏輯將允許 我們將樣式應用到文檔中的任何一個元素上，無論是整體還是個體。例如在<div>實例中，.section 和.content元素很容易定位。但是在HTML5實例中，實際文檔中會有很多個section元素。其實我們可以添加一些特定的屬性選擇器來調用那些 不同的section元素，不過謝天謝地，我沒現在可以用少量的高級CSS選擇器來定位不同的section元素。
不使用class和id定位HTML-5元素
下面讓我們來看看如何在不使用class和id的情況下定位HTML5頁面元素的一個實例，我們可以使用三種CSS選擇器來定位和辨別實例中的 元素。如下:
- 後代選擇器:[CSS 2.1]: E F
- 兄弟選擇器:[CSS 2.1]: E + F
- 子元素選擇器:[CSS 2.1]: E > F
下面讓我們來看看如何不使用class和id而完成對文檔中的那些section元素的定位吧:
定位最外層
的<section>元素
考慮到我們的例子並不是一套完整的HTML5代碼，所以我們假定在<body>元素下有個<nav>元素 與<section>元素是兄弟元素。這樣的話，我們就可以向下面代碼那樣定位最外層的<section>了:
|
|
body nav+
section
{
}
|
定位下一個<section>元素
作
爲最外層<section>元素下的唯一直屬子集元素，這個<section>元素也許可以這樣定位:
|
|
section>
section
{
}
|
定位<article>元素
可
以定位<article>元素的方法有很多，不過最簡單的方法當然就是後代選擇器了:
|
|
section section article {
}
|
定
位<header>、<section>和<footer>元素
這三個元素分別在兩個地方都
出現過，一是在<article>元素中出現，另一是在<aside>元素中出現。這種差別能讓我們輕鬆定位每個元素。
|
|
article header {
}
article section { } article footer { } |
或者一起定義:
|
1
2 3 |
section section header {
}
section section section { } section section footer { } |
到目前爲止，我們已經使用CSS2.1選擇器排除掉了所有的class和id。那麼我們爲什麼還需要使用CSS3呢？我很高興你能這麼問…
使用CSS3對HTML5元素進行高級定位
雖然我們已經使用CSS2.1選擇器排除掉了所有的class和id，顯然還會有很多更復雜的情況需要CSS3的高級選擇器來解決。讓我們通過 完成一下的實例來了解一下如何在不使用無用的class和id屬性的情況下利用CSS3定位頁面元素。
使用一個唯一的日誌(post)ID定位所有日誌
wordpress提供給我們一種包含了ID的每篇日誌的源代碼輸出。這種信息通常用於導航和/或瞭解資料的意圖，不過CSS3可以利用這些唯 一的ID來定義這些日誌的樣式。當然，你還可以像往常那樣爲每篇日誌添加class=”post”這樣的屬性，但這就與我們練習的意圖相沖突了(再加上它 沒有一點樂趣所在)。使用”子字符串匹配選擇器”，我們就可以像下面這樣定位所有日誌和它們的不同元素了。
|
|
article[
id*=
post-]
{
}
/* 定位所有日誌 */
article[ id*= post-] header h1 { } /* 定位所有日誌中的h1標籤 */ article[ id*= post-] section p { } /* 定位所有日誌中的p標籤 */ |
我沒仍然可以使用同樣的方式定位評論的元素和它們的子元素。
|
|
article[
id*=
comment-]
{
}
/* 定位所有評論 */
article[ id*= comment-] header h1 { } /* 定位所有評論中的h1標籤 */ article[ id*= comment-] section p { } /* 定位所有評論中的p標籤 */ |
定位一些指定的區域(section)或文章
(article)
有很多博客的日誌量和評論量都相當大，HTML
5會將它們由<section>或<article>元素組成。爲了定位哪些指定的<section>
或<article>元素，我們就要轉而使用強大的“:nth-child”選擇器了:
|
|
section:nth-
child(
1
)
{
}
/* 選擇第一個 <section> */
article:nth- child( 1 ) { } /* 選擇第一個 <article> */ section:nth- child( 2 ) { } /* 選擇第二個 <section> */ article:nth- child( 2 ) { } /* 選擇第二個 <article> */ |
同樣，我們可以使用“:nth-last-child”選擇器定位反序的一些元素。
|
|
section:nth-last-
child(
1
)
{
}
/* 選擇最後一個 <section> */
article:nth-last- child( 1 ) { } /* 選擇最後一個 <article> */ section:nth-last- child( 2 ) { } /* 選擇倒數第二個 <section> */ article:nth-last- child( 2 ) { } /* 選擇倒數第二個 <article> */ |
使用更多的方式選擇指定元素
另一種選擇HTML5中指定元素(如header、section和footer)的方法就是利用”:only-of-type”選擇器的優勢。由於這
些HTML5元素通常會在很多地方出現不止一次，所以當我們想定位那種在父元素下僅出現過一次的標籤時這種方法很方便。例如，我們要選擇的是在某元素中有
切僅有的唯一一個元素，如以下代碼:
|
|
<section>
<section></ section> <section> <section> 定 位這個section元素</ section> </ section> <section> <section> 定 位這個section元素</ section> </ section> <section> <section> 但 不定位這個section元素</ section> <section> 和這個section元素</ section> </ section> <section></ section> </ section> |
我們可以僅使用以下一行選擇器:
|
1
|
section>
section:only-of-type
{
}
|
再次嘮叨，你可以固執的爲每個元素添加ID屬性，但你會失去代碼的可擴展性、維護性和絕對簡潔的結構與表現相分離。CSS3的確能讓我們可快速
更方便的定位幾乎所有沒有ID和class屬性的頁面元素。
大家如果想了解一下現在的CSS3選擇器的瀏覽器支持情況，可以參閱這篇文章(即時更
新):
《目前最全的瀏覽器
/CSS選擇器兼容性總結》
總結
我相信隨着時間的推進和更多瀏覽器的支持，HTML5和CSS3將越來越受歡迎，它們將爲web設計師們帶來更無窮的能量，讓我們的web前端 更上一個臺階。
留意更新
訂閱彬Go 以查看HTML5和CSS3最新教程及資 源。
英文原文:The
Power of HTML 5 and CSS 3
翻譯原文:一起感
受HTML5和CSS3的能量
(彬Go
)