WordPress:CSS的样式目录

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

当呈现一列内容的时候，WordPress使用标准的XHTML元素：

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

• <ol>关于一个无序的列表（items的顺序非常重要，因此items是有限的）

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

• <ul>关于一个无序列表(通常为带有bullets的item)

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

• <li> 关于列表中的每个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.

默认情况下，WordPress中的大多数列表(和一些列表 items)都是由id 或者class属性识别的，使得样式表变得非常简单。只要简单地更改style.css文件，你就可以横向地而不是竖向地显示列表，特写 突出动态菜单, [[WordPress:#Styling_the_Bullet|更改bullet]]或者给样式编号，移除所有bullets，或者一些结合体。

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版本中主题的创新，不同的主题格式以不同的方式列出。列表用户一般最想要更改的是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文件开始。大多数WordPress主题用工具条, 菜单,或者两者的结合体来标记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 href="http://www.examplesite.com/wordpress/?page_id=2"
	title="About Us">About Us</a></li>
    <li class="page_item">
       <a href="http://www.examplesite.com/wordpress/?page_id=4"
        title="Contact">Contact</a></li>
    <li class="page_item">
       <a href="http://www.examplesite.com/wordpress/?page_id=8"
        title="Site Map">Site Map</a></li>
	</ul></li>
  <li><h2>Archives</h2>
      <ul>
	<li><a href='http://www.examplesite.com/wordpress/?m=200502'
	 title='February 2005'>February 2005</a></li>
	<li><a href='http://www.examplesite.com/wordpress/?m=200501'
	 title='January 2005'>January 2005</a></li>
	<li><a href='http://www.examplesite.com/wordpress/?m=200412'
	 title='December 2004'>December 2004</a></li>
	<li><a href='http://www.examplesite.com/wordpress/?m=200411'
	 title='November 2004'>November 2004</a></li>
      </ul></li>
  <li><h2>Categories</h2>
     <ul>
	<li><a href="http://www.examplesite.com/wordpress/?cat=47"
	 title="Stories of our life">Stories</a></li>
	<li><a href="http://www.examplesite.com/wordpress/?cat=48"
	 title="Computer Tips">Computer Tips</a></li>
	<li><a href="http://www.examplesite.com/wordpress/?cat=6"
	 title="WordPress Tips">WordPress Tips</a></li>
	<li><a href="http://www.examplesite.com/wordpress/?cat=28"
	 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 href="http://www.examplesite.com/wordpress/?page_id=2"
	title="About Us">About Us</a></li>
    <li class="page_item">
       <a href="http://www.examplesite.com/wordpress/?page_id=4"
        title="Contact">Contact</a></li>
    <li class="page_item">
       <a href="http://www.examplesite.com/wordpress/?page_id=8"
        title="Site Map">Site Map</a></li>
	</ul></li>
  <li><h2>Archives</h2>
      <ul>
	<li><a href='http://www.examplesite.com/wordpress/?m=200502'
	 title='February 2005'>February 2005</a></li>
	<li><a href='http://www.examplesite.com/wordpress/?m=200501'
	 title='January 2005'>January 2005</a></li>
	<li><a href='http://www.examplesite.com/wordpress/?m=200412'
	 title='December 2004'>December 2004</a></li>
	<li><a href='http://www.examplesite.com/wordpress/?m=200411'
	 title='November 2004'>November 2004</a></li>
      </ul></li>
  <li><h2>Categories</h2>
     <ul>
	<li><a href="http://www.examplesite.com/wordpress/?cat=47"
	 title="Stories of our life">Stories</a></li>
	<li><a href="http://www.examplesite.com/wordpress/?cat=48"
	 title="Computer Tips">Computer Tips</a></li>
	<li><a href="http://www.examplesite.com/wordpress/?cat=6"
	 title="WordPress Tips">WordPress Tips</a></li>
	<li><a href="http://www.examplesite.com/wordpress/?cat=28"
	 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)设置整个列表的外观。通常包括页边空白和padding样式而且可能包含字体集，颜色，以及其它的有关整个列表的详细信息。

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指定了一个样式。你可以在这儿设定格式，包含还是不包含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，你可以将这些子列表设计为不同的样式。在上述的例子中，在#搜索部分的后面，一级嵌套列表是#pagenav。如果你使用网页，会产生网页的列表。因为网页是在The WordPress Loop外运行的，而且通过会突出特别的信息，像"关于我们", "联系",和"站点地图",你可能想要将网页样式与列表上的其它内容设计地不同，只要将关于网页外观的特别的信息放到#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将样式应用到#sidebar ul ul中的链接中，帮助自定义这个列表的外观。如果你已经自定义了#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是二级列表的样式。如果你有一个拥有子类别的类别列表，类别标题会是列表的第一级，类别是列表的第二级，或者子子列表，例如下面的例子。一些设计者喜欢将第三级列表的字体设计地小一点，一个不同的bullet或者不同的颜色，以突出第三级列表上的内容：

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

• 类别标题
  • 类别一
  • 类别二
    • 子类别一
    • 子类别二
  • 类别三

设计特别的列表 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并且仔细地将下面的样式references添加到合适的列表item中：

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

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

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

#类别 {属性}
#类别 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名称并且将这些添加到样式表上。当你确认了列表了哪个部分控制了列表的哪个方面的时候，就要开始更改列表的外观了。

设计个别的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.

如果你想要使用图像替换技术来设计列表，每个LI标签都需要自己的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 属性。默认参数值是disc。其它基本的参数值是circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, 和 none。让我们把默认的参数值更改为其它的内容，像一个正方形。

#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，也不用使用默认的disc，列表现在有小的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.

现在#工具条ID的DIV内部的任何带有<li>的标记都没有了bullet。试试不同的参数值，看看你能够得到什么样的结果。

HINT: In terms of accessibility, an ordered list is easier to navigate than an unordered list. 提示:对于可访问性方面，一个有序的列表比一个无序的列表更容易访问。

使用一个自定义图像而不是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图像而不是旧的恼人的默认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)。

