Code summary for CSS3 (Part) and Code summary for css3

Code summary for CSS3 (Part) and Code summary for css3

1. Create a style sheet: selector {

Property: value;

Property: value;

}

Selector is the element that needs to change the style. property is the name of the css attribute and the format in which the value applies.

2./* Comment */

3. When rules conflict with each other, the server gives priority to those with special characteristics. Those with backend rules come! Important's

4. The values of the CSS attribute can be divided into: inherited values (inherit is entered at the value), predefined values (left, right, none), length or percentage, pure numbers, color

5. CSS colors are divided into RGB (color: rgb (red, green, blue) (0 ~ 255 digits); hexadecimal (color: # Red green blue) (blue can be converted to hexadecimal); RGBA (red, green, blue, transparency) (transparency is 0 ~ Decimal between 1, where 1 indicates completely opaque); HSL (color phase, saturation, brightness) (color phase 0 ~ The number between 360 and the remaining two items with percentages); HSLA (color phase, saturation, brightness, transparency)

6. Set the matching rules to the final level, and save them at the end of .css to create an external style sheet.

7. link external style sheet: Enter <link rel = "stylesheet" href?#url.css "/> In the head section (there is a space between the rel attribute and href, and a space at the end)

8. Create an embedded style sheet: Enter <style> </style> In the head section (add any number of style rules in the middle)

9. Apply inline style: Enter style = "" In the tag that begins with the element to be formatted (you can add any number of style rules in the middle, separated by semicolons)

10. Style cascade and sequence rules: if other conditions are the same, the higher the style priority, the higher the inline style overwrites other styles that conflict with it)

11. media-related style sheets: 1) Enter media = "print/screen/all" in the link or style start label ";

2) directly input @ media print/screen/all {} (add a style in the middle and separate it with semicolons)

12. Construction selector:

1) Based on the element type or name.

Format: name of the element to be selected (for example, h1) {attribute name; application format;} (for example, color; red)

2) based on the context of the element.

Format: name of the element to be selected in the context (for example, h1) {name of the attribute; format of the application ;}

A) Enter ancestor in the style sheet (the ancestor of the element to be formatted) (you can continue to enter ancestor as needed) descendant (the element to be formatted) {name of the attribute; format of the application ;}

B) enter parent in the style sheet (the selector that contains the elements to be formatted)> (you can continue to enter parent as needed) child (the element to be formatted) {name of the attribute; application Format ;}

C) In the style sheet, enter sibling (the element that exists directly before the target element in the same parent element) + (you can enter sibling as needed) element (the element to be formatted) {attribute name; application format ;}

3) based on the class or ID of the element

4) based on the pseudo class or pseudo element of the element.

5) based on whether the element has certain attributes and values

13. Select the first or last child element:

Enter the first or last child element to apply the style (optional); select the first/last child element and enter first-child/last-child {attribute name; application Format ;}

14. Select the first letter or line of the element:

Input element (selector of the element to be formatted): first-letter (first letter) {name of the attribute; format of the application ;}

Input element (selector of the element to be formatted): first-line (first line) {attribute name; application format ;}