Some very good CSS skills, but also often ignored by people _ Experience Exchange

I. Case sensitivity
The element names defined in CSS,CSS are case-sensitive when used in XHTML. To avoid this error, I recommend that all defined names be lowercase.

Two. Do not need to quote the background picture path
To save bytes, I recommend that you do not enclose the background picture path with quotes, 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 quotes, it can 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. The first letter is "LVHA", which you can remember as "Love hate" (like hate).


Four. Clear floating
A very common CSS problem, when positioning using a float, the layer below is covered by the floating layer, or the layer nesting of the child layer beyond 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 little far-fetched, fortunately there is still a good way to solve, see this article "How to clear floats without structural Markup" (Note: This site will soon translate this article).

The above 2 methods can solve the problem of floating out well, but what if you really need to clear the objects in the layers or layers? An easy way is to use the overflow attribute, which was originally published in Simple clearing of floats, and was widely discussed in clearance and Super simple clearing floats.

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


Five. Horizontally centered (centering)
It's a simple trick, but it's worth saying again because I see so many novice questions asking: How is css horizontally centered? You need to define the width of the elements 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 skills: How big is the floor?
When debugging CSS errors, you need to be like a typesetting worker, parsing CSS code line by row. I usually define a background color on the problem layer so that it's clear how much space the layer occupies. Some people suggest using border, the general situation is also possible, but the problem is, sometimes border will increase the size of elements, Border-top and Boeder-bottom will destroy the value of vertical margin, so it is safer to use background.