Learning-nine practical skills for CSS web page creation

This article summarizes some common css skills to lay the foundation for website reconstruction. I hope you can learn something useful.

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.