CSS Web page making practical Tips 9

This article summarizes some common CSS techniques to lay the groundwork for site reconstruction, and hopefully you can learn something useful.

I. Using CSS Abbreviations

Using abbreviations can help reduce the size of your CSS files and make them easier to read. For the main rules of CSS abbreviations, see CSS basic syntax.

Two. Explicitly define the unit, 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, 100, but in CSS you have to give an exact unit, for example: "Width:100em." Only two exceptions can be undefined units: Row heights and 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, I recommend 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.

Four. Remove the element qualification before class and ID

When you write to an element that defines class or ID, you can omit the preceding element qualification, because the ID is unique on a page, and 鴆 Las S can be used multiple times on 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. You do not need to define inheritable values repeatedly

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.

Seven. 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 classupdate

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.

Eight. 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{;background: #666;}
. two{border:10px solid #F00;}

In the page code, we can call this

The final result is that the DIV has both a #666 background and a 10px border. Yes, it's OK, you can try it.

Nine. Using the sub-selector (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:

• 
  

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

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.

