Review the document structure of CSS and css documents

Review the document structure of CSS and css documents

Source: http://limits.cnblogs.com

Let's take a look at several basic HTML pages.

1 <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 
Shown as follows:

The document structure is as follows:

Special features:
Specify the weights of different rules. When multiple rules can be used for the same element, the style with higher weights will be preferentially used.
 
H1 {color: red;}/* Special = 1 */p em {color: blue;}/* Special = 2 */. divclass {color: yellow;}/* Special = 10 */p. note em. dark {color: gray;}/* Special = 22 */# id {color: black;}/* Special = 100 */
Use! Important to identify important rules, such as: p {color: red! Important;}. At this time, color: red will have the highest weight, because the declared rules will be higher than the definition of the visitor's local style (that is, the definition in the P label), so! Use important with caution.
Element category:

 

 
  
Block-level element (display: block): Each block-level element starts from a new line, in addition, the subsequent elements also need to start with a new line of titles, paragraphs, tables, layers, and bodies, which are block-level elements;
 
  
Inline element (display: inline): inline elements do not need to be displayed on a new line, nor are they forced to wrap the subsequent elements, such as a, em, span and so on, inline elements can be child elements of any other element;
 
  
List item (display: list-item): Only the li element is of the default type, and the expression of this element is the same as that of the list;
 
  
Hidden element (display: none): When an element is set to display: none, the browser will completely ignore this element and this element will not be displayed or occupied.