zh-cn:CSS Troubleshooting

  • A+
所属分类:wrodprss
广告也精彩

随着在WordPress v1.5中,引入了新的 Themes,使得烦人且反复修改的网站布局问题进入历史啦。轻轻松松的鼠标点一点,你可以所见即所得的修改你的网站布局。欢迎来到崭新的web设计世界。

当人们遭遇到棘手的web布局问题,大部分人们会去WordPress Forums搜索、咨询以获得解决办法。论坛中热心的志愿者总能给予你实用的反馈信息,如下有一些办法,在你移步论坛前有必要遵循的步骤,至少你可要把你遇到的问题描述的更加清楚。CSS标准参考手册 CSS Coding Standards, 这属于Core Contributor Handbook集合的一小部分。

备份文件

在开始这些解决问题的技巧和技术之前,请确保并备份您的数据,以防万一。另外,当你尝试不同的东西时,备份你正在处理的文件,这样你就有一些地方可以回去。

调试模式下实时编辑CSS布局

如果你有办法的话,使用JesseRuderman的编辑风格书签或者火狐的编辑CSS扩展来“即时”进行CSS测试和故障排除会更快更安全。完成更改后,将新(编辑过的)代码复制到相应的WordPress主题文件中(备份后)。

Firefox的Web开发人员扩展也有帮助。

CSS预备知识

如果你对CSS和网页设计还不熟悉,可以从访问WordPress的CSS技巧、技术和资源开始,找到关于CSS基础知识的信息,并回答一些问题。至少,你会大致了解CSS是什么,它对HTML或网页结构的影响,并学习一些行话来帮助你在论坛上提出一个更明智的问题。

你还需要知道一些基本的术语来帮助你向别人表达你的问题。这不是一个如何CSS指南,而是一个“什么是thingamahjig所谓的”指南。

CSS(层叠样式表)是一些影响页面HTML代码的表示或外观的代码。在WordPress中,CSS样式通常位于您正在使用的特定主题文件夹中名为style.css的文件中。保存页面结构的HTML代码和CSS引用通常位于主题文件夹的index.php文件中。

PHP文件位于主题文件夹中,包含生成HTML页面的代码和引用。在最后一次运行中,您可以在这里更改特定的CSS选择器标记,而不是HTML页面。有关修改这些内容的帮助,请使用主题查看更多信息。

CSS 选择器 ,分3类CSS选择器:'ID', 'CLASS', and HTML标签.

'ID'选择器

ID选择器,在CSS中以#开头:ID是对网页上特定唯一区域的引用。它通常在HTML网页上表示为一个封闭的DIV(DIVISION)块:

<div id="header">Title of the Page</div>
在样式表(CSS)中,ID选择器被引用为头,可能如下所示:
#header { position: relative; margin:0; padding:0;
	height:100px; width: 100%; background: red;
	color: white;}

'CLASS'选择器

CLASS选择器,以.开头:类是对页上任何元素的引用,使用该引用时,这些元素需要以特定的方式进行查看。例如,如果您经常希望突出显示文本中的一个或两个单词(在本例中,我们将使用红色作为突出显示颜色),您的样式表中可能会有这样的类选择器:

.hilite { color: red}
HTML中的引用可能如下所示:
...this is some text about something
I want <span class="hilite">in red</span>. And 
some more rambling here...
如您所见,样式表中ID和类选择器的区别在于ID使用磅符号(名称),类使用句点(.name)。ID引用在页面上必须是唯一的,并且只能使用一次。类引用可以在同一页中重复使用。

HTML标签选择器

如果要“设计”特定的HTML标记引用(如blockquote),网页中的代码可能如下所示:

<blockquote>This is a pithy and brilliant quote 
that I knew you would enjoy.</blockquote>
在样式表中,对blockquote的引用没有句点或句点,只是简单地列出HTML,然后列出设计元素。此示例在两边缩进引号,并在引号的左侧放置一条蓝线,使文本倾斜。
blockquote { position: relative; margin: 10px 50px 10px 50px;
	padding:5px;  font-style:italic; 
	border-left:solid blue 4px; }

您可以将任何设计元素应用于任何特定的HTML标记,如body、p、h1、h2、h3、ul、li等。

有关修改ID、类和HTML的信息,请查看WordPress的CSS提示、技术和资源中的资源。

重要提示!某些主题的CSS样式不止一次出现,Kubrick主题就是其中之一。如果在CSS文件中更改了CSS属性后,您没有看到所需的结果,则您的主题选择可能在其中一个PHP文件(通常是头文件)中嵌入了一些CSS,并且嵌入的CSS样式将覆盖链接或导入的CSS样式表。

