Div Css video study notes_html/css_WEB-ITnose

1. divs cannot be nested inside a paragraph (p tag).
2. Css: cascading style file, the same tag can be modified with multiple styles.
3.css type: inline, embedded, external, input.

Inline:

aaaaaaaaaaa

Disadvantages: poor reusability.

Embed:

Benefits: Can control the entire web page certain labels.

External:

Input:
in css file Or use @import url(demo.css) in the style tag;

4. Style rule selector:
html selector, class selector, id selector, association selector, combination selector, 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:2cm;
background :green;
}

//use for any label
.two {
color:red;
font-size:2cm;
background:green;
}

adfsdf

id selector:
#one {
color:red;
font -size:2cm;
background:green;
}

adfsdf

Associated selector:
p em {
color:red;
font-size:2cm;
background:green;
}

.one .two em {
color:red;
font -size:2cm;
background:green;
}

🎜> Combination selector:
p,div,a,h1,.one,#two {

color:red;

font-size:2cm;
background:green;
}

Just use one of them

Pseudo element selector:

a:link {font-size:1cm;color:red}

a:hover {font- size:5cm;color:green}

a:visited{font-size:2cm;color:yellow}
a.one:link {font-size:8cm;color:blue}
div a. one:link{font-size:12cm;color:black}

dfdfdfdf
ffffff

ffffff

5.div css benefits: separation of performance and content, shortening revision time, and reducing bandwidth costs.
Use p for paragraphs and hx for titles

Tables only need to be used to display data, not for layout.

margin: outer margin
Two methods:

.bianju{

margin-left:10cm;
margin-top:40cm;
margin-bottom:4cm;
margin-right: 40cm;
}

.bianju {
margin: 10px 20px 30px 40px;

Padding:
td {
padding-left:4cm;

padding-right:4cm;

padding-top:4cm;

padding-bottom:4cm ;

}


p {
float:right;//Align on which side, three kinds of right, left, none
}

.one {

clear:none;
clear:left;
clear:right;
clear:both;

}

Downloadable attachments: Demo