Div + CSS video learning notes

1. The section (P tag) cannot be nested with Div.
2. CSS: stacked style files. The same tag can be modified with multiple styles.
3.css type: inline, embedded, external, and input.

Inline:
<P style = "font-size: 50px; color: red; Background-color: green; text-Decoration: underline"> aaaaaaaaaaa </P>
Disadvantage: Poor reusability.

Embedding:
<Style type = "text/CSS">
<! --
P {
Font-size: 50px;
Color: red;
Background-color: green;
Text-Decoration: underline;
}
// -->
</Style>
Benefits: You can control some tags of the entire web page.

External:
<LINK rel = "stylesheet" type = "text/CSS" href = "test.css">

Input:
Use @ import url(demo.css) in the CSS file or style label );

4. Style rule selector:
HTML selector, class selector, Id selector, Association selector, combination selector, and pseudo element selector.

HTML selector:
P {
Font-size: 50px;
Color: red;
Background-color: green;
Text-Decoration: underline;
}

Class selector:
// Only use for P label
P. One {
Color: red;
Font-size: 2 cm;
Background: green;
}

// Use for any label
. Two {
Color: red;
Font-size: 2 cm;
Background: green;
}

<P class = "one"> adfsdf </P>

Id selector:
# One {
Color: red;
Font-size: 2 cm;
Background: green;
}
<P id = "one"> adfsdf </P>

Association selector:
P em {
Color: red;
Font-size: 2 cm;
Background: green;
}

. One. Two em {
Color: red;
Font-size: 2 cm;
Background: green;
}

<P>
<Em> dfdf </em>
</P>

Combination selector:
P, Div, A, H1,. One, # Two {
Color: red;
Font-size: 2 cm;
Background: green;
}

Use one of them.

Pseudo element selector:
A: link {font-size: 1 cm; color: Red}
A: hover {font-size: 5 cm; color: Green}
A: visited {font-size: 2 cm; color: yellow}
A. One: link {font-size: 8 cm; color: Blue}
Div A. One: link {font-size: 12 cm; color: Black}

<A href = "dfdf"> dfdfdfdf </a>
<A href = "dfdfdf" class = "one"> ffffff </a>
<Div>
<A href = "dfdfdf" class = "one"> ffffff </a>
</Div>

5. Advantages of Div + CSS: separation of performance and content, shortening the revision time and reducing bandwidth costs.
Paragraph with P, title with HX
A table only needs to be used to display data, not for layout.

Margin: margin
Two methods:
. Bianju {
Margin-left: 10 cm;
Margin-top: 40 cm;
Margin-bottom: 4 cm;
Margin-Right: 40 cm;
}

. Bianju {
Margin: 10px 20px 30px 40px;
}

Auto indicates automatic.

Padding:
TD {
Padding-left: 4 cm;
Padding-Right: 4 cm;
Padding-top: 4 cm;
Padding-bottom: 4 cm;
}

P {
Float: Right; // which side is aligned, three types of right, left, none
}

. One {
Clear: none;
Clear: left;
Clear: right;
Clear: both;
}

Downloadable attachment: Demo