检查HTML和CSS源码

为了确定网页布局是正确还是错误,您必须转到源代码。这意味着要看引擎盖下面。

在你网页的漂亮引擎盖下,你在网络浏览器上看到的漂亮的布局,是一大堆带有奇怪和异国情调的引用的代码。乍一看,它就像是在赛车的引擎盖下。你知道所有的垃圾都能让车开起来,但是引擎盖下的那些乱七八糟的东西到底是什么?

查看HTML

要提升页面上的引擎盖,请确保从Web浏览器查看页面,并从Web浏览器的顶部菜单中单击“查看>源”或“页面源”。另一个页面将弹出在另一个浏览器窗口内或与您的操作系统(称为记事本)一起提供的程序内,或其中的一些变体。这是您的HTML页面,它构成了您的页面。

查看CSS

要查看您的CSS,请知道实际地址(或已将其放在硬盘上),或者向下滚动到HTML页以获取以下引用:

link rel="style sheet" type="text/css" href="wordpress/wp-content/themes/default/style.css">
这是加载在附加的CSS样式表中的链接。要查看CSS,请双击文件名或在Web浏览器中键入文件的特定链接,例如:
http://www.yoursite.com/wordpress/wp-content/themes/default/style.css

在WordPress中,PHP用于实际生成HTML页面。这通常是复杂和混乱的代码。要查看HTML,请查看生成的页面,例如示例文章。要更改HTML结构和CSS引用,需要修改相应的PHP文件。关于使用主题的codex页面提供了有关如何查看主题模板以及找出与页面上的哪个部分相关联的模板的详细信息。

本文中的问题解决技术描述了如何更改CSS以影响页面布局。要对主题进行实际更改,请查看主题开发。

在引擎盖下寻找CSS

一旦你打开引擎盖看到HTML和CSS,是时候开始扮演夏洛克福尔摩斯了。首先,你必须知道你在看什么,在哪里找到帮助你找到罪犯的基本要素。

HTML页面具有所有的结构代码,这些代码设置了页面所在的“网格”。把它想象成一张满是笔记的地图。注释实际上是指向在CSS文件中找到的方向的指针。

向下滚动浏览大量<link rel='archives'…直到您看到<body>为止的信息。下面是网页的布局“正文”。从这里开始,每一点信息对于页面的结构和设计都是至关重要的。

当您滚动浏览它时,寻找标识ID和类语句。例如,您可以看到以下内容:

div id="page">
	<div id="header">
	<h1>My WordPress Site</h1>
		<div id="headerimg">
		</div>
			<div class="description">by Me and Only Me</div>
		</div>
	<div id="content" class="widecolumn">
  		<div class="post">

这看起来可能令人困惑,但它基本上是在用您的内容设置部分。

它以名为“page”的部分开始,该部分设置了整个页面的外观。如果您在CSS文件中查找页面选择器,您将看到与其关联的表示样式。后面是标题部分,其中包括标题(h1)和站点标题。这个特殊的布局是基于WordPressv1.5的默认主题kubrick,它在标题中包含一个由“headerimg”部分设置的图像。之后是一个带有类引用“description”的分区,该类引用是站点的副标题或描述所在的位置。同样,在你的CSS中寻找.description来找出这个区域的样式。

接下来的两个标记将关闭标题(<div>),然后开始“content”的分区ID,它还具有一个名为“wideColumn”的类,后面是另一个名为“post”的类。“Content”和“WideColumn”布局了存放“Post”的容器的整体外观。

这是父/子关系的一个示例。正如您将在下一节中看到的,这是CSS布局问题开始的主要地方之一!

CSS父子关系

在设计网页时,最大的问题之一是理解问题发生在哪里,以及其影响可能会影响到问题。这被称为CSS的“父/子关系”。正如你所知道的,虽然父母通常把孩子最好的意图放在心上,但孩子们经常感到被父母恐吓和搞砸了,所以理解这种关系可能会帮助你解决问题。

一个WordPress用户在论坛上发布了一个问题,她抱怨说她希望页面的标题能够完全覆盖页面宽度,内容集中在页面上,左右两侧都有很大的空间。她一直在用头上的边沿胡乱翻来翻去,但都没有用,于是她转向我们寻求帮助。

<div id="page">
	<div id="header">Header Title</div>
 <div id="content">
  		<div class="post">Post babble here...</div>
在本例中,页边距的css属性为:
#page { margin-top:5px; margin-right: 100px;
	margin-bottom: 5px; margin-left:100px; }
