HTML5 CSS3應用詳解 _html5教學技巧

Web設計師可以使用HTML4和CSS2.1完成一些很酷的東西。我們可以在不使用陳舊的基於table佈局的基礎上完成文件邏輯結構並創建內容豐富的網站。我們可以在不使用內聯和
標籤的基礎上為網站添加漂亮而細膩的風格樣式。事實上，我們目前的設計能力已經讓我們遠離了那個可怕的瀏覽器戰爭時代、專有協議和那些充滿閃爍、滾動和閃爍的醜陋網頁。

雖然我們現在已經普遍使用了HTML4和 CSS2.1，但我們還可以做得更好！我們可以重組我們程式碼的結構並能讓我們的頁面程式碼更富有語意化特性。我們可以縮減帶給頁面美麗外觀樣式代碼量並讓他們有更高的可擴展性。現在，HTML5和CSS3正躍躍欲試的等待大家，以下讓我們來看看他們是否真的能讓我們的設計提升到下一個高度吧…

曾經，設計師們經常會跟著頻繁使用基於table的沒有任何語義的佈局。不過最終還是要感謝像Jeffrey Zeldman和Eric Meyer這樣的思想革新者，聰明的設計師們慢慢的接受了相對更語義化的

佈局替代了table佈局，並且開始調用外部樣式表。但不幸的是，複雜的網頁設計需要大量不同的標籤結構程式碼，我們把它叫做「

-soup」 症候群。也許你很熟悉下面的程式碼:

複製程式碼

程式碼如下:

Div Soup Demonstration

Posted on July 11th, 2009

Lorem ipsum text blah blah blah.

Lorem ipsum text blah blah blah. p>

Lorem ipsum text blah blah blah.

Tags: HMTL, code, demo

Tangential Information h1>

Lorem ipsum text blah blah blah.

Lorem ipsum text blah blah blah.

Lorem ipsum text blah blah blah.

Tags: HMTL, code , demo

儘管這有些勉強，但上面這個實例還是可以說明使用HTML4對一個複雜的設計進行程式碼化後依然過於臃腫(其實xHTML1.1也不過如此)。不過值得激動的是，HTML5解決「

-soup」 症候群並帶給我們一套新的結構化元素。這些新的HTML5元素富有更細緻的語義從而代替了那些毫無語義的

標籤，並同時為CSS的調用提供了」自然」的CSS鉤子。

以下是 HTML5的解決方案實例:

複製程式碼

程式碼如下:

;
;

Div 湯示範

發表於2009年7月11日

標題>
;

Lorem ipsum 文字等等等等。

Lorem ipsum 文字等等等等。

Lorem ipsum 文字等等等等。

節>
;

標籤：HMTL、程式碼、示範

頁尾>
文章>

;

切向訊息

標題>
;

Lorem ipsum 文本等等等等。

Lorem ipsum 文字等等等等。

Lorem ipsum 文字等等等等。

節>
;

標籤：HMTL、程式碼、示範

頁尾>
旁白>
節>
節>

如我們所見，HTML5 可以讓我們用許多更語意化的重構程式碼標籤來取代那些大量無意義的

標籤。這種語意化的特性不僅提升了我們網頁的品質和語意，並且大量減少了曾經用於CSS的程式碼中必須呼叫的class和id屬性。事實上，CSS3也可以透過忽略我們掉所有class和id的。

跟class屬性說再見，歡迎整齊的標籤

      結合了豐富的新的語意化標記的 HTML5，CSS3 為網頁設計師們的網頁提供了神一般的力量。有了 HTML5 的能量，我們將獲得更多的文件對程式碼的控制權，有了CSS3的能量，我們的控制權將趨於無窮大！

即使沒有那些高階的CSS器，我們仍然透過可以強大的HTML5條來呼叫不同的容器而不是勞駕類別和id這類屬性。像以前的DIV版面一樣，我們在css中可能這樣調用: div #新聞    {}

複製程式碼

程式碼如下：

div.section {} div .article {}
div.header {}
div.content {}
div.footer {}
div.aside {}

我們接下來要來看看HTML5的實例：部分{}

複製程式碼程式碼如下：

article {}
頁腳{}
旁白{}


這是個進步，但仍有一些問題需要解決。在

