The nine most practical css skills and the nine CSS skills are usually used to write css web pages.

The nine most practical css skills and the nine CSS skills are usually used to write css web pages.

I. Use css abbreviations 

Using abbreviations can help reduce the size of your CSS file and make it easier to read. For the main rules for css abbreviations, see css basic syntax.

　　Ii. Define the unit unless the value is 0 

Unit that forgets to define the size is a common mistake for beginners of CSS. You can write only; 100 in HTML, but in CSS, you must give an accurate unit, for example, "width: 100em. There are only two exceptions. The unit is not defined: the Row Height and the 0 value. Other values must follow the unit. Note that do not add spaces between values and units.

　Iii. 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.

The values of class and id are also case-sensitive in HTML and XHTML. If you must write them in combination with uppercase and lowercase, make sure that your CSS definition is consistent with the tags in XHTML.

　4. Cancel the element limitation before class and id 

When you write an element to define a class or id, you can omit the previous element limitation, because the ID is unique in a page, and las s can be used multiple times on the page. It makes no sense to limit an element. For example:

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

Can be written

# Content {/* declarations */}
. Details {/* declarations */}

This saves some bytes.

　5. Default Value

Generally, the default value of padding is 0, and the default value of background-color is transparent. However, the default values may be different in different browsers. If there is a conflict, You can first define that the margin and padding values of all elements are 0 at the beginning of the style sheet, as shown in the following code:

*{
Margin: 0;
Padding: 0;
}

　6. Do not need to repeatedly define the value that can be inherited

In CSS, the child element automatically inherits the attribute values of the parent element, such as color and font. defined in the parent element, the child element can be inherited directly without repeated definitions. However, the browser may use some default values to overwrite your definition.

　VII. Recent priority principle 

If there are multiple definitions of the same element, the closest (minimum level) is the highest priority. For example, there is such a piece of code.

Update: Lorem ipsum dolor set

In the CSS file, you have defined the element p and a classupdate.

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

In these two definitions, class = "update will be used because the class is closer to p. For more information, see W3C "Calculating a selector's specificity.

　8. multi-class definition 

A tag can define multiple classes at the same time. For example, we first define two styles. The first style background is #666, and the second style has a border of 10 px.

. One {; background: #666 ;}
. Two {border: 10px solid # F00 ;}

In the Page code, we can call

<Div class = "one" two> </div>

In this way, the final display effect is that the div has both a background of #666 and a border of 10 PX. Yes. You can try it.

　　9. Use the sub-selector (descendant selectors) 

CSS beginners do not know that using sub-selectors is one of the reasons that affect their efficiency. The 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 of this 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 use the following method to replace the above Code

<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 */}

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