Optimization and skill of Web site refactoring CSS style sheet

css| Skills | website Refactoring | style Sheet | Optimize one, use CSS abbreviation

Using abbreviations can help reduce the size of your CSS files and make it easier to read. The main rules for CSS abbreviations refer to the common CSS abbreviation syntax summary, which does not expand the description.

Two. Define units clearly, unless the value is 0

Forgetting to define the size of the unit is a common error for CSS Novice. In HTML you can write only width=100, but in CSS you have to give an exact unit, such as: width:100px width:100em. Only two exceptions can be defined without a unit: row height and 0 value. In addition, other values must follow the unit, note, do not add a space between the number and the unit.

Three. Case sensitive

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.

The values of class and ID are case-sensitive in HTML and XHTML, and if you have to mix the case, carefully verify that your definition of CSS is consistent with the tags in XHTML.

Four. To cancel the element qualification before class and ID

When you write an element to define class or ID, you can omit the previous element qualification because the ID is unique on a page, and 鴆 Las S can be used more than once in the page. You define an element without meaning. For example:

div#content {/* declarations */}


fieldset.details {/* declarations */}

can be written

#content {/* declarations */}


. Details {/* declarations */}

This can save some bytes.

Five. Default value

Usually the default value for the padding is transparent, which is the default value for 0,background-color. However, the default values for different browsers may be different. If you are afraid of conflict, you can define the margin and padding values for all elements at the beginning of the stylesheet as 0, like this:

　　* {


margin:0;


padding:0;


　　}

Six. You do not need to repeat the definition of inheritable values

In CSS, child elements automatically inherit the attribute values of the parent element, such as color, font, and so on, that are already defined in the parent element and can be directly inherited in child elements, without having to repeat the definition. Note, however, that the browser may overwrite your definition with some default values.

Seven. Recent priority principles

If there are multiple definitions of the same element, the closest (least level) definition is the highest priority, such as 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 class is closer than P. You can find out more about the calculating a selector's specificity of the consortium.

Eight. Multiple class definition

A label can define more than one class at a time. For example, we first define two styles, the first style background is #666, and the second style has an PX border.

. One{width:200px;background: #666;}


. two{border:10px solid #F00;

In the page code, we can call

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

Nine. Using a descendant (selectors)

CSS beginners do not know that using a child selector is one of the reasons that affects their efficiency. A child 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: