编辑“WordPress:Finding Your CSS Styles”

The following isn't about choosing a [[WordPress:Using Themes|WordPress Theme]], but finding the CSS styles within your current Theme.  Often a problem occurs in one part of the layout or [[WordPress:Templates|template]]. For instance, there is a border you don't want between the sidebar menu and the rest of the page.  You hunt and hunt but you can't find any reference to the border.  Now what?

以下不是关于选择一个[[WordPress:Using Themes|WordPress 主题]]，而是关于找到你现用主题中的CSS样式的。通常一个问题发生在设计或者[[WordPress:Templates|模板]]中的某个部分。举个例子，在你的边栏和页面其他部分之间的，有个相接的边，你不想要这个边，但是你无论如何都找不到相关的内容，该怎么办呢？

==Playing CSS Detective==

Let's begin by playing CSS detective.  You know where the problem is, you just can't ''find'' the problem.  In the above example, you need to hunt for an errant border.

==启动 CSS 检测==

让我们从启动 CSS 检测开始。你知道了问题在哪，你只是不能''找出''问题，在上面的例子中，你需要找的是不定边线。

Begin by carefully examining a generated page (or test page) and look for some identifying text in the sidebar, near the errant border.  Let's say that listed in the sidebar, you have a post title called "All About Harry".  You know you'll find that title in your sidebar when you view the page's source code.

从仔细检查生成的页面(或者是测试页面)开始，在边栏中不定边线旁边寻找一些识别文本。比方说在边栏的列表中有一个文章名为"All About Harry"，你在查看页面源代码时就知道在边栏中也同样会看到它。