實例中，我們需要透過class或id屬性來呼叫頁面中的元素。這種邏輯將允許我們將樣式應用到文件中的任何一個元素上，無論是整體還是個體。例如在

實例中，.section 和 .content元素很容易定位。但是在HTML5實例中，實際文件中會有很多個section元素。其實我們可以加入一些特定的屬性選擇器來呼叫那些不同的section元素，但謝天謝地，我沒現在可以用少量的高階CSS選擇器來定位不同的section元素。

不使用class和id定位HTML-5元素

　　下面讓我們來看看如何在不使用class和id的情況下定位HTML5頁面元素的一個實例，我們可以使用三種CSS選擇器來定位和辨別實例中的元素。如下:

      後位選擇者:[CSS 2.1]: EF
      兄弟選擇器:[CSS 2.1]: E F
   

      下面讓我們來看看如何不使用class和id而完成文件中的那些section元素的定位吧:

定位最外層的

元素

　　考慮到我們的例子並不是一套完整的HTML5程式碼，所以我們假定在元素下有個

元素與

元素是兄弟元素。這樣的話，我們就可以像下面程式碼那樣定位最外層的

了:

複製程式碼程式碼如下:

body section {section {

body section {section {

定位下一個

元素

作為最外層

元素下的唯一直屬子集元素，這個

元素也許可以這樣定位:

複製程式碼

程式碼如下:

section>section {> 🎜>

定位

元素

可以定位

元素的方法有很多，不過最簡單的方法當然就是後代選擇器了:

複製程式碼程式碼如下:

section section section article> 🎜>

定位

、

和

元素

這三個元素分別在兩個地方都出現過，一是在

元素中出現，另一是在

元素中出現。這種差別能讓我們輕鬆定位每個元素。

複製程式碼

程式碼如下:

article header {erp. {}

article 腳 {}

或一起定義:

複製程式碼

程式碼如下:section 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*id* } /* 定位所有評論*/
article[id*=comment-] header h1 {} /* 定位所有評論中的h1標籤*/
article[id*=comment-] section p {} / * 定位所有評論中的p標籤*/

定位一些指定的區域(section)或文章(article)

　　有很多部落格的日誌量和評論量都相當大，HTML 5 會將它們由

或

元素組成。為了定位哪些指定的

或

元素，我們就要轉而使用強大的「:nth-child」選擇器了:

複製程式碼

程式碼如下:

section:nth-child(1) {nth-child } /* 選擇第一個

*/
article:nth-child(1) {} /* 選擇第一個

*/
section:nth-child(2) {} / * 選擇第二個

*/
article:nth-child(2) {} /* 選擇第二個

*/

同樣，我們可以使用「:nth-last-child」選擇器來定位反序的一些元素。

複製程式碼

程式碼如下:

section:nth-last-child(1th-last-child(1th-last-child ) {} /* 選取最後一個

*/
article:nth-last-child(1) {} /* 選取最後一個

*/

section:nth-last-child(2) {} /* 選取倒數第二個

*/
article:nth-last-child(2) {} /* 選取倒數第二個 */

使用更多的方式選擇指定元素

　　另一種選擇HTML5中指定元素(如 header、section和footer)的方法就是利用”:only-of-type”選擇器的優勢。由於這些HTML5元素通常會在許多地方出現不只一次，所以當我們想要定位那種在父元素下只出現過一次的標籤時這種方法很方便。例如，我們要選擇的是某個元素中唯一有切僅有的元素，如以下程式碼:

複製程式碼

程式碼如下:

定位這個section元素

定位這個section元素

但不定位這個section元素

而這個section元素

我們可以只使用以下一行選擇器:

複製程式碼

程式碼如下:

程式碼如下:

section>sectionection: {}

再次嘮叨，你可以固執的為每個元素添加ID屬性，但你會失去程式碼的可擴展性、維護性和絕對簡潔的結構與表現相分離。 CSS3的確能讓我們快速更方便的定位幾乎所有沒有ID和class屬性的頁面元素。

總結 　　我相信隨著時間的推進和更多瀏覽器的支持，HTML5和CSS3將越來越受歡迎，它們將為web設計師們帶來更無窮的能量，讓我們的web前端更上一個台階。 （文/鬼武者）