WordPress:CSS的樣式目錄

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

當(dāng)呈現(xiàn)一列內(nèi)容的時候，WordPress使用標(biāo)準(zhǔn)的XHTML元素：

<ol> for an Ordered List (where the order of items is important, so items are numbered)

<ol>關(guān)于一個無序的列表（items的順序非常重要，因此items是有限的）

<ul> for an Unordered List (normally shown as items with bullets)

<ul>關(guān)于一個無序列表(通常為帶有bullets的item)

<li> for each item in a list, ordered or unordered.

<li> 關(guān)于列表中的每個item，有序或者無序的。

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.

默認(rèn)情況下，WordPress中的大多數(shù)列表(和一些列表 items)都是由id 或者class屬性識別的，使得樣式表變得非常簡單。只要簡單地更改style.css文件，你就可以橫向地而不是豎向地顯示列表，特寫突出動態(tài)菜單, [[WordPress:#Styling_the_Bullet|更改bullet]]或者給樣式編號，移除所有bullets，或者一些結(jié)合體。

WordPress 1.5 Nested Lists Layout[ ]

WordPress 1.5 嵌套列表布局[ ]

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.

隨著WordPress1.5版本中主題的創(chuàng)新，不同的主題格式以不同的方式列出。列表用戶一般最想要更改的是WordPress中的工具條菜單列表。因此許多工具條特點是嵌套列表，讓我們更深入地看看這些。

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主題用工具條, 菜單,或者兩者的結(jié)合體來標(biāo)記WordPress工具條菜單部分。查找工具條模板文件，通常稱為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).

#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}

<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).

#sidebar ul {屬性}
#sidebar li {屬性}
#sidebar ul li {屬性}
#sidebar ul ul li {屬性}
#sidebar ul ul ul li {屬性}
#pagenav {屬性}
#pagenav ul {屬性}
#pagenav ul li {屬性}

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.

；ul：第一種樣式(#s工具條 ul)設(shè)置整個列表的外觀。通常包括頁邊空白和padding樣式而且可能包含字體集，顏色，以及其它的有關(guān)整個列表的詳細(xì)信息。

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.

li: #工具條 li給真正的列表item指定了一個樣式。你可以在這兒設(shè)定格式，包含還是不包含bullet。你也可以更改字體，字體大小，或者顏色，而且你甚至可以添加邊框。

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 li: #工具條 ul li決定了第一個嵌套的列表的樣式。每個一級嵌套列表都是在這里定義的，但是如果這些子列表包含有一個特別的CSS ID，你可以將這些子列表設(shè)計為不同的樣式。在上述的例子中，在#搜索部分的后面，一級嵌套列表是#pagenav。如果你使用網(wǎng)頁，會產(chǎn)生網(wǎng)頁的列表。因為網(wǎng)頁是在The WordPress Loop外運行的，而且通過會突出特別的信息，像"關(guān)于我們", "聯(lián)系",和"站點地圖",你可能想要將網(wǎng)頁樣式與列表上的其它內(nèi)容設(shè)計地不同，只要將關(guān)于網(wǎng)頁外觀的特別的信息放到#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 li: The #sidebar ul ul li將樣式應(yīng)用到#sidebar ul ul中的鏈接中，幫助自定義這個列表的外觀。如果你已經(jīng)自定義了#pagenav列表，就會與你的嵌套列表的其它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:

ul ul ul li: #sidebar ul ul ul li是二級列表的樣式。如果你有一個擁有子類別的類別列表，類別標(biāo)題會是列表的第一級，類別是列表的第二級，或者子子列表，例如下面的例子。一些設(shè)計者喜歡將第三級列表的字體設(shè)計地小一點，一個不同的bullet或者不同的顏色，以突出第三級列表上的內(nèi)容：

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

類別標(biāo)題
- 類別一
- 類別二
  - 子類別一
  - 子類別二
- 類別三

Styling Specific List Items[ ]

設(shè)計特別的列表 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:

你希望類別列表與你的歸檔列表看起來不一樣嗎？打開index.php或者sidebar.php并且仔細(xì)地將下面的樣式references添加到合適的列表item中：

<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:

要自定義類別和歸檔列表，將下面的內(nèi)容添加到你的樣式表上，來一一地自定義這些：

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

#類別 {屬性}
#類別 ul {屬性}
#類別 ul li {屬性}
#歸檔 {屬性}
#歸檔 ul {屬性}
#歸檔ul li {屬性}

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.

檢查列表上的其它部分，并且給這些部分樣式refernce名稱并且將這些添加到樣式表上。當(dāng)你確認(rèn)了列表了哪個部分控制了列表的哪個方面的時候，就要開始更改列表的外觀了。

Styling individual items[ ]

設(shè)計個別的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)簽都需要自己的class或者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.

列表的一個重要的部分是bullet-一個吸引眼球的點，點號或者圖形，暗示讀者"這是個列表"。Bullet的樣式或者列表的編號方式取決于樣式表中的list-style-type 屬性。默認(rèn)參數(shù)值是disc。其它基本的參數(shù)值是circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, 和 none。讓我們把默認(rèn)的參數(shù)值更改為其它的內(nèi)容，像一個正方形。

#sidebar li {
   list-style: square;
}

#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，也不用使用默認(rèn)的disc，列表現(xiàn)在有小的squares。

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: 但是并不是所有的列表需要bullets。從整體布局上看，你只會知道一個列表是一個列表。要刪除bullet，你要將樣式表改為：

#sidebar li {
   list-style: none;
}

#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.

現(xiàn)在#工具條ID的DIV內(nèi)部的任何帶有<li>的標(biāo)記都沒有了bullet。試試不同的參數(shù)值，看看你能夠得到什么樣的結(jié)果。