To view a page's source code, go up to the '''menu bar''' of your browser and choose '''VIEW > PAGE SOURCE or VIEW > SOURCE'''.  A page will pop up featuring the source code of the page.

想查看源代码，找到浏览器上部的'''menu bar'''，选择'''VIEW > PAGE SOURCE or VIEW > SOURCE'''。源代码页面就会显示出来了。

Use your handy detective tool, '''Ctrl+F''', to activate your search.  Type in "all about harry" and click '''FIND'''.  Odds are, unless you have the words "all about harry" in your post, it will take you to the first showing of the phrase "all about harry" which is probably in your sidebar.  If not, hit FIND again until you've found the right phrase in the right area.

使用手边的检测工具，'''Ctrl+F''',来激活你的搜索，输入"all about harry"然后单击'''FIND'''.除非"all about harry"这句话在你的帖子内，否则它会显示出第一个出现"all about harry"的地方，很可能是你的边栏。如果没有，请再次点击FIND直到你在正确的地方找到合适的词。

If you are using Internet Explorer, an alternate method is to use the Internet Explorer Developer Toolbar, which allows you to visually see and select the elements, IDs, and classes on the page. It displays the elements within the hierarchy of the page, their CSS attributes, and can outline DIVs, tables, etc. You can download the Toolbar from [http://www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038&DisplayLang=en Microsoft].

如果你正在使用Internet Explorer，另一种方法就是使用Internet Explorer扩展工具条，你可以在页面上看见并且可以选择元素，ID，类别。它分层显示出页面的元素，它们的CSS属性，和DIVs, tables, 等等的轮廓。你可以从[http://www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038&DisplayLang=en Microsoft]下载这个工具条。

Once you've found the phrase, it's time to play CSS detective.  Look up through the code from the phrase "All About Harry" for one of two things.  It will look something like either of these, using words like '''sidebar''', '''menu''', or '''sidecolumn''':

<pre><div id="sidebar">

or

<div class="sidebar"></pre>

This is the main section that contains your sidebar menu.  You've found the first suspect.

你一旦找到这个词语之后，就是启动CSS检测的时候了。查找从"All About Harry"开始的代码，它会检查一些类似的词，使用如'''sidebar''', '''menu''', 或者'''sidecolumn'''这些词语:

<pre><div id="sidebar">

或

<div class="sidebar"></pre>

Now, open your <tt>style.css</tt> file and do another search for '''sidebar''' or whatever the resulting name was that you uncovered.  It is usually identified in two ways:

<pre>#sidebar

or

.sidebar</pre>

现在，打开你的<tt>style.css</tt>文件，然后再做一次对'''sidebar'''的搜索，或者别的什么你没有涵盖的词语，通常有两种结果：

<pre>#sidebar

或

.sidebar</pre>

Look in the styles under these CSS '''selectors''' and see if there is a mention of border, often looking something like this:

<pre>#sidebar {position: relative; float: right; width: 170px;
    color: blue; font-size: 90%; border-right: solid 1px blue; }</pre>

查看CSS'''selectors'''中的样式，看是否有提到边线，通常会看到这样的结果：

<pre>#sidebar {position: relative; float: right; width: 170px;
    color: blue; font-size: 90%; border-right: solid 1px blue; }</pre>

There is your border, the criminal!  If this is the guilty party, delete the reference to the border and you are good to go.

那就是你的边线，问题的根源。如果这就是问题的来源，那么把这段有关边线的代码删除，一切就正常了。

If it isn't, the hunt continues.

如果不是，搜索继续。

Sometimes the culprit is the one you least suspect.  Maybe the border is not caused by the obvious suspect, the ''sidebar'', but by the '''content''' section.  Return to the generated page source code and search for the first words of your post.  Look above that for something like:

<pre><div id="content"></pre>

有时问题就出在你最最忽略的地方。可能边线不是由某些明显的东西''sidebar''造成的，而是由于'''content'''这部分造成的。回到生成页面的代码，找到你的文章的第一句话，然后向上查看如下内容：

<pre><div id="content"></pre>

It could be called '''content''', '''page'''. '''post''', '''maincolumn''', '''widecolumn''', or have another alias, but it should be the CSS ''container'' that holds your post information.  Now, go back to the style sheet and check to see if there is a border in that section.

可能会被叫做'''content''', '''page'''. '''post''', '''maincolumn''', '''widecolumn'''或者别的名字，但是都应该是CSS ''容器''掌握着你的文章的信息。现在回到样式表，查看在那部分里是否有边线。

==Frisk the Style Sheet==
If all of these fail, the CSS detective never gives up the hunt.  Return to the hiding place of all styles, the <tt>style.css</tt> file, and ''frisk it'' by doing a search for "border" and look carefully at each suspect.  Note the selector ID name, like '''sidebar''', '''menu''', '''content''' and '''page''', and then go back to the generated page source to see if that might be your culprit.

==搜索样式表==

如果上述方法都失败了，CSS检测不会结束。返回到所有的样式隐藏的地方，the <tt>style.css</tt>文件，然后通过一个关键词为"border"的查找，''搜索它''，仔细看每个另人怀疑的地方，标记搜索器的ID，如'''sidebar''', '''menu''', '''content''' and '''page'''，然后回到生成页面的源代码查看是否找到问题所在。

You can also select the border suspect you've found on the style sheet and '''cut and paste''' it into a TXT file (like Notepad) that just sits open on your computer like a scratch notepad.  Make a note of which selector name you removed it from like this:

 Removed border: solid 2px green from #content

你也可以选择你在样式表中所找到的可能是问题所在的边线相关内容，'''复制粘贴'''到一个如同草稿本一样打开的TXT文件中(如记事本)，把搜索器中你删除的的名字做个记录，如

Removed border: solid 2px green from #content


Then save the edited <tt>style.css</tt> and upload it to your site. [[WordPress:I_Make_Changes_and_Nothing_Happens|Refresh]] the generated test post and see if the unwanted border is gone.  If so, you found the culprit.  If not, return to the Notepad and copy the code and put it back into your <tt>style.css</tt> in the "content" section, putting things back where you found it.

然后保存编辑过的<tt>style.css</tt>文件，上传到你的站点，[[WordPress:I_Make_Changes_and_Nothing_Happens|刷新]]生声的测试页面然后看是否你不希望出现的边线消失了。如果消失了，那么你找到了问题所在，如果没有，返回记事本，把代码复制回<tt>style.css</tt>文件的"内容"部分，把你找到的东西放回原位。

If you do find your culprit, do a little dance, squeal and cheer, and make others suspicious and nervous when they are around you.  The CSS detective solves another CSS crime!
如果找到了问题所在，跳个舞，尖叫一声，干个杯，再去处理别的问题。CSS检测又解决了一个问题！

==More CSS Troubleshooting Help==
* [[WordPress:CSS Fixing Browser Bugs|修复浏览器错误]]
* [[WordPress:CSS Troubleshooting|CSS问题发现并处理]]