HTML5 third day notes

CSS

html: Structure

css:Performance

CSS: Cascading Style Sheets

Function: Modify and beautify html. The separation of structure and style is achieved.

Cascading Style Sheet

Advantages of using DIV+CSS:

1. Separation of performance and content

2. Improve page browsing speed

3. Easy to maintain and revise

Style sheet

Selector

Style

Syntax: Selector {Style 1: Style value 1; Style 2 : Style value 2;}

Classification of style sheets:

1, inline style sheets; (no separation of structure and presentation; highest priority)

Syntax:

123

2, internal style sheet; (no separation of structure and presentation;)

Syntax;

3, external style sheet; (realizes the separation of structure and presentation;

1) Linked style sheet:



< !--HTML4 writing method-->

2) Import style sheet; (rarely used)

Syntax:

Priority of style sheet:

Proximity principle

Inline style sheet has the highest priority

Comments:

html comments

css comments/*CSS*/

Cannot nest comments

Selector:

Basic selector:

1) Global selector: * represents syntax: *{style}

* represents all tags, All tag styles are changed

2) Tag selector

p{ }

h1{ }

Features: The same tags have the same style

3) Category selector

Define first and then quote

Definition: .Class selector name {style}

Reference: class="category selection The name of the device "

Features: Define once and use it multiple times. Use spaces when using two category selectors

4) id selector

Define first and then quote

Definition: #Name of the id selector {style}

Quote: id="name of id selector"

Features: Unique

IDs with the same name can only appear once in the same page

High priority

The priority of the selector:

Inline style sheet>id>.class>element(label selector)>*(global selector)

Weight: 1000 >100> 10 > 1 > 0

The weight is calculated by addition

The representation of the color value:

1, word representation Method: red;green;blue;yellow;orange;pink;purple;black;white;

2, hexadecimal notation: (0-9 a-f) #ff0000 #红红GreenGreenBlueBlue

#f00 #Red, Green, Blue

3, rgb representation: (0-255)

background-color:rgb(255,0,0) rgb(red, Green, blue)

rgb (255,255,255) white

4, rgba notation:

a represents transparency (change between 0-1, 0 represents completely transparent, 1 means opaque;)

background-color:rgba(255,0,0,0.5)

background-color:rgba(255,0,0,.5)

When rgb is equal, it represents a gray color

The above is the content of the notes on the third day of HTML5. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!