给你的列表添加一个边框

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.

要在你的标题后面添加一个边框，像一个下划线，你只要在标题的下面而不是标题的上面的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:

进一步操作，在你的列表周围加上一个框，将标签置于框的上方。

#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: 你最后的结果可能看起来像：

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

类别 一

类别 二

类别 三

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.

你会发现列表bullets和列表布局中有许多乐趣。如果你处理bullets和列表的时候，遇到了麻烦，查看下面列出的资源，然后访问WordPress s支持论坛得到更多的帮助。

解决嵌套列表问题

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.

如果你有有关嵌套列表方面的问题，下面可能会提供解决问题的方法。同时查看CSS发现并解决问题关于更多的帮助。

不合适的标签结构

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.

产生错误的最大的问题或者嵌套列表中非确认部分，是由于缺乏合适的列表结构。这里有一个非常简单的而且正确的嵌套列表布局。注意一个新的列表开始（嵌套），最后一个item后的</li>没有关闭。只有新的嵌套列表形成了，这个</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

<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

模板标签列表

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.

这个列表内使用的不同的模板标签，拥有许多不同的方法，使用并且依赖列表标签。一些标签自动地包含UL 和LI，这样你只要使标签包含在列表中，标签就能够执行所有任务。其它的标签需要UL放在模板标签的后面，而产生自身的LI标签。其它的模板标签需要指定需要哪种类型的列表标签，或者如果没有列在标签参数中的话，就不使用任何标签。

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.

如果你使用模板标签像wp_list_cats 或者 wp_list_pages的时候，遇到了有关嵌套列表方面的问题，查看标签的参数，看看参数是怎样使用列表标签，并且将它们的用法与你自己的用法，相比较。

母/子关系

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 母子关系中讨论了，列表是最大的问题之一。子列表内容的样式受到"母"列表影响。如果母列表样式的颜色是"红色的"，但是你希望子列表是"蓝色的"，那么你需要在子列表样式中将颜色规定为"蓝色的"，这样子列表样式就能够不顾母列表样式。

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工具条中的嵌套列表通过包含有链接。因此，虽然你可以尽可能地设计列表，链接的样式会超过样式表的样式。通过规定链接一个特定的样式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 {属性}

资源

• 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
• W3.org's CSS-2 - Generated Content, Automatic Numbering, and Lists
• 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
• Simplebits' Style Nested Lists

• 创建横向菜单
• 突出动态菜单
• 自定义你的工具条
• 站点结构1.5
• 进入模板标签
• Taming 列表
• Listamatic
• CSS 文本格式
• W3.org's CSS-2 – 产生内容,自动编号, 和列表
• 针对初学者的层叠式样式表交互学习指南:列表
• Max Design的定义表- 误用或者误解?
• CSS Unleashed – 体验列表，菜单，表格内容，以及更多的
• Simplebits的样式嵌套列表