WordPress: Styling Lists with CSS：修訂間差異

目錄

• 1 WordPress 1.5 Nested Lists Layout
• 2 WordPress 1.5 嵌套列表設(shè)計
• 3 Styling Specific List Items
• 4 設(shè)計特定列表項目
  • 4.1 Styling individual items
  • 4.2 設(shè)計個別項目
• 5 Styling Your Lists
• 6 設(shè)計列表
  • 6.1 Using a Custom Image Instead of a Bullet
  • 6.2 使用圖片代替著重號
  • 6.3 Adding a Border to Your List
  • 6.4 跟你的列表添加邊框
• 7 Troubleshooting Nested Lists
• 8 發(fā)現(xiàn)并解決嵌套列表問題
  • 8.1 Improper Tag Structure
  • 8.2 不合適的標(biāo)簽結(jié)構(gòu)
  • 8.3 Template Tag Lists
  • 8.4 模板標(biāo)簽列表
  • 8.5 Parent/Child Relationships
  • 8.6 父/子關(guān)系
• 9 Resources
• 10 資源

When presenting lists of things, WordPress:WordPress uses standard XHTML elements:

• <ol> for an Ordered List (where the order of items is important, so items are numbered)
• <ul> for an Unordered List (normally shown as items with bullets)
• <li> for each item in a list, ordered or unordered.

當(dāng)顯示列表內(nèi)容時，WordPress使用標(biāo)準(zhǔn)的XHTML元素：

• <ol> for an Ordered List (where the order of items is important, so items are numbered)
• <ul> for an Unordered List (normally shown as items with bullets)
• <li> for each item in a list, ordered or unordered.

