這篇主要講解如何樣式化側(cè)邊欄里面的所有元素，在對(duì)側(cè)邊欄樣式化之后，這系列教程就將差不多結(jié)束了。

打開 XAMPP，主題文件夾，F(xiàn)irefox，IE 和 style.css 文件。

第1步：樣式化側(cè)邊欄的無序列表

在 .sidebar{} 下輸入：

.sidebar ul{
list-style-type: none;
margin: 0;
padding: 0 10px 0 10px;
}

現(xiàn)在已經(jīng)為側(cè)邊欄樣式化父級(jí)無序列表（UL）標(biāo)簽。所有的子 UL 或者內(nèi)嵌的 UL 將會(huì)繼承同樣的樣式。在這里，它是無列表樣式，零空白和10像素的填充。

如下所示：

第二級(jí)的（或內(nèi)嵌的） UL 繼承了第一級(jí) UL 的樣式。如果你給了第一級(jí) UL 應(yīng)用了邊框，第二級(jí)的 UL 同樣也會(huì)有個(gè)邊框。

保存并刷新就可以看到列表?xiàng)l目現(xiàn)在已經(jīng)沒有前面的圓點(diǎn)了。

注意下你是如何增加頂部和底部填充的。

第2步：給 LI 添加填充

在 .sidebar ul{} 下輸入：

.sidebar ul li{
padding: 10px 0 10px 0;
}

這是現(xiàn)在的填充：

在進(jìn)行這步之前，搜索框和日歷之間以及日歷和頁(yè)面之間是沒有空間的，如何給這些模塊之間添加空間呢，我們需要給 .sidebar ul li{} 添加的10像素頂部和底部填充。為什么不在第一個(gè)地方的 UL 標(biāo)簽增加10像素的填充呢？這樣的話將會(huì)有20像素的頂部填充和20像素的底部填充。如果你還是不明白，那么就去給 .sidebar ul{} 增加頂部和底部的填充，就會(huì)看到問題的所在了。

第3步：樣式化側(cè)邊欄下的子標(biāo)題

在 .sidebar ul li{} 下輸入：

.sidebar ul li h2{
font-family: Georgia, Sans-serif;
font-size: 14px;
}

還記得我們已經(jīng)樣式化了在 .post{} 下面的子標(biāo)題，但是這個(gè)是不會(huì)對(duì)側(cè)邊欄的子標(biāo)題起作用的，因?yàn)榍懊嫖覀儍H僅樣式化在 .post{} 下的子標(biāo)題？現(xiàn)在我們是在樣式化側(cè)邊欄下的子標(biāo)題，結(jié)果如下：

這就是我的頁(yè)面鏈接的樣子。可能默認(rèn)安裝下的 WordPrss 只有一個(gè)鏈接：About。我的離線 WordPress 增加了多重頁(yè)面鏈接是為了測(cè)試最低級(jí)別的鏈接看起來的樣子，注意到我已圈出在底部有不必要額外的填充，這是一個(gè)非常好的關(guān)于樣式繼承的例子。這里不是10像素而是20。

因?yàn)槟憬o .sidebar ul li{} 增加了填充，為了解決這個(gè)問題，執(zhí)行第4步。

第4步：清除子 UL 下的 LI 填充

在 .sidebar ul li h2{} 下輸入：

.sidebar ul ul li{
padding: 0;
}

在 .sidebar ul ul li{} 中連續(xù)的 UL 指明了我們是在定義第二級(jí)別的 LIs。再說一次，當(dāng)所有的值都為 0 的時(shí)候，你不需要 px 這個(gè)后綴。

結(jié)果如下：

行距太近了，所以我們把行高改成 24px。

增加 line-height: 24px; 到 .sidebar ul ul li{}.

另外，如果你在 IE 下，搜索框下又多出了額外的空白，在下面增加 form：

body, h1, h2, h3, h4, h5, h6, address, blockquote, dd, dl, hr, p{
margin: 0;
padding: 0;
}

改成：

body, h1, h2, h3, h4, h5, h6, address, blockquote, dd, dl, hr, p, form{
margin: 0;
padding: 0;
}

第5步（可選的）：擴(kuò)展日歷寬度到整個(gè)側(cè)邊欄

執(zhí)行這一步，如果你想讓你的日歷的數(shù)據(jù)能夠擴(kuò)展并覆蓋整個(gè)側(cè)邊欄的寬度。當(dāng)前你的日歷應(yīng)該是這樣的：

為了樣式化日歷，找出在里面的標(biāo)簽和這個(gè)標(biāo)簽的名字或者 id。 查看 > 頁(yè)面源代碼或者源代碼，側(cè)邊欄是在底部，所以到源代碼的底部查找 Calendar。

現(xiàn)在我們知道日歷是在一個(gè) TABLE 標(biāo)簽中并以 wp-calendar 作為 id。那么如何在style.css 文件中鎖定 wp-calendar table 呢？

答案是 table#wp-calendar{}。為什么？早前，你學(xué)會(huì)了使用 # 號(hào)當(dāng)樣式化使用 id 而不是 class 命名的 DIV。在這里，是 table 而不是 DIV，跟著是 id 的值，wp-calendar。

如果僅僅 #wp-calendar{} 也是可以的因?yàn)樗俏ㄒ坏亩?WordPress 不會(huì)使用 #wp-calendar 給別的標(biāo)簽。但是你應(yīng)該試著特定化當(dāng)能夠的時(shí)候。如果要更加特定化 使用.sidebar ul li table#wp-calendar{}，想更加特定化？好的，使用 .sidebar ul li#calendar table#wp-calendar{}. 因?yàn)榱斜項(xiàng)l目（LI）包含日歷子標(biāo)題和一個(gè) id 被命名為 calendar 的日歷表格。

現(xiàn)在你知道可以使用什么，如何怎么擴(kuò)展 table，給表格加上 width: 100%; 。

在 .sidebar ul ul li{} 下輸入：

table#wp-calendar{
width: 100%;
}

保存和刷新，結(jié)果如下：

width: 100%; 因?yàn)槟阆肴諝v表格適應(yīng)到側(cè)邊欄的寬度，無論你把側(cè)邊欄改成多少像素。

可能這樣看起來并不好，但是我相信你已經(jīng)知道如何改進(jìn)。日歷需要更多的樣式去看起來更好。技巧：再次查看源代碼，找出在 TABLE 下的哪個(gè)標(biāo)簽?zāi)憧梢詷邮交?/span>

未經(jīng)允許不得轉(zhuǎn)載：445IT之家 » WordPress主題開發(fā)教程二十二：樣式化側(cè)邊欄