Some good CSS skills are often ignored.

I. Case Sensitive
When CSS is used in XHTML, the element names defined in CSS are case sensitive. To avoid this error, we recommend that all definition names be in lower case.

2. No quotation marks are required for the background image path.
To reduce the number of bytes, we recommend that you do not quote the path of the background image because the quotation marks are not required. For example:

Background: URL ("images/***. GIF") #333;

Can be written

Background: URL (images/***. GIF) #333;

If you add quotation marks, some browser errors may occur.

3. Specify the link style in the correct order
When you use CSS to define multiple state styles of links, pay attention to the order in which they are written. The correct order is: Link: visited: hover: active. The first letter is "lvha". You can remember it as "love hate" (dislike ).

4. Clear floating
A very common CSS problem is that when floating is used, the lower layer is overwritten by the floating layer, or the nested child layer in the layer is out of the outer range.

The general solution is to add an additional element after the floating layer, such as a div or a Br, and define its style as clear: Both. This method is far-fetched. Fortunately, there is another good solution. Please refer to this article.ArticleHow to clear floats without structural markup (Note: This article will be translated as soon as possible ).

The above two methods can solve the problem of floating exceeding, but what if you really need to clear the objects in the layer or layer? A simple method is to use the overflow attribute. This method was originally published in simple clearing of floats and has been widely discussed in clearance and super simple clearing floats.

The above clear method is more suitable for you. It depends on the specific situation and will not be discussed here. In addition, some excellent articles on Float applications have been clearly stated. We recommend that you read: floatutorial, containing floats, and float layouts.

5. Center horizontally (centering)
This is a simple technique, but it is worth repeating it again, because I have seen many new users asking this question: how to center CSS horizontally? You need to define the element width and the horizontal margin. If your layout is contained in a layer (container), it is like this:
Body {
Text-align: center;
}
# Wrap {
Width: 760px;/* change the width of your Layer */
Margin: 0 auto;
Text-align: left;
}

6. debugging skills: How big is the layer?
When a CSS debugging error occurs, you need to analyze CSS lines by line like a typographical engineer.Code. I usually define a background color on the problematic layer, so that it is obvious that the layer occupies a lot of space. Some people suggest using border, which is acceptable in general, but the problem is that sometimes border will increase the element size. Border-top and boeder-bottom will destroy the vertical margin value, therefore, it is safer to use background.