#header { margin-top:5px; margin-right: 5px; 
	margin-bottom: 5px; margin-left:5px;}
#content { margin-top:5px; margin-right: 20px;
	margin-bottom: 5px; margin-left:20px; }
.post { margin-top:5px; margin-right: 5px; 
	margin-bottom: 5px; margin-left:5px; }

在玩侦探游戏时,我们发现更改页眉的页边距是不起作用的,因为它们会受到要开始的页边距的影响。这就是父/子关系出现的地方。父页面告诉子标题要做什么,它想做其他事情。

如果我们更改了页面的左右页边距,就消除了页眉的页边距问题。但我们又制造了另一个问题。父页面继续其影响,现在所有内容都分布在整个页面宽度上。还需要对内容的左右页边距进行更改,以使宽页边距恢复原位。为了让全家幸福,新的利润率如下:

#page { margin-top:5px; margin-right: 5px; 
	margin-bottom: 5px; margin-left:5px; }
#header { margin-top:5px; margin-right: 5px; 
	margin-bottom: 5px; margin-left:5px;}
#content { margin-top:5px; margin-right: 100px; 
	margin-bottom: 5px; margin-left:100px; }
.post { margin-top:5px; margin-right: 5px; 
	margin-bottom: 5px; margin-left:5px; }

隔离你的CSS挑战

确定对网页布局的父/子关系影响有助于解决许多问题,但有时关系非常复杂,很难确定哪个部分是哪个部分,以及谁对哪个部分有影响。

为了隔离和识别不同的CSS部分、分区和类,这里有一些简单的技巧。在开始之前,一定要备份所有的主文件,包括CSS,以确保在失去控制的情况下可以从中恢复。

一旦你确定了罪魁祸首并解决了它,确保你删除了这些测试功能,这样你的网页会再次看起来“正常”。

将您的分区装箱

一旦确定了HTML页面中的各个部分或分区,请进入CSS文件,并将以下属性添加到各个分区中:

border:solid 1px color

在单词color所在的位置,为每个部分放置一个不同的颜色名称。

例如:

#page { margin:5px; padding:0; border: solid 1px red; }
#header { margin: 10px; padding: 5px; border: solid 1px blue; }
#content { margin:5px 100px 5px100px; padding:10px;
	border: solid 1px green; }
.post { margin:5px; padding:10px; border: solid 1px yellow; }
保存CSS文件并在Web浏览器中查看您的页面(单击刷新或F5)。现在,您应该在每个不同部分周围看到一个不同颜色的框:

Save the CSS file and view your page (click REFRESH or F5) in the web browser. You should now see a different colored box around each of the different sections:

This is a section of rambling text that goes on and on.This is another section that has been highlighted in a red box.

This is the rest of the text back to normal.

If you don't see a colored box around your content, check again that the selector you changed is actually the correct spelling and identified in the HTML.

If the problem you are having is in the blue box, then you know where to start solving your problems. Be sure and remove the test attributes when you're done.

There are browser extensions and add-ons that offer this technique, too.

Highlight Sections

Besides putting boxes around the different sections to isolate the problem CSS or HTML, you can dramatically change the colors of the content to make the problem "jump" right out at you. By changing the text color or background color of a section, you will spot it immediately when you view the screen. Note: Be sure and make note of the original colors if you change them during testing so you can go back to them. And make frequent backups!

In the CSS file, you can change a section's font color by adding color:red or any other color to the selector's attributes such as:

H1 { font-style:bold; font-size: 125%; color: red; }

The H1 heading should jump out at you in bright red and would look like this:

To change the background color of a section, you can add background:pink to make the entire background pink.

#header { margin:5px; padding: 10px; background:pink; }

The result might look like this:

This is some text that goes on babbling here and there.This is some text with the background color changed so you can see it.

This is the rest of the text back to normal.

The entire header division will now feature a pink background. When you've identified the culprit, and made the fixes, be sure and remove any testing attributes to restore the look of your web page.

Validate Your Source Code

Sometimes the smallest detail can send your page out of whack. A mispelled tag (rhef instead of href), a forgotten closing tag, a missing attribute, or even the wrong attribute can send your page into a design tail spin.

Free online validators which check your HTML, XML, and CSS code may help isolate the little detail you are missing. As you scan through the code, it's easy to skip over a little stumble. Most online validators let you either type in the URI (link) to your site to initate the validation process, or may even allow you to paste in code or upload a file to have it inspected. WordPress, by default, validates its default coding, but if you are making modifications, the slightest slip can screw things up.