HINT: In terms of accessibility, an ordered list is easier to navigate than an unordered list. 提示:對于可訪問性方面，一個有序的列表比一個無序的列表更容易訪問。

Using a Custom Image Instead of a Bullet[ ]

使用一個自定義圖像而不是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.

厭煩了bullets?使用一些CSS方法，去除這些惱人的bullet。在這個例子中，使用list-style-image指示瀏覽器使用bullet圖像而不是舊的惱人的默認(rèn)bullets。

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

找一些有趣的bullet圖形并且將下面的代碼添加到你的樣式表上，給你的列表添加一些有趣的bullets。

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

#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).

注意你可以使用一個絕對的鏈接而不是一個相對的鏈接。只要將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.

要在你的標(biāo)題后面添加一個邊框，像一個下劃線，你只要在標(biāo)題的下面而不是標(biāo)題的上面的ul上，添加一個邊框樣式，就可以了。

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

#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:

進(jìn)一步操作，在你的列表周圍加上一個框，將標(biāo)簽置于框的上方。

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

#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: 你最后的結(jié)果可能看起來像：

Category Title

Category One

Category Two

Category Three

類別標(biāo)題

類別一

類別二

類別三

Or really expand the possiblities to something like this:

或者增加可能性：

Category Title

Category One

Category Two

Category Three

Category Title

類別一

類別二

類別三

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.

你會發(fā)現(xiàn)列表bullets和列表布局中有許多樂趣。如果你處理bullets和列表的時候，遇到了麻煩，查看下面列出的資源，然后訪問WordPress s支持論壇得到更多的幫助。

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.

如果你有有關(guān)嵌套列表方面的問題，下面可能會提供解決問題的方法。同時查看CSS發(fā)現(xiàn)并解決問題關(guān)于更多的幫助。

Improper Tag Structure[ ]

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

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.

產(chǎn)生錯誤的最大的問題或者嵌套列表中非確認(rèn)部分，是由于缺乏合適的列表結(jié)構(gòu)。這里有一個非常簡單的而且正確的嵌套列表布局。注意一個新的列表開始（嵌套），最后一個item后的</li>沒有關(guān)閉。只有新的嵌套列表形成了，這個</li>才會關(guān)閉。

<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

<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[ ]

模板標(biāo)簽列表[ ]

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.

這個列表內(nèi)使用的不同的模板標(biāo)簽，擁有許多不同的方法，使用并且依賴列表標(biāo)簽。一些標(biāo)簽自動地包含UL 和LI，這樣你只要使標(biāo)簽包含在列表中，標(biāo)簽就能夠執(zhí)行所有任務(wù)。其它的標(biāo)簽需要UL放在模板標(biāo)簽的后面，而產(chǎn)生自身的LI標(biāo)簽。其它的模板標(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 或者 wp_list_pages的時候，遇到了有關(guān)嵌套列表方面的問題，查看標(biāo)簽的參數(shù)，看看參數(shù)是怎樣使用列表標(biāo)簽，并且將它們的用法與你自己的用法，相比較。

Parent/Child Relationships[ ]

母/子關(guān)系[ ]

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

在 CSS 母子關(guān)系中討論了，列表是最大的問題之一。子列表內(nèi)容的樣式受到"母"列表影響。如果母列表樣式的顏色是"紅色的"，但是你希望子列表是"藍(lán)色的"，那么你需要在子列表樣式中將顏色規(guī)定為"藍(lán)色的"，這樣子列表樣式就能夠不顧母列表樣式。

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:

WordPress工具條中的嵌套列表通過包含有鏈接。因此，雖然你可以盡可能地設(shè)計列表，鏈接的樣式會超過樣式表的樣式。通過規(guī)定鏈接一個特定的樣式class，你可以控制列表中的鏈接的顯示方式，包含鏈接的懸停屬性：

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

#sidebar a {屬性}
#sidebar a:hover {屬性}
#categories a {屬性}
#categories a:hover {屬性}
#archives a {屬性}
#archives a:hover {屬性}

Resources[ ]

資源[ ]

創(chuàng)建橫向菜單
突出動態(tài)菜單
自定義你的工具條
站點結(jié)構(gòu)1.5
進(jìn)入模板標(biāo)簽
Taming 列表
Listamatic
CSS 文本格式

針對初學(xué)者的層疊式樣式表交互學(xué)習(xí)指南:列表
Max Design的定義表- 誤用或者誤解?
CSS Unleashed – 體驗列表，菜單，表格內(nèi)容，以及更多的
Simplebits的樣式嵌套列表

久久精品水蜜桃av综合天堂,久久精品丝袜高跟鞋,精品国产肉丝袜久久,国产一区二区三区色噜噜,黑人video粗暴亚裔

WIKI使用導(dǎo)航

站長百科導(dǎo)航

站長專題

WordPress:CSS的樣式目錄

目錄

WordPress 1.5 Nested Lists Layout[ ]

WordPress 1.5 嵌套列表布局[ ]

Styling Specific List Items[ ]

設(shè)計特別的列表 Items[ ]

Styling individual items[ ]

設(shè)計個別的items[ ]

Styling Your Lists[ ]

Using a Custom Image Instead of a Bullet[ ]

使用一個自定義圖像而不是Bullet[ ]

Adding a Border to Your List[ ]

給你的列表添加一個邊框[ ]

Troubleshooting Nested Lists[ ]

解決嵌套列表問題[ ]

Improper Tag Structure[ ]

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

Template Tag Lists[ ]

模板標(biāo)簽列表[ ]

Parent/Child Relationships[ ]

母/子關(guān)系[ ]

Resources[ ]

資源[ ]