Some very good CSS skills, but also often for people to ignore _ experience Exchange

I. Case-sensitive
When using CSS,CSS in XHTML, the element names defined are case-sensitive. To avoid this error, I recommend that all definition names be lowercase.

Two. No need to add quotation marks to the background image path
In order to save bytes, I recommend not quoting the background image path because the quotation marks are not required. For example:

Background:url ("Images/***.gif") #333;

can be written as

Background:url (images/***.gif) #333;

If you add quotation marks, it will cause some browser errors.


Three. Specify the style of the link in the correct order
When you use CSS to define multiple state styles for a link, be aware of the order in which they are written, in the correct order: link:visited:hover:active. Extracting the first letter is "LVHA" and you can remember it as "Love HAte" (like annoying).


Four. Clear floating
A very common CSS problem, when positioning the use of floating, the following layer is covered by a floating layer, or the layer of nested sub-layers outside the outer range.

The usual solution is to add an extra element behind the floating layer, such as a div or a BR, and define its style as Clear:both. This method is a bit far-fetched, fortunately there is a good way to solve, see this article "How to Clear floats without Structural Markup" (Note: This site will be translated as soon as possible).

The above 2 methods can solve the problem of floating exceeding, but what if you really need to clear the layer or the object in the layer? A simple method is to use the overflow attribute, originally published in "Simple clearing of floats", but also in the "clearance" and "Super simple clearing floats" is widely discussed.

The above clear method is more suitable for you, to see the specific situation, here no longer discuss. In addition to the application of Float, some excellent articles have been very clear, recommended you read: "Floatutorial", "containing floats" and "Float Layouts"


Five. Centering horizontally (centering)
It's a simple trick, but it's worth repeating, because I see too many novice questions asking: How does CSS work horizontally? You need to define the width of the element, and define the horizontal margin, if your layout is contained in a layer (container), like this:
Body {
Text-align:center;
}
#wrap {
width:760px; /* Modify the width of your layer */
margin:0 Auto;
Text-align:left;
}


Six. Debugging tips: How big is the layer?
When debugging a CSS error, you'll want to parse the CSS code step by step like a typeset worker. I usually define a background color on the problematic layer so that you can see clearly how much space the layer occupies. Some people suggest using border, the general situation is also possible, but the problem is that sometimes border will increase the size of elements, Border-top and Boeder-bottom will destroy the value of vertical margin, so use background more secure.

