The 18 most common tips you should know about CSS2.0

First, using CSS abbreviations
Using abbreviations can help reduce the size of your CSS files and make them easier to read.
For details, please visit: CSS common abbreviation syntax

Define units explicitly, unless the value is 0.
Forgetting to define the size of the unit is a common mistake for CSS beginners. In HTML you can write only width= "100", but in CSS you have to give an exact unit, for example: width:100px width:100em. Only two exceptions can be undefined units: 0 values. In addition, the other values must be followed by the unit, note, do not add a space between the value and the unit.

Three, case-sensitive
When using CSS,CSS in XHTML, the element names defined are case-sensitive. To avoid this error, it is recommended that all definition names be lowercase.
The values of class and ID are also case-sensitive in HTML and XHTML, and if you must write in mixed case, please be sure that your CSS definitions and XHTML tags are consistent.

Iv. element qualification before class and ID is canceled
When you write to an element defining class or ID, you can omit the preceding element qualification, because the ID is unique on a page, and class can be used multiple times in the page. You have no meaning in qualifying an element. For example:

div#content {/* declarations *}
Fieldset.details {/* declarations *}

can be written

#content {/* declarations */}
. details {/* declarations */}

This can save some bytes.

Five, default value
The default value for padding, usually 0,background-color, is transparent. However, the default values for different browsers may be different. If you are afraid of conflict, you can define all the elements ' margin and padding values to be 0 at the beginning of the style sheet, like this:

* {
margin:0;
padding:0;
}

Six, do not need to repeat the definition of inheritable values
In CSS, child elements automatically inherit the parent element's property values, such as color, font, and so on, which have been defined in the parent element, can be inherited directly in the child elements, and do not require duplicate definitions. Note, however, that the browser may overwrite your definition with some default values.

Vii. Recent Priority Principles
If there are multiple definitions for the same element, the closest (minimum) definition is the highest priority, such as having a piece of code
Update:lorem ipsum dolor Set
In the CSS file, you have defined the element p and defined a class= "update"

p {
Margin:1em 0;
Font-size:1em;
Color: #333;
}
. Update {
Font-weight:bold;
Color: #600;
}

Of these two definitions, class= "Update" will be used because the class is closer than P. You can check out the calculating a selector's specificity for more information.

Viii. Multiple class definitions
A label can define more than one class at a time. For example: We define two styles first, the first style background is #666, and the second style has a ten px border.

