1 CSS学习大纲
2 在标签上设置style属性：
3 background-color:#2459a2 ;
4 height:48px ;
5 编写CSS样式：
6 1.标签的style属性
7 2.写在head里面，style标签中写样式
8 ID选择器
9 #i1{
10 background-color:2459a2 ;
11 height:48px ;
12 }
13 class选择器 *****
14 .c1{
15 background - color: 2459a2 ;
16 height: 48px ;
17 }
18 <标签 class=‘名字‘> </标签>
19 标签选择器
20 div{
21 background - color: 2459a2;
22 height: 48px ;
23 }
24 所有的div都使用这个样式
25 层级选择器（空格） *****
26 .c1 .c2 div{
27 background - color: 2459a2;
28 height: 48px;
29 }
30 组合选择器（逗号） *****
31 #i1,.c1,div{
32 }
33 属性选择器 *****
34 对选择到到标签再通过属性再进行一次筛选
35 .c1[n=‘alex‘]{width:100px ;height:200px;}
36 PS:
37 优先级，标签上style优先，编写顺序，就近原则
38 2.5 css样式也可以写再单独的文件中
39 <link rel="stylesheet" href="commons.css"/>
40
41 3、多行注释
42 /*
43 ...内容...
44 */
45
46
47 4、边框
48 宽度，样式，颜色 （border: 4px dotted red）
49 border-left
50 5、
51 height, 高度 百分比
52 width, 宽度 像素，百分比
53 text-align:ceter, 水平方向居中
54 line_height, 垂直方向根据标签高度
55 color 字体颜色
56 font-size 字体大小
57 font-weight 字体加粗
58
59 6、float 飘
60 让标签浪起来，块级标签也可以堆叠
61 老子管不住DIV最后加：
62 <div style="clear: both;"></div>
63
64 7、display 块级标签和行内标签属性转换
65 display:none;让标签消失
66 display: inline转换成行内标签
67 display: block转换成块级标签
68 display:inline-block 具有inline，默认自己有多少占多少，也可以block设置高度，宽度
69
70 <span>行内标签：无法设置高度，宽度，padding , margin
71 <div>块级标签：可以设置高度，宽度，padding , margin
72
73 8、padding , margin(0,aito)
74 边距
75 margin 外边距
76 padding 内边距
CSS学习大纲3
1 <!DOCTYPE html>
2 <!--CSS实例1-->
3 <html lang="en">
4 <head>
5 <meta charset="UTF-8">
6 <title>Title</title>
7 <style>
8 .pg-header{
9 height:38px;
10 background-color: #dddddd;
11 line-height: 38px;
12 }
13 </style>
14
15 </head>
16 <body style="margin: 0 auto;">
17 <div class="pg-header">
18 <div style="float: left;">
19 收藏本站
20 </div>
21 <div style="float: right;">
22 <a>登录</a>
23 <a>注册</a>
24 </div>
25 </div>
26 <div style="width: 300px;border: 1px solid red;">
27 <div style="width: 96px;height:30px;border: 1px solid green;float: left "> </div>
28 <div style="width: 96px;height:30px;border: 1px solid green;float: left "> </div>
29 <div style="width: 96px;height:30px;border: 1px solid green;float: left "> </div>
30 <div style="width: 96px;height:30px;border: 1px solid green;float: left "> </div>
31 <div style="width: 96px;height:30px;border: 1px solid green;float: left "> </div>
32 <div style="width: 96px;height:30px;border: 1px solid green;float: left "> </div>
33 <div style="width: 96px;height:30px;border: 1px solid green;float: left "> </div>
34 <div style="width: 96px;height:30px;border: 1px solid green;float: left "> </div>
35 <div style="width: 96px;height:30px;border: 1px solid green;float: left "> </div>
36 <div style="clear: both;"></div>
37 </div>
38 </div>
39
40 </body>
41 </html>
CSS实例1
1 <!DOCTYPE html>
2 <!--CSS实例2-->
3 <html lang="en">
4 <head>
5 <meta charset="UTF-8">
6 <title>Title</title>
7 <style>
8 .pg-header{
9 height:38px;
10 background-color: #dddddd;
11 line-height: 38px;
12 }
13 </style>
14
15 </head>
16 <body style="margin: 0 ;">
17 <div class="pg-header">
18 <div style="width: 980px;margin: 0 auto;">
19 <div style="float: left;">
20 收藏本站
21 </div>
22 <div style="float: right;">
23 <a>登录</a>
24 <a>注册</a>
25 </div>
26 <div style="clear: both;"></div>
27 </div>
28 </div>
29 <div>
30 <div style="width: 980px;margin: 0 auto;">
31 <div style="float: left">
32 logo
33 </div>
34 <div style="float: right">
35 <div style="height: 50px;width: 100px;background-color: #dddddd"> </div>
36 </div>
37 <div style="clear: both;"></div>
38 </div>
39 </div>
40
41 <div style="width: 300px;border: 1px solid red;">
42 <div style="width: 96px;height:30px;border: 1px solid green;float: left "> </div>
43 <div style="width: 96px;height:30px;border: 1px solid green;float: left "> </div>
44 <div style="width: 96px;height:30px;border: 1px solid green;float: left "> </div>
45 <div style="width: 96px;height:30px;border: 1px solid green;float: left "> </div>
46 <div style="width: 96px;height:30px;border: 1px solid green;float: left "> </div>
47 <div style="width: 96px;height:30px;border: 1px solid green;float: left "> </div>
48 <div style="width: 96px;height:30px;border: 1px solid green;float: left "> </div>
49 <div style="width: 96px;height:30px;border: 1px solid green;float: left "> </div>
50 <div style="width: 96px;height:30px;border: 1px solid green;float: left "> </div>
51 <div style="clear: both;"></div>
52 </div>
53 </div>
54
55
56
57 </body>
58 </html>
CSS实例2
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div style="width: 30%;background-color:red;float: left;"> 9 style="width: 30%;background-color:red;float: left 10 </div> 11 <div style="width: 50%;background-color:green;float: left;"> 12 style="width: 50%;background-color:red;float: left;" 13 </div> 14 </body> 15 </html>
display
1 <!DOCTYPE html> 2 <!--CSS中display的应用--> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <title>Title</title> 7 </head> 8 <body> 9 <div style="background-color: red;display: inline;">display: inline转换成行内标签</div> 10 <span style="background-color: red;display: none">display:none 让标签消失</span> 11 <span style="background-color: red;display: block">display: block转换成块级标签</span> 12 <br/> 13 <br/> 14 <br/> 15 <span style="background-color: red;height: 100px;width: 90px">行内标签测试</span> 16 <span style="display: inline-block;background-color: red;height: 100px;width: 90px">行内标签双属性测试</span> 17 <br/> 18 <br/> 19 <br/> 20 <div style="background-color: red;height: 100px;width: 90px">块级标签测试</div> 21 <br/> 22 <br/> 23 <br/> 24 <a style="background-color: red;">A标签测试</a> 25 </body> 26 </html>
CSS中display的应用
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <br/> 9 <br/> 10 <br/> 11 <div style="border: 5px solid red;height: 100px;"> 12 <div style="background-color: green;height: 50px;margin-top: 10px;"> margin外边距 </div> 13 </div> 14 <br/> 15 <br/> 16 <br/> 17 <div style="border: 5px solid red;height: 100px;"> 18 <div style="background-color: green;height: 50px;padding-top: 10px;"> padding内边距 </div> 19 </div> 20 </body> 21 </html>
CSS边距
时间： 2024-12-29 19:37:18