WordPress 1.5之前，WordPress網(wǎng)站樣式普普通通，毫無特色，自WordPress引入新功能——主題后，網(wǎng)站樣式開始有了很大變化。用戶只要輕輕點擊幾下就可以立即為自己的網(wǎng)站換上新裝。再多點擊幾次，或者略微做些修改，網(wǎng)站樣式也可能立刻就被弄得一團糟——這就是網(wǎng)頁設計的世界。
網(wǎng)頁樣式出錯時，很多人首先會向WordPress論壇尋求幫助。雖然論壇上的志愿者會盡他們所能幫用戶解決問題，但用戶也可以根據(jù)下面介紹的方法自己先試著解決問題，或者至少對問題的起因有更好的了解。
進入論壇前的必知事項
文章稍后列出了用戶進論壇詢問布局和設計問題時需要注意的事情，以及解決問題的小技巧。
檢查HTML和CSS代碼
仔細而全面地檢查HTML和CSS代碼，確保所有引用都能匹配。
縮小問題代碼范圍
稍后我們會向大家介紹一些方法，幫助確認可能引發(fā)問題的原因范圍，以此縮小問題代碼范圍。
常見CSS錯誤
有些問題以前可能已經(jīng)有人報告過。下面也列出了一些最常見的CSS錯誤，幫助大家揪出影響網(wǎng)站樣式的細節(jié)問題。
除害——注意瀏覽器BUG
我們會盡力幫助找出CSS出現(xiàn)問題的癥結(jié)所在，但很多問題都來自于瀏覽器BUG或者不同瀏覽器之間的矛盾，因此我們還會給出一些避免瀏覽器BUG的意見和建議。
本文的最終目的是幫用戶解決CSS文件內(nèi)的樣式設計問題，而不是HTML或PHP文件中的問題。了解具體情況請看WordPress主題的使用。
備份
為確保萬無一失，介紹解決問題的方法前，首先請大家備份數(shù)據(jù)庫。其次，備份需要修改的文件，如果中途出錯，可以用備份文件還原。
即使不編輯WordPress文件，也可以“現(xiàn)場”測試CSS
如果方法掌握得當，用 Jesse Ruderman的Edit Styles書簽工具或火狐的Edit CSS插件進行即時CSS測試會方便、安全得多。修改文件后，就可以將新代碼復制到相應的WordPress主題文件中了（當然，記住要事先備份WordPress主題文件）。
火狐瀏覽器的Web Developer 插件也可以測試CSS。
進入論壇前的必知事項
CSS和網(wǎng)頁設計新人可以先查看一些WordPress的CSS技巧、資料，掌握CSS基本知識，或許能從中得到一些問題的答案。新人至少需要了解CSS的基本概念、CSS對HTML或頁面結(jié)構的影響，熟悉論壇上的提問方式，使自己的提問更加專業(yè)、言之有物。
還需要學習一些基本的CSS術語，方便與人交流。學習術語不僅僅是為了深入了解CSS，更重要的是在描述某個問題或事物時，能夠準確給出相應的專用名詞。
CSS（層疊樣式表）由成片的代碼組成，這些代碼決定網(wǎng)頁的外觀或網(wǎng)頁HTML代碼的樣式。在WordPress中，CSS樣式表通常被存放在當前主題目錄下的style.css文件中。存儲網(wǎng)頁結(jié)構的HTML代碼和CSS引用一般則在主題目錄下的index.php文件中。
PHP文件也在主題文件中，PHP文件中的代碼和引用可生成HTML頁面。PHP文件（而非HTML頁面），是用戶修改特定CSS選擇符標簽的最后機會。了解具體情況請看WordPress主題的使用。
CSS選擇符（名稱）一般可分為三種引用類型：ID，類，以及HTML標簽。
ID
ID是對網(wǎng)頁上某個特定獨有區(qū)域的引用。人們通常將HTML網(wǎng)頁上的ID看作是一個閉合的DIV（division）塊：
<div id="header">Title of the Page</div>
在樣式表（CSS）中，ID選擇符被引用為#header，效果如下：
#header { position: relative; margin:0; padding:0; height:100px; width: 100%; background: red; color: white;} 類
類是對網(wǎng)頁上任何需要特殊顯示的元素的引用。例如，如果需要高亮顯示文章中的一兩個單詞（假設使用紅色作為高亮色），就需要在樣式表中添加一個這樣的類選擇符：
.hilite { color: red} 而HTML中的引用則是：
...this is some text about something I want <span class="hilite">in red</span>. And some more rambling here...
根據(jù)上面的介紹能看出，樣式表中ID選擇符和類選擇符之間的差別在于，ID使用的是井號（#name），而類用的則是句號（.name）。在一個頁面上，ID引用必須是獨一無二的，只能使用一次。類引用則可以在同一頁面中重復使用。
HTML標簽
如果希望“設計”一個特有的HTML標簽引用，比如一個blockquote，網(wǎng)頁內(nèi)代碼可能是這樣的：
<blockquote>This is a pithy and brilliant quote that I knew you would enjoy.</blockquote>
樣式表中blockquote的引用沒有#標記，也沒有句號標記，只能簡單列出HTML元素和設計元素。下面的例子將所引用的內(nèi)容進行左右兩側(cè)縮進顯示，在引用內(nèi)容的左側(cè)放入一個藍色線條，并且將字體設為斜體：
blockquote { position: relative; margin: 10px 50px 10px 50px; padding:5px; font-style:italic; border-left:solid blue 4px; } 我們可以在不同的設計元素上使用各種HTML標簽，像是body, p, H1, H2, H3, ul, li等。
CSS中有更多關于修改ID、類以及HTML的內(nèi)容。
重要提示：有些主題會將css樣式放在不止一個文件中，Kubrick就是這些主題中的一員。如果在某個css文件中修改css屬性后，沒有得到想要的效果，可能就是主題在某個php文件（通常是頁頭文件）中放入了嵌套css，嵌套的css樣式文件改寫了導入的/鏈接到的css樣式表。
檢查HTML和CSS代碼
我們需要在源代碼中檢查網(wǎng)頁布局是否出錯，源代碼就是頁面的“后臺”。
在頁面的“后臺”中，原先在互聯(lián)網(wǎng)窗口上看到的漂亮布局全部化作了成段的、夾雜著奇怪的外文引用的代碼。這和汽車引擎蓋下的情況有些類似，我們知道引擎蓋下的各種機械裝置聯(lián)合起來就能發(fā)動汽車，但頁面后的這些代碼究竟是拿來做什么的呢？
查看HTML代碼
在web瀏覽器中打開頁面，在瀏覽器的“查看”頂級菜單中選擇“頁面源代碼”。之后會彈出另一個瀏覽器窗口或記事本（操作系統(tǒng)自帶的一個小程序），或者其它類似程序，其中的內(nèi)容就是組成頁面的HTML文檔。
查看CSS代碼
要查看CSS代碼，可以使用CSS實際地址，也可以在HTML文檔中查找以下內(nèi)容：
<link rel="style sheet" type="text/css" href="wordpress/wp-content/themes/default/style.css">
這個鏈接就是裝載附加CSS樣式表的鏈接。要查看CSS，可以雙擊文件名，或在瀏覽器中輸入文件的詳細鏈接：
http://www.yoursite.com/wordpress/wp-content/themes/default/style.css
在WordPress中，PHP被用來生成HTML頁面。PHP代碼不僅復雜，也容易讓人迷惑?？梢栽谝焉傻捻撁妫ㄈ缛罩緲永┲胁榭碒TML代碼。如果想修改HTML結(jié)構和CSS引用，需要先修改相應的PHP文件。WordPress主題的使用中介紹了怎樣查看主題模板并找出與當前頁面相匹配的模板。
下文中的解決方法主要是利用CSS來改變頁面布局。要了解如何修改主題，請參考主題開發(fā)。
查看CSS代碼
打開HTML和CSS的后臺之后，我們就要開始像夏洛克·福爾摩斯一樣做偵察了。首先，要明白自己需要查找的信息，以及在什么位置上能找到解決問題的基本元素。
HTML頁面中包括所有結(jié)構代碼，這些代碼豎起了頁面的網(wǎng)格框架?？梢园袶TML頁面看作是一個到處標有注釋的地圖，這里的注釋就是CSS文件中所找到的說明的指示器。
在文檔中掠過一長串<link rel='archives'... 之類的內(nèi)容，直到看到<body>標簽。<body>下是頁面布局的主體部分，<body>之后的每段代碼對頁面的結(jié)構和布局都相當重要。
繼續(xù)滑動鼠標，在文檔中查找識別ID和CLASS（類）語句。假設我們找到的是以下內(nèi)容：
<div id="page"> <div id="header"> <h1>My WordPress Site</h1> <div id="headerimg"> </div> <div class="description">by Me and Only Me</div> </div> <div id="content" class="widecolumn"> <div class="post">
以上代碼看起來可能讓人有些難以理解，但可以幫我們區(qū)分文章內(nèi)容的各個版塊。
代碼以一個名為“page”的DIV標簽開始，設定了整個頁面的外觀。在CSS文件中查找#page，可以看到與頁面樣式相關的外觀樣式表。“page”之后是header DIV，header規(guī)定了網(wǎng)站名稱的標題字體（H1），這一特別樣式來源于Kubrick主題，該主題的頁頭部分含有一個由headerimg DIV設定的圖片。header之后是一個名為“description”的CLASS引用的DIV標簽，description是對網(wǎng)站的簡單描述。在CSS文件的.description部分能找到description區(qū)域的樣式表。
接下來的兩個標簽(</div>) 關閉了header標簽。在這之后是“content”的DIV ID，同時還有一個名為"widecolumn"的類，"widecolumn"之后是另一個post類。 "content"和"widecolumn"設定了包圍日志的容器的整體樣式。
這是一個父子關系的實例。在接下來的部分中我們會發(fā)現(xiàn)，這里正是CSS樣式問題的主要發(fā)源地之一。
網(wǎng)頁設計的最大難題之一就是弄清問題產(chǎn)生的位置以及問題所受影響。這被稱作CSS的“父子關系”。眾所周知，父母做事時總會從內(nèi)心為孩子考慮，為孩子做最好的打算，但孩子卻往往會感到恐懼，最后造成父子間的緊張關系。了解這一點對解決問題會產(chǎn)生一定幫助。
曾經(jīng)有一個WordPress用戶在論壇上抱怨說，她希望自己頁面上的header部分的寬度能與頁面寬度相同，正文部分在頁面居中顯示，頁面左右各留出大片空白，但她在header版塊的空白部分上試驗了很久，也沒有找出解決辦法，于是到論壇上尋求幫助。
<div id="page"> <div id="header">Header Title</div> <div id="content"> <div class="post">Post babble here...</div>
這里空白部分的CSS屬性是：
#page { margin-top:5px; margin-right: 100px; margin-bottom: 5px; margin-left:100px; } #header { margin-top:5px; margin-right: 5px; margin-bottom: 5px; margin-left:5px;} #content { margin-top:5px; margin-right: 20px; margin-bottom: 5px; margin-left:20px; } .post { margin-top:5px; margin-right: 5px; margin-bottom: 5px; margin-left:5px; } 從這位用戶的代碼中可以判斷出，更改header的空白部分不起作用的原因在于，空白部分首先受到了page空白部分的影響。這就是CSS父子關系造成的影響。引發(fā)問題的“父親”page指示“孩子”header進行某個操作，而header希望達到的卻是另一種效果。
如果更改page左右兩側(cè)空白，header的空白問題也就解決了。但新的問題又出現(xiàn)了。page繼續(xù)發(fā)揮自己的影響，content部分的寬度也達到了頁面寬度。這時又需要更改content左右兩側(cè)的空白，恢復原有寬度。要是頁面上所有元素都和諧共處，新的空白部分可以是：
#page { margin-top:5px; margin-right: 5px; margin-bottom: 5px; margin-left:5px; } #header { margin-top:5px; margin-right: 5px; margin-bottom: 5px; margin-left:5px;} #content { margin-top:5px; margin-right: 100px; margin-bottom: 5px; margin-left:100px; } .post { margin-top:5px; margin-right: 5px; margin-bottom: 5px; margin-left:5px; } 縮小問題代碼范圍
意識到父子關系對網(wǎng)頁的影響之后，很多問題就可以解決了。但有時這些關系是那么地復雜，很難斷定究竟是哪個部分出了問題，又是哪一部分影響到了哪一部分。
下面有些招數(shù)可以更快地逐步縮小并最終確定出問題的CSS版塊、區(qū)塊以及class類。首先要備份CSS文件在內(nèi)的所有主要文件，確保出錯后可以用備份恢復原狀。
確定問題根源并糾正后，刪除中途用以測試的內(nèi)容，使網(wǎng)頁恢復“正常”狀態(tài)。
圈出各個版塊
認識HTML頁面的各個區(qū)域或塊后，打開CSS文件，為所有的DIV塊加入以下屬性：
border:solid 1px color
在每個區(qū)塊中單詞color的后面加上另一種顏色的名稱。
例如：
#page { margin:5px; padding:0; border: solid 1px red; } #header { margin: 10px; padding: 5px; border: solid 1px blue; } #content { margin:5px 100px 5px100px; padding:10px; border: solid 1px green; } .post { margin:5px; padding:10px; border: solid 1px yellow; } 保存CSS文件，在web瀏覽器中查看頁面（點擊刷新或F5）?，F(xiàn)在可以看到不同區(qū)塊外會有不同顏色的方框圍繞。
如果文本沒有被有色方框圍繞，檢查之前所更改的選擇符是否拼寫正確，是否能被HTML識別。
如果問題出現(xiàn)在藍色方框中，就可以從藍色方框中著手解決問題。記住在問題解決后刪除測試屬性。
在火狐瀏覽器中有一個插件可以按照以上方法圈出各個版塊，極大地簡化了解決問題的過程。這個插件叫做 Aardvark，可以在http://www.karmatics.com/aardvark/上免費下載，網(wǎng)站上還有一個試驗演示。
高亮顯示各版塊
除了用文本框框出不同版塊以分辨CSS/HTML問題源頭外，還可以通過改變文本顏色來突出顯示問題所在區(qū)域。注意：在測試過程中記住原有顏色，以便完成測試后恢復原狀。記住備份！
可以在CSS文件中某個選擇符的屬性中加入color:red（也可以是其它顏色）字樣，更改該版塊的字體顏色：
H1 { font-style:bold; font-size: 125%; color: red; } 鮮艷的紅色H1標題會立刻吸引住我們。
要更改某個版塊的背景色，可以加入background:pink，使整個背景顏色都變成粉色。
#header { margin:5px; padding: 10px; background:pink; } 效果圖：
現(xiàn)在整個header區(qū)塊的背景色都是粉色的了。查找到錯誤并修正后，刪除對背景色的設置，讓網(wǎng)頁恢復原狀。
驗證代碼
即使非常小的細節(jié)性錯誤都有可能摧毀頁面布局。一個拼寫錯誤的標簽（將href拼寫成rhef），一個忘記閉合的標簽，一個被忽略的屬性，甚至只是個錯誤的屬性都可能使頁面癱瘓。
我們?yōu)g覽代碼時，很容易忽略代碼中的小問題，而免費的在線驗證程序可以幫我們檢查出HTML、XML以及CSS代碼中的細微錯誤。大多數(shù)在線驗證程序都需要我們輸入網(wǎng)站的URI（鏈接）以初始化驗證過程，有的甚至需要我們復制代碼或上傳文件才能開始驗證。默認情況下，WordPress會驗證自己的代碼，而一旦用戶更改了代碼，WordPress就不再驗證，因此即使最小的代碼錯誤也可能引發(fā)混亂局面。
不同的驗證程序檢查不同問題，如果不能在某個驗證程序中找出解決方法，可以嘗試另一種驗證程序。很多驗證程序建議用戶進行這樣或那樣的修改，但修改前請找出問題所在。
WordPress手冊文檔中的驗證網(wǎng)站提供了很多驗證網(wǎng)站和在線驗證程序的資料，幫助大家了解更多網(wǎng)站驗證方面的信息。
火耕法——最后的方法
膽小勿入
注意：火耕法有兩種形式，如果覺得第一種過于冒險，可以選擇第二種。
進行以上操作后如果仍然不能確定問題范圍，這里還有一種方法，這種方法有時會被叫做“火耕法”，可以幫助縮小問題范圍。火耕法需要不被打擾的環(huán)境、完全的注意力以及方便出錯后還原頁面布局的完整備份。最好熟悉HTML和CSS。
1. 備份所有文件
2. 在瀏覽器中打開某篇日志，點擊“查看”——“頁面源代碼”
3. 將源代碼文件命名為junk.html，以文本文檔形式保存在硬盤中的空白測試文件夾中。不要關閉文件，在整個測試過程中保持文件的打開狀態(tài)。
4. 將CSS文件復制到同一測試文件夾下
5. 如果圖片出錯，將圖片文件夾或圖片復制到測試文件夾中
6. 將junk.html源文件中的樣式表引用：
<link rel="style sheet" type="text/css" href="wordpress/wp-content/themes/default/style.css">
改為：
<link rel="style sheet" type="text/css" href="style.css">
保存junk.html文本文件（但不要關閉文件）。
7. 在測試文件夾中雙擊junk.html，在瀏覽器中檢查文件內(nèi)容。這時可以看到帶有相應圖片的正常頁面樣式。如果圖片仍然不合適，雙擊鏈接引用進入樣式表。
8. 在junk.html文本文件中找到問題開始的地方，轉(zhuǎn)移到該版塊的上一部分（一個包括開始標簽和結(jié)束標簽的版塊），如：
<p>babble...</p>
或
<div class="post">babble...</div>
高亮顯示從開始標簽到結(jié)束標簽的整個版塊內(nèi)容，剪切這部分內(nèi)容（Ctrl+X）.
9. 保存文件
10. 在瀏覽器中刷新網(wǎng)頁（F5或點擊刷新——如果沒有發(fā)現(xiàn)什么變化，按住SHIFT鍵，然后再按下F5鍵，如果在火狐瀏覽器中則可以同時按下Ctrl+Shift+R）.
11. 這時應該看到頁面上被剪切的內(nèi)容已經(jīng)不見了。繼續(xù)檢查頁面，看問題是否已經(jīng)被修正，如果是，那么被剪切的這部分內(nèi)容就是問題所在了。如果問題仍然存在，前往下一步。
12. 如果問題仍然存在，返回junk.html文件，將光標放回被剪切內(nèi)容的位置上。將被剪切內(nèi)容復制回文件中（ctrl+V）。之后將光標移到附近位置，重復第8至第12步。
問題可能會在整個過程中的某一步驟得到糾正或自動消失。查找問題時先從較大的區(qū)域開始，確定問題出現(xiàn)在某個區(qū)域后，再將該區(qū)域劃分為小塊，最終找出問題所在。標注CSS引用以識別問題所在位置，以便于在CSS文件中修正錯誤。
相對溫和的方法
火耕法有個相對溫和的版本——相較于之前介紹的“剪切”代碼的問題部分，這里可以將問題部分剪切并復制到記事本或其它文本編輯器中，確保不會因為用戶中途分神而丟失所剪切的內(nèi)容。隨時記住備份，避免意外情況發(fā)生（意外情況發(fā)生的頻率遠高于你的想象?。?。
常見CSS錯誤
人總是會犯錯誤的。"typo"（打字錯誤）這個詞的出現(xiàn)也是事出有因。下面是一些最常見的CSS錯誤。
代碼拼寫錯誤
眾所周知，leftt與left自然是不同的，這可能就是原來應該出現(xiàn)在頁面左側(cè)的元素出現(xiàn)在頁面右側(cè)的原因。將頁面的頁邊距設為30ps并不影響頁面實際效果，但30px卻會對頁面效果造成很大影響。拼寫錯誤相當常見，也很容易被忽略。幸好CSS驗證程序能幫我們找出這些細微的錯誤。
被忽略的細節(jié)
CSS具有極強的創(chuàng)造性，但也有些必須遵守的基本規(guī)定。除了HTML標簽，每個選擇符（selector）都需要被標注為ID或CLASS，并以selector形式展開（property: value; property: value;），括號、冒號、分號一個都不能少。忽略任何一個細節(jié)頁面布局都不會發(fā)生變化，或者會發(fā)生不良變化。CSS驗證程序也能幫我們找出這些細微的錯誤。
錯誤的選擇符
將本應放在#content-text中的設計創(chuàng)意放在了#content中，這對頁面布局不會有任何幫助。幸好查看頁面時會立即發(fā)現(xiàn)這類錯誤，只要將內(nèi)容剪切并復制到正確的位置就可以解決問題....記住自己在#content中刪除的內(nèi)容。當然，可以在備份文件中找回丟失的代碼。切記！
不恰當?shù)哪０迥K
WordPress的模塊化模板非常實用，但很多時候用戶應該在comments-popup.php或類似名稱的文件中做改動時，會誤在comments.php中做了修改。每次需要修改文件內(nèi)容時，請雙擊相應的模塊版塊。如果無意間出錯，可以用備份資料還原。
多項選擇
CSS不可能看到我們在想什么，如果同一個選擇符有兩個相互矛盾的引用，選擇符需要在其中進行選擇。在新樣式表后引入自己原創(chuàng)的樣式表，上述問題就會經(jīng)常出現(xiàn)。假設你在查找h1標題選擇符的錯誤，但沒有成果，可以在樣式表中搜索該選擇符是否有另一個引用。
除害——注意瀏覽器BUG
無論我們怎樣絞盡腦汁地美化網(wǎng)頁，在另一個瀏覽器中查看我們的頁面時，都有可能看到被扭曲的頁面版式。
不同瀏覽器有不同的頁面解析方式。舊式瀏覽器無法識別新的CSS標準，而新式瀏覽器之間也沒有達成統(tǒng)一的“查看”頁面方式。于是瀏覽器的網(wǎng)頁顯示效果總是不盡如人意，設計元素或過度閃爍，或不斷跳動，或丟失，頁面版塊被移動，布局扭曲。
那么要怎樣才能判斷出是瀏覽器而不是設計導致的原因呢？很多人可能根本無從分辨，但如果精通CSS，就能辨別瀏覽器出錯的各種癥狀。下面是一些簡單的提示：
- 鼠標在頁面上滾動時，文字跳動或閃爍
- 將鼠標移到某個鏈接上時，鏈接和文字都會跳動
- 將鼠標移到鏈接列表上時，整個列表都會跳動
- 頁面樣式異常。文本框或變寬，或變窄
- 圖片覆蓋文字或列表
- 過濾器等特殊效果異?；驘o法顯示
想了解瀏覽器BUG的更多信息，請參閱CSS之修復瀏覽器漏洞。
