Css authoritative guide-notes

Css authoritative guide-Chapter 2 css and documentation

1. element: replacement element (img input), non-replacement element (most span ).

2, link: rel (Representative relation: stylesheet, candidate style sheet: alternate stylesheet); type (text/css); media :( all (all representations of media, screen, print ), title (used with candidates ).

3, @ import url(sheet1.css) must be used in the style before other css rules.

4. Backward accessibility:In this way, older browsers will ignore the style, and browsers that understand css can read the style sheet normally.

5. css comments :/**/.

Chapter 4 Selector

1. When declaring a group, you must use a semicolon at the end of each declaration.

2, p. warming. help {background: red;} Only matches the p elements whose class contains warming and help. If p contains warming and other elements, it cannot match.

3. In fact, the browser does not check the uniqueness of the id in html, but this makes dom writing more difficult.

4. Attribute selector: h1 [class] {...}

H1 [class = ''] {...} exactly matches

H1 [class ~ = ''] {...} Partially match all the elements in [class ^ = ''] starting with [class $ =''] ending with [class * = '']

* [Lang | = 'en'] for a specific attribute selector, all elements whose lang attribute is equal to en or starting with en-are selected.

5. Select child elements: h1> strong. Select adjacent sibling elements h1 + p (h1 and p have the same parent element, and finally select p ).

6. link pseudo-class: unaccessed link: link, accessed link: visited (both static), equivalent.

Dynamic pseudo class: focus, mouse stop: hover, activation: active. (Dynamic pseudo classes can be used for any element)

We recommend that you use the pseudo-class sequence link-visited-focus-hover-active.

When selecting the first child element (: first-child), it is easy to misunderstand that it is the first child element (in the following example, the element as the first child element includes the first p, the first li, strong, and em ).

 1 
 2     
helooo
 3     
 
 

  
   4         
  
  
111
 5         
  
  
222
 6     
 
 
 7     
 8         333 9     
10 

Select (: lang () based on the language, such as *: lang (fr) {color: red;}. This turns all French elements into red.

Pseudo element selector: first-letter. The user agent dynamically forms an imaginary element. ;

Line 1: first-line;

Before and after: before: after.

Chapter 4 Structure and cascade

1. In fact, all style conflicts are solved by cascade.

Special Characteristics of selector: id selector (,); Class Attribute pseudo class (,); each element and pseudo element (,); wildcard selector, 0, 0); inline style (1, 0, 0 ).

Importance :! Important is placed before the end semicolon of the Declaration.

2. Exceptions: the background style applied to the body element can be passed to the html element (html is the root element of the document) and its canvas can be defined accordingly.

Most of the Box Model attributes cannot be inherited (including the background border with the inside margin of the outer margin). The inherited value has no special characteristics, and the 0 special is stronger than the no special characteristics.

3. The weight of the statement ranges from large to small: the reader's important statement> the Creator's normal Statement> the reader's normal Statement> the User Agent statement.

By linking pseudo classes together, you can alleviate the problems caused by special characteristics and order.

Chapter 3 values and units

1. Functional rgb color: rgb (color), which is expressed by a percentage (0%-100%) or an integer triple (0-255.

Hexadecimal rgb color: you can set a color by concatenating three hexadecimal numbers between 00-FF.

Web Security Color: A 256-color computer system can always avoid jitters. The rgb value is a multiple of 20% and 51, and 0% 0 is also the hexadecimal value, 99, cc, ff.

2, absolute length unit: in cm mm pt pc.

Unit of relative length: 1 em is defined as the font-size value of a given font (the value varies with the element). ex indicates the height of x in the font used, px is ideal for measuring the image size (a small grid is 1 pixel ).

3. a {color: inherit} allows the link to use the inherited color value instead of the default style of the user agent.

4. degrees (deg), gradients (grad), and radians (rad) are allowed.

Time: ms, s. Negative values are not allowed.

Frequency value: Hz, MHz. Negative values are not allowed.