Different validators check for different problems, so if you can't find your solution with one validator, try another. Many validators will even recommend making some changes, but find your problem before you start creating new ones.

To help you understand more about validation and to find online validators, we've provided a list of validation resources in a Codex article called Validating a Website.

Slash and Burn - The Last Resort

Not for the timid

NOTE: There are two Slash and Burn techniques. If you are weak of heart, check out the second one.

If you can't seem to narrow down the problem, there is a technique, sometimes called "Slash and Burn", that will help you narrow down the culprit. It requires no interuptions, concentration and thorough backups to ensure you don't destroy even the screwed up remains of your web page design. We also recommend you have familiarity with HTML and CSS.

1. Make backups of all of your files.

2. Open a post in the web browser and VIEW > SOURCE.

3. Save this source file as a text document called "junk.html" to an empty test folder on your hard drive. DO NOT CLOSE THIS FILE. It will remain open during this entire process.

4. Copy your CSS file to the same test folder.

5. If you are having problems with the graphics, copy the graphics folder or the graphics to the test folder.

6. In the junk.html source file, change the style sheet reference from something like

<link rel="style sheet" type="text/css" href="wordpress/wp-content/themes/default/style.css">

to this:

<link rel="style sheet" type="text/css" href="style.css">
Save the junk.html text file (DO NOT CLOSE IT).

7. In the test folder, double click on junk.html to view the file in your browser. You should see the general layout of the page with the graphics, if appropriate. If not, double check the link reference to the style sheet.

8. In your junk.html text file, move to the point where the trouble begins. Move to the section above (a section which includes opening and closing tags such as:
<p>babble...</p>
or
<div class="post">babble...</div>
and highlight the entire section from the opening tag to the closing tag and CUT the section (Cntrl+X).

9. Save the file.

10. REFRESH the web page in the web browser (F5 or click REFRESH - if you have problems and don't see a change, hold the SHIFT key then press F5 or (in FireFox) simultaneously hold down Cntrl+Shift+R).

11. You should see the removed section missing. Check below to see if this fixed the problem or if it went away. If yes, this section is your problem. If not, go to the next step.

12. If the problem is still there, move back to the junk.html file and put the cursor in the place where you deleted the section, if the cursor has moved. PASTE the cut section back in (Cntrl+V). Move to another section above or below this point and repeat steps 8 through 12.

At some point in this process, you will see the problem either fix itself or disappear. Begin with large sections and when you find the large section problem area, break it up into smaller pieces. Eventually, you will isolate the area that is causing you grief. Note the CSS references to identify the troublesome section and start making changes to the CSS file to fix it.

Gentle Slash and Burn

To use the gentle version of slash and burn, instead of deleting the sections as shown above, cut and paste them into Notepad or another text editor so they are protected in case you get distracted from the cut and paste process. ALWAYS back everything up as you go along, just in case (which happens a lot more than you might think!).

Common Errors

We all make mistakes. The word "typo" wasn't invented without reason. Here are some of the most common problems that creep up with CSS.

Missed Spellings
Just so you know, leftt is not the same as left and this could be the reason something is on the right instead of the left side of your page. Putting a 30ps for a margin won't get much of a result, but 30px will. Missed spelling errors are common and easy to overlook. Luckily, CSS validators can often catch these tiny mistakes for us.
Forgotten Details
As creative as you can be with CSS, there are some ground rules you have to follow. Every selector must be identified as an ID or CLASS unless it is a HTML TAG. It must be laid out as selector { property: value; property: value; } and the braces, colon and semi-colon must be there. Miss one of these little details and nothing will happen, or strange things might. CSS validators will usually catch these little forgotten details for you.
Wrong Selector
Putting all your wonderful designs in #content when they were supposed to be in #context-text doesn't help your layout. Luckily, you can usually see these immediately upon viewing the page, so just cut and paste them in the right tag...and then remember what you deleted from #content. Of course, you can refer to your frequently backed-up file to get the lost code. Hint-Hint!
Wrong Template Module
As useful as WordPress' new modular templates are, many a time a user has made a modification in comments.php instead of comments-popup.php or other similarly named files by mistake. Double check which modular section you are supposed to be working on all the time. And if you mess one up by accident, there is always that faithful backup file to make things new again.
Multiple Choice
CSS can't read your mind. If there are two references to the same selector with conflicting information, it has to decide which one it will use. This is very common if you are bringing your original style sheet in on top of a new one. If you are fighting with a selector for, say, the h1 heading, and nothing is changing, search through the style sheet to see if there is another reference to that selector.

									 
							
  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin
广告也精彩

发表评论

您必须登录才能发表评论!