编辑“查找CSS样式”

<span style="border:1px solid #000; text-align:center; float:right; padding:6px;"><strong>导航:</strong> [[WordPress设计方面的疑难解答|上一页]] | {{Template:WordPress导航}}</span>
<div style="clear:both;"></div>
本文内容不是关于如何选择[http://www.wordpress.la/codex-%E4%BD%BF%E7%94%A8WordPress%E4%B8%BB%E9%A2%98.html WordPress主题]，而是如何在当前主题中查找[[CSS]]样式。页面样式或模板的某个部分通常会出现一些这样或那样的问题。例如，侧边栏菜单和页面其它部分之间有一个边框，我们想删除这个边框，于是到处查找边框的CSS引用却怎么也找不着，怎么办？

==CSS侦探==
首先，我们来做个侦探游戏——CSS侦探游戏。我们知道问题由什么引发，却找不到源头的具体位置。在上面的例子中就是要找到那个偏移了的边框。

仔细检查某个已生成页面（或测试页面），在侧边栏偏移的边框周围查找可识别的文本。假设在侧边栏的列表中有一个叫做“All About   Harry”的日志标题。于是我们查看页面源代码时，就可以在侧边栏中查找这个标题。

在浏览器的菜单栏中点击“<STRONG>查看</STRONG>”菜单，在下拉式菜单中选择“<STRONG>页面源代码</STRONG>”或“<STRONG>源代码</STRONG>”，之后会弹出当前页面的源代码页面。

利用查找工具Ctrl+F开始我们的搜索工作。输入“all about harry”，点击查找。除非日志中有“all about   harry”，否则查找工具会把我们直接带到“all about   harry”第一次出现的位置，很可能就是侧边栏。如果不在侧边栏中，点击“下一个”，直到在侧边栏中找到“all about harry”。

使用IE浏览器的用户可以利用<STRONG>IE开发辅助工具</STRONG>帮助自己搜索页面上各种设计元素、ID、类。IE开发辅助工具在页面层级内显示各个元素、元素的CSS属性，还可以标出DIV标签、表格等。从[http://www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038&DisplayLang=en Microsoft] 网站上可以下载到这个开发辅助工具。

找到需要的内容（all about harry）后，侦探工作就正式开始了。首先在整页源代码“All About   Harry”周围查找以下内容，其中<STRONG>sidebar</STRONG>也可能是<STRONG>menu</STRONG>或<STRONG>sidecolumn</STRONG>：

<PRE>&lt;div id="sidebar"&gt;<BR><BR>或<BR><BR>&lt;div class="sidebar"&gt;</PRE>
这就是侧边栏菜单的主体部分，第一个“嫌疑人”。

接着打开style.css文件，查找<STRONG>sidebar</STRONG>或上一步中发现的其它名称。最终sidebar形式有两种：

<PRE>#sidebar<BR><BR>或<BR><BR>.sidebar</PRE>

在CSS选择符下查找侧边栏样式，看其中有否提到边框。侧边栏样式通常是下面这种形式：

<PRE>#sidebar {position: relative; float: right; width: 170px;<BR>    color: blue; font-size: 90%; border-right: solid 1px blue; }</PRE>
找到作案者——边框（border）了！如果这是罪魁祸首，删除这个引用，任务就完成了。

如果还没有找到罪魁祸首，继续搜索。

有时罪魁祸首是最容易被忽略的。导致边框错误的不一定是嫌疑人侧边栏（sidebar），也可能是正文（content）部分。返回页面源代码，查找日志的开始部分的单词。在开始部分前查找： 
<PRE>&lt;div id="content"&gt;</PRE>

其中<STRONG>content</STRONG>也可能是<STRONG>page</STRONG>、<STRONG>post</STRONG>、<STRONG>maincolumn</STRONG>、<STRONG>widecolumn</STRONG>，或者其它别名，总之是装有日志内容的CSS<EM>容器</EM>。现在返回样式表，检查content中是否有边框。

==搜查样式表==
如果还没有找出真正的“犯罪者”，侦探活动就不能停止。返回所有样式的藏身地——style.css文件，彻底搜查“border”，仔细寻找任何一个“嫌疑人”。记下选择符的ID名称，如<STRONG>sidebar</STRONG>, <STRONG>menu</STRONG>, <STRONG>content</STRONG>和<STRONG>page</STRONG>，返回页面源代码，判断“嫌疑人”是否就是真正的犯案人。

也可以选中样式表style.css中找到的“嫌疑人”，将之剪切并复制到电脑上类似记事本的TXT文件（如<STRONG>Notepad记事本</STRONG>）中。按以下格式标注被删除的选择符名称：

<PRE>Removed border: solid 2px green from #content  </PRE>

保存经过编辑的style.css文件，将文件上传到网站。刷新测试日志，看看希望删除的边框是不是已经消失不见。如果边框不见了，说明“罪魁祸首”已经就范。边框还在的话，返回<STRONG>记事本</STRONG>，复制其中的代码并粘贴回style.css文件的“content”部分，将一切恢复原状。

==更多CSS帮助==
*[http://www.wordpress.la/codex-CSS%E4%B9%8B%E4%BF%AE%E5%A4%8D%E6%B5%8F%E8%A7%88%E5%99%A8%E6%BC%8F%E6%B4%9E.html CSS之修复浏览器漏洞]
*[http://www.wordpress.la/codex-CSS%E7%96%91%E9%9A%BE%E8%A7%A3%E7%AD%94.html CSS之疑难解答]
==相关条目==
*[[Drupal]] 
*[[OBLOG]] 
*[[X-Space]] 
*[[SaBlog-X]] 
*[[Bo-Blog]]

[[category:WordPress中文文档|C]]
[[category:WordPress网站开发|C]]
[[category:WordPress开发文档|C]]