By default, most lists (and some list items) in WordPress are identified by id or class attributes, making styling lists easy. With fairly simple changes to the style.css file, you can display the list horizontally instead of vertically, feature dynamic menu highlighting, [[WordPress:#Styling_the_Bullet|change the bullet]] or numbering style, remove the bullets altogether, or any combination of these.

默認情況下，WordPress中多數(shù)列表(和一些列表條目)通過id或者class屬性來識別，使樣式列表變的簡單。通過很小的style.css文件的改動，你可以水平顯示出列表而不是垂直顯示，設(shè)置動態(tài)高亮菜單，[[WordPress:#Styling_the_Bullet|改變 bullet符號]]或者給樣式編號，移除全部bullet符號，或者這些符號的組合。

WordPress 1.5 Nested Lists Layout

With the innovation of Themes in WordPress v1.5, different themes format lists in different ways. The most common lists users often want to modify in WordPress are the sidebar menu lists. Since many sidebars feature nested lists, let's look at those in more depth.

WordPress 1.5 嵌套列表設(shè)計

通過WordPress v1.5中的主題創(chuàng)新，不同的主題格式列表有不同的方式。使用者通常想要修改的最多的列表就是邊欄目錄列表。因為很多邊欄有嵌套列表，讓我們更深入的研究一下

Begin by examining the style.css file found within the Theme's folder you are using. Most WordPress Themes label their sidebar menu section with the words sidebar, menu, or a combination of both. So, look for the sidebar Template file, typically called sidebar.php. This is a sample sidebar.php layout; your version may be different, but the concept will be the same.

從檢查你使用的主題文件夾中找到的style.css文件開始，多數(shù)WordPress主題把邊欄菜單部分用sidebar或者menu標(biāo)示，或者是兩者的組合。這樣，尋找邊欄模板文件，尤其是sidebar.php。以下是sidebar.php文件的樣本，你的版本可能有所不同，但是思想概念是一樣的。

<div id="sidebar">
<ul>
  <li id="search"><form method="get" id="searchform"
      action="/wordpress/index.php">
    <div><input type="text" value="" name="s" id="s" />
	<input type="submit" id="searchsubmit" value="Search" />
    </div></form></li>
  <li id="pagenav"><h2>Pages</h2>
    <ul>
    <li class="page_item">
       <a 
	title="About Us">About Us</a></li>
    <li class="page_item">
       <a 
        title="Contact">Contact</a></li>
    <li class="page_item">
       <a 
        title="Site Map">Site Map</a></li>
	</ul></li>
  <li><h2>Archives</h2>
      <ul>
	<li><a 
	 title='February 2005'>February 2005</a></li>
	<li><a 
	 title='January 2005'>January 2005</a></li>
	<li><a 
	 title='December 2004'>December 2004</a></li>
	<li><a 
	 title='November 2004'>November 2004</a></li>
      </ul></li>
  <li><h2>Categories</h2>
     <ul>
	<li><a 
	 title="Stories of our life">Stories</a></li>
	<li><a 
	 title="Computer Tips">Computer Tips</a></li>
	<li><a 
	 title="WordPress Tips">WordPress Tips</a></li>
	<li><a 
	 title="Web Page Design Advice">Web Page Design</a></li>
     </ul></li>
  </ul>
</div>

When you are working with nested lists and you want an individual style for each list, you have to recreate the "nest" in the stylesheet (style.css).

當(dāng)你使用嵌套列表并想要每個列表都有自己的樣式的時候，你必須在樣式表(style.css)中重建"嵌套"。

#sidebar ul {attributes}
#sidebar li {attributes}
#sidebar ul li {attributes}
#sidebar ul ul li {attributes}
#sidebar ul ul ul li {attributes}
#pagenav {attributes}
#pagenav ul {attributes}
#pagenav ul li {attributes}

ul

The first style (#sidebar ul) sets the look for the overall list. It usually contains the margins and padding styles and may contain the font-family, color, and other details for the overall list.

li

The #sidebar li assigns a style to the actual list item. Here you can set the format to include a bullet or not. You can also change the font, font-size, or color, and you can even add borders.

ul li

The #sidebar ul li determines the style of the first nested list. Each first level nested list will be customized here, but you can style each of these sub-lists differently if they are contained within a specific CSS ID. In the above example, after the #search section, the first nested list is #pagenav. If you use WordPress:Pages this is where the list of WordPress:Pages would be generated. Since WordPress:Pages work outside of The WordPress Loop, and often highlight specific information like "About Us", "Contact", and "Site Map", you may want to design the WordPress:Pages style differently than the rest of your lists by putting the specific information about the look of the WordPress:Pages in the #pagenav.

ul ul li

The #sidebar ul ul li applies style to the links within the #sidebar ul ul to help customize the look of this list. Again, if you have customized the #pagenav list, it will be different from the rest of your nested list items.

ul ul ul li

The #sidebar ul ul ul li is the style for the sub-sub-list. If you have a list of categories with subcategories, the category title will be the first level of the list, the categories would be the second level of the list, and any subcategories would be the third level, or sub-sub-list, such as the example below. Some designers like having the third level list feature a smaller font, a different bullet, or even a different color to highlight them from the list items above them:

• Category Title
  • Category One
  • Category Two
    • Sub-Category One
    • Sub-Category Two
  • Category Three

ul

第一個樣式(#sidebar ul)設(shè)置整體列表的外觀. 通常包含整個列表的頁邊空白和填充樣式，也可能包含字體庫，顏色和別的內(nèi)容。

li

#sidebar li 分配樣式給現(xiàn)有的列表項目. 這里你可以設(shè)置是否包含bullet 符號，你也可以改變字體，自號，或者顏色，你還可以加入邊線.

ul li

#sidebar ul li確定第一個嵌套類表的樣式. 每個第一級嵌套列表都在這里制定,但是如果它們有詳細的CSSID的話，你可以設(shè)計每個嵌套的子列表。上述例子中，#search 部分之后, 第一級嵌套列表是#pagenav. 如果你使用頁面，這里是頁面的列表生成的地方。因為 頁面工作在WordPress循環(huán)之外, 并且通常高亮顯示特殊的信息比如"About Us", "Contact", and "Site Map", 你可能想通過把關(guān)于WordPress:Pages外觀特殊信息輸入#pagenav來設(shè)計頁面，使它的樣式與列表的其他部分不同.

ul ul li

#sidebar ul ul li在#sidebar ul ul中提供了連接的樣式 以幫助定義列表的外觀。另外，如果你已經(jīng)定義了#pagenav列表，將會和你剩下的的嵌套列表不同。

ul ul ul li

#sidebar ul ul ul li是二級子表的樣式。如果你有一個帶有子類的分類列表，分類 標(biāo)題將是列表的第一級，分類是第二級，而任何子類將是第三級，或者是子表，如下面的例子。一些設(shè)計者喜歡在第三級使用一些較小的字體，不同的符號，或者不同的顏色，高亮顯示，以區(qū)別它們上一層的項目：

• Category Title
  • Category One
  • Category Two
    • Sub-Category One
    • Sub-Category Two
  • Category Three

Styling Specific List Items

Do you want your Categories List to look different from your Archives List? Then open up the index.php or sidebar.php and carefully add the following style references to the appropriate list item:

<li id="categories"><h2>Categories</h2>.....

<li id="archives"><h2>Archives</h2>....

設(shè)計特定列表項目

你想讓你的分類列表看起來與文檔列表不同嗎？打開index.php或者sidebar.php，仔細的加入如下樣式參數(shù)來更改列表項目：

<li id="categories"><h2>Categories</h2>.....

<li id="archives"><h2>Archives</h2>....

To customize the Categories and Archives list, add the following to your stylesheet to customize these individually:

#categories {attributes}
#categories ul {attributes}
#categories ul li {attributes}
#archives {attributes}
#archives ul {attributes}
#archives ul li {attributes}

Go through any other sections of your list and give them a style reference name and add them to your style sheet. When you've identified which part of the list controls which aspect of the list, it's time to start changing the look of the list.

要想自定義分類和文檔列表，把下列代碼加入樣式表來單獨定義：

#categories {attributes}
#categories ul {attributes}
#categories ul li {attributes}
#archives {attributes}
#archives ul {attributes}
#archives ul li {attributes}

檢查列表的其它部分，給它們一個樣式參數(shù)名，把它們加入到你的樣式表。當(dāng)你能識別出列表的哪一部分控制列表的哪一方面時，就是改變列表外觀的時候了。

Styling individual items

If you want to use image replacement techniques to style your list, each LI tag will need its own class or ID. Try the Classy wp_list_pages plugin.

設(shè)計個別項目

如果你想使用圖片替換技巧設(shè)計你的列表，那么每個LI標(biāo)簽需要它自己的類別或者ID，你可以試試Classy wp_list_pages插件。

Styling Your Lists

An important part of a list is the bullet - an eye catching dot, spot, or graphic that tells viewers "this is a list". The style of bullet or numbering for a list is determined by a list-style-type property in the style sheet. The default value is disc. Other basic values are circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, and none. Let's change the default value to something else, like a square.

#sidebar li {
   list-style: square;
}

設(shè)計列表

列表的一個重要部分就是著重號 – 一個吸引訪問者眼球的點或者圖片，告訴他們"這是個列表"。一個列表中的符號或者數(shù)字的樣式由樣式表中的list-style-type property決定。默認的值是disc。其它基本值是circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, and none。我們把默認值改成別的東西如方塊。

#sidebar li {
   list-style: square;
}

Instead of typing list-style-type, you see a shorthand form of list-style, and instead of using the default disc, the list now features small squares.

不用輸入list-style-type，你可以使用速記形式list-style，而且代替了默認的disc，列表現(xiàn)在使用的是小方塊了。

But not all lists need bullets. By their overall layout, you just know a list is a list. To eliminate the bullet, change the stylesheet to this:

#sidebar li {
   list-style: none;
}

Now, anything tagged with <li>, within the DIV of the ID of #sidebar, would have no bullet. Experiment with different values to see the results you can achieve.

HINT: In terms of accessibility, an ordered list is easier to navigate than an unordered list.

但是不是所有的列表都需要這種著重號，通過他們的整體規(guī)劃，你只需要知道列表是一個列表就夠了。要消除著重號，只需要把樣式表修改成這樣：

#sidebar li {
   list-style: none;
}

現(xiàn)在，任何帶有<li>的標(biāo)簽，#sidebar內(nèi)的ID的DIV標(biāo)簽內(nèi)，都不會在有bullet符號了。你可以嘗試其他不同的值來看看你可能得到什么樣的結(jié)果。

提示:根據(jù)易用性，整齊的列表要比不整齊的列表更容易瀏覽。

Using a Custom Image Instead of a Bullet

Tired of boring bullets? Let's get rid of the boring with a few CSS techniques. In this case, use list-style-image to instruct the browser to use your bullet image instead of the old boring default bullets.

使用圖片代替著重號

厭倦了乏味的著重號嗎？讓我們用幾個CSS技巧來處理這乏味的東西。在這里，使用list-style-image來指示瀏覽器使用你的圖片代替乏味的默認著重號。

Find some interesting bullet graphics and add the following code in your style sheet to add some jazzy bullets to your lists:

#sidebar ul {
 list-style-image: url(/wp-images/image.gif);
 }

Note that you could also use an absolute link rather than a relative link. Simply change the url(/wp-images/image.gif ) to url(http://example.com/wp-images/image.gif).

找一些有趣的著重圖片然后把下面的代碼加入你的樣式表，來加入一寫好看的著重號到你的列表中：

#sidebar ul {
 list-style-image: url(/wp-images/image.gif);
 }

注意你也可以使用絕對連接而不是相關(guān)連接。簡單的把url(/wp-images/image.gif )改為url(http://example.com/wp-images/image.gif)就可以了

Adding a Border to Your List

To add a border, like an underline, after your title, you can simply add a border style to the top of the ul under the title, rather than on the title itself.

#sidebar ul ul {...; border-top: solid 1px blue; ....}

跟你的列表添加邊框

想添加邊框，如標(biāo)題之后的下劃線，你可以簡單的加入一個邊框樣式到ul的頂部，標(biāo)題下邊，而不是在標(biāo)題本身上添加。

#sidebar ul ul {...; border-top: solid 1px blue; ....}

Go a step further and add a whole box around your list with the title sitting atop it:

#sidebar ul ul {...; border: solid 1px blue; ....}

更深一步的添加一個帶有上方標(biāo)題的整個圍繞列表的方框：

#sidebar ul ul {...; border: solid 1px blue; ....}

Add a colored background to your list along with its new border:

#sidebar ul ul {...; border-top: solid 1px blue;
     background:#CCFFFF; ....}

給你的列表連同新的邊框一起添加彩色背景：

#sidebar ul ul {...; border-top: solid 1px blue;
     background:#CCFFFF; ....}

And your end result would look like this:

Category Title

Category One

Category Two

Category Three

你的最終結(jié)果可能顯示如下：

Category Title

Category One

Category Two

Category Three

Or really expand the possiblities to something like this:

Category Title

Category One

Category Two

Category Three

或者也可能擴展成這樣：

Category Title

Category One

Category Two

Category Three

You can have a lot of fun with your list bullets and list layouts. If you are having trouble with your bullets and lists, check out the resources listed below and then visit the WordPress support forums to get more help.

你可以從列表設(shè)計和著重號上找到很多樂趣。如果你有困難，查看下面列出的資源然后訪問WordPress 支持論壇獲得幫助。

Troubleshooting Nested Lists

If you are having trouble with your nested lists, the following might provide the solution. Also check WordPress:CSS Troubleshooting for more styling help issues.

發(fā)現(xiàn)并解決嵌套列表問題

如果你對你的嵌套列表有疑問，下面的內(nèi)容可能提供了一些解決方法。同樣查看CSS問題解決以獲得更多有關(guān)樣式的幫助。

Improper Tag Structure

The number one cause for errors or non-validation within a nested list is the lack of proper list structure. Here is a very simplified and correct nested list layout. Note that when a new list begins (nested), the </li> at the end of the last list item is not closed. It is left open until the new nested list is completed, and then closed.

不合適的標(biāo)簽結(jié)構(gòu)

導(dǎo)致嵌套列表中的錯誤或者是non-validation的首要原因就是缺少合適的列表結(jié)構(gòu)。這里是一個很簡單的正確的嵌套列表設(shè)計。注意當(dāng)一個新的列表形成(嵌套)的時候，最后一個列表項結(jié)束的地方</li>不是閉合的。它是開放的，直到新的嵌套列表完成，然后閉合。

<ul>
   <li>Category One</li>
   <li>Category Two     <----Note: No Closing List Tag
      <ul>
          <li>Sub-Category One</li>
          <li>Sub-Category Two     <----Note: No Closing List Tag
              <ul>
                 <li>Sub-Sub-Category One</li>
                 <li>Sub-Sub-Category Two</li>     <----Note: Closing List Tag
              </ul></li>           <----Note: Nested List Closed
           <li>Sub-Category Three</li>
      </ul></li>       <----Note: Nested List Closed
    <li>Category Three</li>
</ul>      <----Note: End of entire list

Template Tag Lists

Different WordPress:Template Tags used within lists have different ways of using and relying upon list tags. Some tags automatically include the UL and LI so all you have to do is include the tag in the list by itself and it will do all the work. Other tags require the UL to be in place followed by the template tag and it generates its own LI tags. Other template tags require designating which type of list tags are needed or use none at all if not listed in the tag's parameters.

模板標(biāo)簽列表

列表中使用的不同的模板標(biāo)簽有不同的使用方法并且依賴于列表標(biāo)簽。一些標(biāo)簽自動包含UL 和 LI，這樣你所需要做的就是把標(biāo)簽放進列表，它就會做好一切工作。一些標(biāo)簽需要通過模板標(biāo)簽把UL放在合適的，然后它會生成它自己的標(biāo)簽。一些標(biāo)簽要求指明，如果沒有在標(biāo)簽參數(shù)中列出的話，哪種列表標(biāo)簽形式是需要的或者完全不需要的，

If you are having trouble with your nested lists when using template tags like wp_list_cats or wp_list_pages, check their paramaters to see how they use the list tags and compare it with your usage.

如果你在使用模板標(biāo)簽時，如wp_list_cats or wp_list_pages，對你的嵌套列表產(chǎn)生了什么問題，查閱它們的參數(shù)，看看它們?nèi)绾问褂昧斜順?biāo)簽，與你的使用方法做做比較。