. One{width:200px;background: #666;}
. two{border:10px solid #F00;}

In the page code, we can call this
<div class= "One" ></div>
The final result is that the DIV has both a #666 background and a 10px border. Yes, it's OK, you can try it.

Ix. use of sub-selectors (descendant selectors)
CSS beginners do not know that using sub-selectors is one of the reasons that affect their efficiency. A sub-selector can help you save a lot of class definitions. Let's look at the following code:

<div id= "Subnav" >
<ul>
<li class= "Subnavitem" ><a href= "#" class= "Subnavitem" >item 1</a></li>>
<li class= "subnavitemselected" >
<a href= "#" class= "subnavitemselected" >item 1</a></li>
<li class= "Subnavitem" > <a href= "#" class= "Subnavitem" > Item 1</a> </li>
</ul>
</div>

The CSS definition for this piece of code is:

Div#subnav UL {/* Some styling */}
Div#subnav ul Li.subnavitem {/* Some styling */}
Div#subnav ul Li.subnavitem A.subnavitem {/* Some styling */}
Div#subnav ul li.subnavitemselected {/* Some styling */}
Div#subnav ul li.subnavitemselected a.subnavitemselected {/* Some styling */}

You can replace the above code with the following method

<ul id= "Subnav" >
<li> <a href= "#" > Item 1</a> </li>
<li class= "sel" > <a href= "#" > Item 1</a> </li>
<li> <a href= "#" > Item 1</a> </li>
</ul>

The style definition is:

#subnav {/* Some styling */}
#subnav Li {/* Some styling */}
#subnav a {/* Some styling */}
#subnav. Sel {/* Some styling */}
#subnav. SEL a {/* Some styling */}

Use a sub-selector to make your code and CSS more concise and easier to read.

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.

Xi. Group selector (selectors)
When some element types, classes, or IDs have some properties in common, you can use group selectors to avoid repeating definitions multiple times. This can save a lot of bytes.
For example: Define the font, color, and margin for all headings, as you can write:

H1,h2,h3,h4,h5,h6 {
font-family: "Lucida Grande", Lucida,arial,helvetica,sans-serif;
Color: #333;
Margin:1em 0;
}

If you have an individual element that needs to define a separate style when you use it, you can add a new definition that overrides the old definition, for example:

h1 {font-size:2em;}
h2 {Font-size:1.6em;}

12. 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). Why this is defined, you can refer to Eric Meyer's "Link specificity".
If your users need keyboard control and need to know the focus of the current link, you can also define: Focus properties. : The effect of the focus property depends on where you write, if you want the focus element to display: hover effect, you put: Focus in front of: hover, if you want the focus effect instead: hover effect, you put: focus on: hover behind.

13. 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 approach is a bit far-fetched, fortunately there is a good way to solve, see this article "How to Clear floats without Structural Markup"
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"

14, Transverse Center (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, and if your layout is contained within a layer (container), you can define it so that it is centered horizontally:

#wrap {
width:760px; /* Modify the width of your layer */
margin:0 Auto;
}

But Ie5/win does not display this definition correctly, and we use a very useful technique to solve it: Use the Text-align property. Just like this:

Body {
Text-align:center;
}
#wrap {
width:760px; /* Modify the width of your layer */
margin:0 Auto;
Text-align:left;
}

The first body of the text-align:center; The rule defines the center of all the elements of the body in Ie5/win (other browsers just center the text), and the second text-align:left the text in the #warp to the left.

XV, import, and hide CSS
Because the old version of the browser does not support CSS, a common practice is to use the @import technique to hide the CSS. For example:
@import url ("Main.css");
However, this method does not work for IE4, which gives me a headache for a while. Then I used the following notation:
@import "Main.css";
This can also hide the CSS in the IE4, hehe, but also save 5 bytes of it. For a detailed explanation of the @import syntax, you can see the centricle's CSS filter chart here.

16, for the optimization of IE
Sometimes, you need to define some special rules for IE bug, there are too many CSS tricks (hacks), I only use two of these methods, regardless of whether Microsoft in the upcoming release of IE7 beta version of the better support CSS, both methods are the safest.

1. Methods of annotations

(a) to hide a CSS definition in IE, you can use the child selector (selector):
Html>body p {
/* Define content */
}
(b) The following wording is only accessible by IE browser (hidden from other browsers)
* HTML P {
/* declarations */
}
(c) There are times when you want Ie/win to be effective and ie/mac hidden, and you can use the "backslash" technique:
/* \*/
* HTML P {
Declarations
}
/* */

2. Method of conditional annotations (conditional comments)
Another way, I think, than the CSS hacks more than the test is to use Microsoft's private attribute condition annotation (conditional comments). In this way you can define some styles for IE, without affecting the definition of the main style sheet. Just like this:

<!--[If ie]>
<link rel= "stylesheet" type= "Text/css" href= "Ie.css"/>
<! [endif]-->

17, debugging Skills: 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.
Another frequently problematic attribute is outline. Outline looks like Boeder, but does not affect the size or position of the element. Only a handful of browsers support outline properties, and all I know is Safari, OmniWeb, and opera.

18. CSS Code writing style
When writing CSS code, for indentation, line breaks, spaces, everyone has a writing habit. After continuous practice, I decided to use the following writing style:

Selector1,
Selector2 {
Property:value;
}

When using union definitions, I usually write a single line for each selector so that it is easy to find them in the CSS file. A space is added between the last selector and the curly brace {, and each definition is also written in a separate line, and the semicolon is directly behind the property value without a space.

The 18 most common tips you should know about CSS2.0