上文：Chapter 14 圖片替換
標準化設計解決方案 - 標記語言和樣式手冊 Web Standards Solutions The Markup and Style HandbookPart 2：Simplebits Of Style 簡短精悍的網頁設計樣式Chapter 15 為<body>指定樣式把內容與顯示效果分開設定的網頁設計好 台中網頁設計處之一就是靈活，通過用CSS控制網站的網頁設計版面佈局(在第十二章用過的網頁設計方法)，就能控制整個網站的網頁設計設計要素，改變幾條規則，就能立刻戲劇性的網頁設計更新上千個頁面。用CSS控制佈局的網頁設計的網頁設計便利性示範之一，就是為<body>指定樣式，通過為<body>標籤加上class或者id，就能對頁面的網頁設計任何標籤進行自定義控制。完全沒有重複定義的網頁設計煩惱。在這一章裡，將探討如何通過為<body>標籤加上class而讓SEO們用一份標記結構切換兩種不同的網頁設計版面配置。
兩欄或者三欄的網頁設計佈局就像用CSS版面佈局技術為Fast Company重新設計網站時，挑戰之一是：雖然所有頁面都共享相同的網頁設計導航，頁尾區，但是也需要建立兩種不同版面佈局。第一種佈局是"索引頁(首頁)"，見圖15-1，這是具備導航功能的網頁設計頁面，讓使用者能繼續深入網站的網頁設計目錄結構。這些頁面SEO們決定使用三欄佈局。圖15-1 Fast Company的網頁設計三欄"索引頁"示範第二種頁面佈局則是"內文頁" 圖15-2任何感覺是目的網頁設計地的網頁設計頁面都使用這種版面佈局。為了提升易讀性，SEO們決定省略左邊欄，留下兩欄，也就是一個大欄放置內容，另一個放廣告。圖15-2 Fast Company的網頁設計兩欄 "內文頁" 示範SEO解釋這些的網頁設計原因不是為了證明SEO們破解了某個版面佈局的網頁設計偉大謎團，而是為了示範為<body>標籤加上class就能調整欄寬，並且根據頁面形態放置或省略去第三欄。製作這樣的網頁設計效果的網頁設計時候，完全沒有重複任何規則，也沒有引入任何額外的網頁設計樣式表。
標記和樣式結構在開始敘述兩種頁面共用的網頁設計標記結構之後，這些敘述就會開始變得很有道理，為了達成分欄佈局，會使用在第十二章裡提過的網頁設計絕對定位法。
內文頁內文頁簡化過的網頁設計標記結構看起來像是這樣： 程序代碼<div id="header"> ...header info here...</div><div id="content"> ...content here...</div><div id="right"> ...right column info...</div><div id="footer"> ...footer info...</div>以CSS規則為#content與#footer加上足以使用絕對定位法放進#right的網頁設計右外補丁，在這個例子中，190像素剛好 台中網頁設計可以滿足。 程序代碼#content, #footer { margin: 10px 190px 10px 10px; }
索引頁對索引頁來說，標記結構完全相同，因此不必複製一份共享的網頁設計CSS規則，但是在#content左側加了額外的網頁設計<div>作為第三欄(#left)。 程序代碼<div id="header"> ...header info here...</div><div id="content"> ...content here...</div><div id="left"> ...left column info...</div><div id="right"> ...right column info...</div><div id="footer"> ...footer info...</div>對這份三欄結構來說，不僅要為#content與#footer設定右外補丁以容納右欄，還要設定左外補丁，容納新加進來的網頁設計左欄。但是先前已經把左外補丁設為10像素了，以配合只擁有雙欄的網頁設計預設內文頁佈局。
這個<body>有分類這就是<body>標籤加入遊戲的網頁設計地方：通過為<body>指定class，指定這個是索引頁，就能為這個分類編寫特殊的網頁設計規則了。舉例來說，為了要覆蓋預設的網頁設計10像素左外補丁，就需要為索引頁的網頁設計<body>標籤加上一下這個分類： 程序代碼<body class="index">在原本為#content 與 #footer設定補丁的網頁設計規則之後，SEO們加上以下的網頁設計CSS： 程序代碼#content, #footer { margin: 10px 190px 10px 10px; }body.index #content, body.index #footer { margin-left: 190px; }在把<body>標籤設為index分類的網頁設計頁面裡，左邊擴大190像素(與右邊相同)可以用來容納左欄，如果不指定index分類的網頁設計話，左外補丁就會是預設值裡聲明的網頁設計10像素了。現在就能在兩欄，三欄佈局之間切換了，只要為<body>標籤指定分類，在需要的網頁設計時候為標記源代碼加上額外的網頁設計<div>即可，你也能指定更多分類，能處理的網頁設計頁面類型數目並沒有限制。標記區域與名稱可以維持相同，根據頁面類型進行微調即可。
不止處理分欄SEO以切換Fast Company網站的網頁設計分欄數目作為例子，但是相同的網頁設計想法也能自定義頁面上的網頁設計任何元素。舉例來說，如果在索引頁上讓所有以<h1>標注的網頁設計頁面標題以橘色(而不是預設的網頁設計顏色)顯示，你可以在預設值之後加上額外的網頁設計CSS聲明。在所有頁面上，都能使用以下這段CSS： 程序代碼h1 { font-family: Arial, Verdana, sans-serif; font-size: 140%; color: purple; }而這段CSS只會對索引也發生作用。 程序代碼body.index h1 { color: orange; }你應該已經發現了，只需要在專門用於索引頁的網頁設計聲明裡面加上跟預設值不同的網頁設計規則即可。在這個例子中，再使用<body class="index">的網頁設計頁面上，<h1>標籤會以140%大小的網頁設計橘色Arial字體顯示，但不必為<h1>加上class，或是加上其他額外的網頁設計標籤。SEO在這裡用的網頁設計是非常簡單的網頁設計例子。不過你能開始想像為<body>標籤指定適當的網頁設計class，建立多種頁面類型的網頁設計可行性，這些分類可以用來觸發完全不同的網頁設計版面佈局，色彩組合與設計，只需要單一的網頁設計CSS文件，十分類似的網頁設計標記源代碼結構就能辦到。
"你在這裡"除了為<body>標籤加上分類屬性之外，加上id也能得到有趣的網頁設計結果。舉例來說，技術高超的網頁設計設計師或許能以<body>標籤的網頁設計id處罰導航元素，提示使用者目前位於哪個頁面，讓SEO們看看這要如何才能辦到。
導航清單在這個例子中，將借用第一章"技巧延伸"裡面提到的網頁設計迷你分頁標籤，這邊的網頁設計導航條用了一個單純的網頁設計無序清單，裡面包含了幾個鏈接，像是這樣： 程序代碼<ul id="minitabs"> <li><a rel="nofollow" href="/apples/">Apples</a></li> <li><a rel="nofollow" href="/spaghetti/">Spaghetti</a></li> <li><a rel="nofollow" href="/greenbeans/">Green Beans</a></li> <li><a rel="nofollow" href="/milk/">Milk</a></li></ul>你或許記得SEO們以CSS為這個清單加上樣式，把項目轉成水平排列，同時在鼠標移過的網頁設計時候顯示標籤。圖15-3是瀏覽器顯示的網頁設計效果。圖15-3 水平導航條，顯示標題效果你或許還記得為了達成 "你在這裡" 的網頁設計效果(將某個鏈接的網頁設計標籤固定在"選定"狀態)，而將想要固定的網頁設計鏈接加上了class： 程序代碼<li><a rel="nofollow" href="/spaghetti/" class="active">spaghetti</a></li>SEO們也加了一條CSS規則，為class="active"的網頁設計鏈接應用background-image: 程序代碼#minitabs a.active { color: #000; background: url(tab_pyra.gif) no-repeat bottom center; }然而有另一種方法可以完成這個效果，能不動到導航條的網頁設計標記源代碼，但是又能突出使用者目前所在的網頁設計頁面，那就是為"body"標籤指定id。
判別組件首先必須先為導航條的網頁設計每個<li>標籤加上id屬性，這只需進行一次，接著這個無序清單可以不經變動直接用在每一頁上，甚至能顯示"你在這裡"的網頁設計效果。 程序代碼<ul id="minitabs"> <li id="apples_tab"><a rel="nofollow" href="/apples/">Apples</a></li> <li id="spag_tab"><a rel="nofollow" href="/spaghetti/">Spaghetti</a></li> <li id="beans_tab"><a rel="nofollow" href="/greenbeans/">Green Beans</a></li> <li id="milk_tab"><a rel="nofollow" href="/milk/">Milk</a></li></ul>在前面這一小段源代碼裡，SEO們為每個li加了個簡短的網頁設計id，字字符串尾加上_tab以避免重複。稍後就能看出道理何在。現在完成了清單的網頁設計標記語法，現在SEO們能把它忘了，這可能很方便，視你使用的網頁設計模板，內容管理系統而定。這個效果唯一需要變動的網頁設計地方只有<body>標籤的網頁設計id，這樣就能凸顯使用者所在的網頁設計頁面。舉例來說，如果想告訴瀏覽器目前正位於Apples頁，就可以像這樣為<body>加上id： 程序代碼<body id="apples">或者是，加上id代表目前正處在Beans頁面： 程序代碼<body id="beans">以此類推。
CSS的網頁設計魔力要根據<body>的網頁設計id來"點亮"標籤，只需要一組CSS聲明，告訴瀏覽器每種可能發生的網頁設計組合： 程序代碼body#apples #apples_tab a,body#spag #spag_tab a,body#beans #beans_tab a,body#milk #milk_tab a { color: #000; background: url(tab_pyra.gif) no-repeat bottom center; }基本上這就代表了：當<body>標籤的網頁設計id是apples的網頁設計時候，就為#apples_tab清單項目加上鏈接背景，同時把連接色彩換成黑色，然後為，每個標籤選項重複類似的網頁設計聲明。現在需要"點亮"導航條內正確的網頁設計動作只剩下變更<body>標籤的網頁設計id了。這段CSS會處理好 台中網頁設計剩下的網頁設計事情，同時能在未來網站新增頁面時進行修改，以便處理更多種組合。舉例來說，如果想根據使用者目前位於這一頁，"點亮"Beans標籤的網頁設計話，只需要像這樣為<body>標籤指定id即可。 程序代碼<body id="beans_tab">然後正確的網頁設計標籤就會凸顯出來，就像圖15-4一樣(這邊SEO們用了第一章解釋的網頁設計"mini-tab"樣式)。圖15-4 為<body>標籤指定id所選定的網頁設計標籤SEO們也能為<body>指定其他在標記源代碼，CSS裡都聲明過的網頁設計id，"點亮"SEO們希望凸顯的網頁設計其他分頁標籤。除此之外，你也能以相同的網頁設計概念觸發頁面裡其他與內容相關的網頁設計事件，像是子導航目錄，或者根據頁面的網頁設計id輪換顏色。由於<body>標籤位於頂層，因此它的網頁設計id可以用來控制頁面裡任何在它底下的網頁設計標籤。