Some very good CSS skills, but also often ignored by people _ Experience Exchange
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞
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:
width:760px; /* Modify the width of your layer * *
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.
This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or
reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or
complaint, to email@example.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.
The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion;
products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the
content of the page makes you feel confusing, please write us an email, we will handle the problem
within 5 days after receiving your email.
If you find any instances of plagiarism from the community, please send an email to:
and provide relevant evidence. A staff member will contact you within 5 working days.