css
css基本选择器
1
2
3
4
5
6
7
8
9
10
11
12
|
.bb{ color : red ;
font-size : 45px ;
} .c 3 {
color : rebeccapurple;
font-size : 45px ;
} .c 4 {
color : aquamarine;
font-size : 45px ;
} |
css样式存在位置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<!DOCTYPE html> < html lang = "en" >
< head >
< meta charset = "UTF-8" >
< title ></ title >
< link rel = "stylesheet" href = "commons.css" />
< style >
.cc{
color: royalblue;
font-size: 39px;
}
.ccc{
color: green;
font-size: 50px;
}
</ style >
</ head >
< body >
< div class = "bb" >bb</ div >
< br >
< div class = "cc" >cc</ div >
< br >
< div class = "ccc" >cc</ div >
</ body >
</ html >
|
层级选择器
1
2
3
4
5
6
7
8
9
10
11
12
|
.bb{ color : red ;
font-size : 45px ;
} .c 3 {
color : rebeccapurple;
font-size : 45px ;
} .c 4 {
color : aquamarine;
font-size : 45px ;
} |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<!DOCTYPE html> < html lang = "en" >
< head >
< meta charset = "UTF-8" >
< title >层级选择器</ title >
< link rel = "stylesheet" href = "commons.css" />
</ head >
< body >
< div class = "c3" >c3
< a id = "i8" >
< div >
< span class = "c4" > c4</ span >
</ div >
< span class = "c4" > c4</ span >
</ a >
</ div >
< span class = "c4" > c4</ span >
</ body >
</ html >
|
css-float属性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<!DOCTYPE html> < html lang = "en" >
< head >
< meta charset = "UTF-8" >
< title >css-float属性</ title >
</ head >
< body >
< div style = " 300px" >
< div style = "red;float:left; 20%;" >20%</ div >
< div style = "aquamarine;float: left; 50%;" >50%</ div >
< div style = "float:right; 10%;pink;" >10%</ div >
</ div >
</ body >
</ html >
|
css-float属性2
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<!DOCTYPE html> < html lang = "en" >
< head >
< meta charset = "UTF-8" >
< title >css-float属性2</ title >
</ head >
< body >
< div style = "red;" >
1234
< p >1</ p >
< p >2</ p >
< p >3</ p >
< p >4</ p >
</ div >
< br >
< div style = " 300px;brown" >
< div style = "brown;float: left; 20%;" >123</ div >
< div style = "aqua;float: left; 60%" >456</ div >
< div style = "float: right; 30%;black" >789</ div >
< div style = "clear:both;" >987654321</ div >
</ div >
</ body >
</ html >
|
css之postition属性
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<!DOCTYPE html> < html lang = "en" >
< head >
< meta charset = "UTF-8" >
< title > css之postition属性</ title >
</ head >
< body >
< div style = "position: relative;green;height: 600px; 700px;" >
< div style = "position: absolute;bottom: 30px;right: 40px" >定位</ div >
</ div >
< div style = "height: 1000px;blue" ></ div >
</ body >
</ html >
|
1
|
< br >
|