學(xué)習(xí) CSS 最好的方法就是去使用它，不像 XHTML 和 PHP 需要接觸模板的核心文件，同樣不要需要理解任何基本概念，只要去用它，通過(guò)使用和修正錯(cuò)誤是可以讓你快速學(xué)會(huì)。
我們現(xiàn)在已經(jīng)在 style.css 文件有些內(nèi)容，讓我們先來(lái)看看這部分內(nèi)容是干什么的？
- 第一行顯而易見(jiàn)就是主題的名字。
- 第二行是這個(gè)主題的地址，如果你的主題只是私用的而不準(zhǔn)備發(fā)布的話，那就不用管它了。
- 第三行是主題的描述。
- 第四行是版本號(hào)，這是非常重要的，特別是當(dāng)你公開(kāi)發(fā)布你主題新版本的時(shí)候。
- 第五和第六行分別是主題作者的名字和主頁(yè)。
在主題信息兩邊的 /* 和 */ 符號(hào)是為了讓主題的信息不影響該文件的其他內(nèi)容，這是 CSS 的注釋。當(dāng)輸入 CSS 代碼去樣式化你的網(wǎng)頁(yè)的時(shí)候，你可能想在這里增加些注釋使得能夠在以后更清楚知道這部分是干什么的。顯然我們并不想你的注釋影響實(shí)際的代碼，所以可以使用 /* 和 */ 這一對(duì)符號(hào)使得注釋不被解釋。
下面是處理后的主題信息
第1步：打開(kāi) style.css 文件
- 打開(kāi) Xampp，主題文件夾，F(xiàn)ireFox，IE 瀏覽器和 style.css 文件。
- 在兩個(gè)瀏覽器的地址欄都輸入：http://localhost/wordpress
從這里開(kāi)始，我們需要同時(shí)在 FireFox 和 IE 上測(cè)試主題，不同的瀏覽器對(duì)應(yīng) CSS 的代碼解釋是不同的。如果能夠在盡可能多的瀏覽器器上和盡可能多的操作系統(tǒng)上測(cè)試你的主題是最好的（Safari，Opera，Linux，Netscape 等等）。如果你和我一樣懶，那就只在 FireFox 和 IE 上來(lái)測(cè)試你的主題吧。
第2步：添加 CSS 代碼
在 style.css 文件中輸入以下代碼：
body{
margin: 0;
font-family: Arial, Helvetica, Georgia, Sans-serif;
font-size: 12px;
text-align: left;
vertical-align: top;
background: #ffffff;
color: #000000;
}
像 XHTML 和 PHP 一樣，通過(guò)制表符增加縮進(jìn)來(lái)的組織代碼：
保存 style.css 文件并刷新 兩個(gè)瀏覽器 Firefox 和 Internet Explorer 查看變化。
把 body{ } 看作一個(gè)標(biāo)簽，然后把它里面所有的東西看作屬性和值，和處理 XHTML 時(shí)一樣。{ 是開(kāi)始符，} 是結(jié)束符。在 { 和 } 之間，冒號(hào)意思是開(kāi)始而分號(hào)意思是結(jié)束。（我在涉及到 XHTML，PHP，CSS的時(shí)候都使用標(biāo)簽，屬性和值這些術(shù)語(yǔ)是為了保持簡(jiǎn)單，實(shí)際上 PHP 和 CSS 有不同術(shù)語(yǔ)。如參數(shù)（parameters），選擇器（selector）和屬性（property）。）
在我們繼續(xù)走之前，我需要解釋下為什么使用 body{ } （CSS 選擇器），是因?yàn)槟闶窃跇邮交W(wǎng)頁(yè)的絕大基本部分（或者說(shuō)是總體部分），<body> 標(biāo)簽。你不會(huì)樣式 <head> 因?yàn)檫@個(gè)標(biāo)簽沒(méi)有東西需要樣式化。你網(wǎng)頁(yè)上展示的絕大部分的東西是在<body> 和 </body> 標(biāo)簽之間。
然后，在后面你會(huì)樣式化 ID 為 header 的 DIV 標(biāo)簽。
進(jìn)一步的解釋：
margin: 0; 處理 body 標(biāo)簽的默認(rèn)的頁(yè)邊空白，如果你要頁(yè)邊空白或者更大的頁(yè)面空白，把 0 改成 10px，20px 或者其他。PX 意思是像素。每個(gè)像素是你電腦屏幕的一個(gè)點(diǎn)。當(dāng)你的頁(yè)面空白是 0 的話，就不需要在后面跟上 px。
在下面的圖片中，紅色高亮的區(qū)域就是應(yīng)用于 body 標(biāo)簽的默認(rèn)的頁(yè)邊空白。
當(dāng)給其樣式化為 margin: 0;，下面是沒(méi)有頁(yè)面空白的相同頁(yè)面：
font-family: Arial, Helvetica, Georgia, Sans-serif; 為你的網(wǎng)頁(yè)或者網(wǎng)站選擇使用哪種字體。這些字體中的第一個(gè)，Arial 是可替換的，如果你的用戶(hù)沒(méi)有在他們的電腦上安裝 Arial 這種字體，style.css 文件就會(huì)尋找 Helvetica，然后是 Georgia，再接著是 Sans-serif。你可以在字體文件夾（我的電腦 > 系統(tǒng)盤(pán) > Windows下面）找到你的字體列表。
font-size: 12px; 顯而易見(jiàn)的是字體大小。可以把它改大或改小以查看變化。
text-align: left; 讓你的文本向左對(duì)齊。把它改成 text-align: right; 去查看不同之處。
vertical-align: top; 使得所有的東西從上面開(kāi)始。如果是中部或底部排行你的 body 標(biāo)簽，所有東西將會(huì)向下推。
background: #ffffff; 意思是白色背景。#ffffff 是白色十六進(jìn)制代碼。#000000 是黑色十六進(jìn)制代碼。
color: #000000; 意思是文本顏色是黑色。
如果你想向前更進(jìn)一步或者自己學(xué)習(xí) CSS，最好的地方是 w3schools.com
未經(jīng)允許不得轉(zhuǎn)載：445IT之家 » WordPress主題開(kāi)發(fā)教程十八：Style.css 和 CSS 介紹