Parent/Child Relationships

Discussed in The CSS Parent and Child Relationship, lists are one of the big culprits. Styles in the child list items are influenced by its "parents". If the parent's list style features the color "red" and you want the children to be in "blue", then you need to specify the color in the children's list styles to be "blue" so they will override the parent's style

父/子關(guān)系

在 CSS 父和子的關(guān)系中討論過的，列表是很多故障出現(xiàn)的原因之一。子列表項的樣式受它的"父"列表的影響。如果父級的列表樣式使用了"紅色"，而你想讓子列表使用"蘭色"，那么你需要在子列表樣式中進行設(shè)置，這樣它們才會不受父列表的影響。

Nested lists within the WordPress Sidebar typically contain links. Therefore, while you can style the list as much as you want, the style for links will override the list style. You can control the way the links in the list work by giving them a specific style class of their own, including their hover attributes:

#sidebar a {attributes}
#sidebar a:hover {attributes}
#categories a {attributes}
#categories a:hover {attributes}
#archives a {attributes}
#archives a:hover {attributes}

WordPress邊欄中的嵌套列表通常包括連接。這樣，當(dāng)你設(shè)計你想要的列表時，連接的樣式將不受列表樣式影響。你可以通過給出一個特定的樣式，來控制列表中的連接的樣式，包括它們的屬性：

#sidebar a {attributes}
#sidebar a:hover {attributes}
#categories a {attributes}
#categories a:hover {attributes}
#archives a {attributes}
#archives a:hover {attributes}

Resources

• WordPress:Creating Horizontal Menus
• WordPress:Dynamic Menu Highlighting
• WordPress:Customizing Your Sidebar
• WordPress:Site Architecture 1.5
• WordPress:Stepping Into Template Tags
• Taming Lists
• Listamatic
• CSS Text Formatting
• Cascading Style Sheets Interactive Tutorial for Beginners: Lists
• Max Design's Definition lists - Misused or Misunderstood?
• CSS Unleashed - Experiments with Lists, Menus, Tables of Content, and More

資源

• 創(chuàng)建水平菜單
• 動態(tài)菜單高亮
• 定義邊欄
• 站點結(jié)構(gòu) 1.5
• 走進模板標(biāo)簽
• 馴服列表
• Listamatic
• CSS 文本格式
• 初學(xué)者層疊樣式表交互指南:列表
• Max Design的定義列表 - 誤用或誤解?
• CSS Unleashed - 列表, 菜單, 表格和內(nèi)容以及更多的使用經(jīng)驗
• Simplebits的嵌套列表設(shè)計