查找CSS样式

0条评论

本文内容不是关于如何选择WordPress主题,而是如何在当前主题中查找CSS样式。页面样式或模板的某个部分通常会出现一些这样或那样的问题。例如,侧边栏菜单和页面其它部分之间有一个边框,我们想删除这个边框,于是到处查找边框的CSS引用却怎么也找不着,怎么办?

CSS侦探

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

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

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

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

使用IE浏览器的用户可以利用IE开发辅助工具帮助自己搜索页面上各种设计元素、ID、类。IE开发辅助工具在页面层级内显示各个元素、元素的CSS属性,还可以标出DIV标签、表格等。从Microsoft 网站上可以下载到这个开发辅助工具。

找到需要的内容(all about harry)后,侦探工作就正式开始了。首先在整页源代码“All About Harry”周围查找以下内容,其中sidebar也可能是menusidecolumn

<div id="sidebar">

或

<div class="sidebar">

这就是侧边栏菜单的主体部分,第一个“嫌疑人”。

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

#sidebar

或

.sidebar

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

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

找到作案者——边框(border)了!如果这是罪魁祸首,删除这个引用,任务就完成了。

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

有时罪魁祸首是最容易被忽略的。导致边框错误的不一定是嫌疑人侧边栏(sidebar),也可能是正文(content)部分。返回页面源代码,查找日志的开始部分的单词。在开始部分前查找:

<div id="content">

其中content也可能是pagepostmaincolumnwidecolumn,或者其它别名,总之是装有日志内容的CSS容器。现在返回样式表,检查content中是否有边框。

搜查样式表

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

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

Removed border: solid 2px green from #content  

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

更多CSS帮助