【CSS总结】CSS基础
一、CSS选择器
1 id选择器
2 class选择器
3 标签选择器
4 标签层级选择器
5 class层级选择器
6 id层级选择器
7 id组合选择器
8 class组合选择器
9 属性选择器
10 <!DOCTYPE html>
11 <html lang="en">
12 <head>
13 <meta charset="UTF-8">
14 <title>Title</title>
15 <style>
16 /*id选择器通过井号来定位*/
17 #i1{height: 100px;
18 width: 100px;
19 background-color: red;
20 }
21
22 /*class选择器通过点来定位*/
23 .c1{height: 100px;
24 width: 100px;
25 background-color: black;
26 }
27
28 /*标签选择器：当前html页面下的所有div都会受到影响*/
29 div{
30 height: 100px;
31 width: 100px;
32 background-color: pink;
33 }
34
35 /*标签层级选择器，div标签下的所有span标签颜色改变*/
36 div span{
37 background-color: blue;
38 }
39
40 /*class层级选择器*/
41 .c2 span{
42 background-color: green;
43 }
44
45 /*id层级选择器*/
46 #i2 span{
47 background-color: yellow;
48 }
49
50 /*id组合选择器，i3、i4、i5公用一套css样式*/
51 #i3,#i4,#i5{
52 height: 100px;
53 width: 100px;
54 background-color: orange;
55 }
56
57 /*class组合选择器，c3、c4、c5公用一套css样式*/
58 .c3,.c4,.c5{
59 height: 100px;
60 width: 100px;
61 background-color: chocolate;
62 }
63
64 /*属性选择器，通过name属性定位。对选择到的标签 在通过属性进行筛选 可以和层级选择器连用*/
65 div[name='dsx']{
66 background-color: rebeccapurple;
67 }
68
69 </style>
70 </head>
71 <body>
72 <!--id选择器,一个html页面中不可以存在相同的id，以“#”来定位-->
73 <div id="i1"></div>
74
75 <!--class选择器，以“.”来定位-->
76 <div class="c1"></div>
77
78 <!--标签选择器：当前html页面下的所有div都会受到影响-->
79 <div>标签选择器</div>
80
81 <!--标签层级选择器-->
82 <div>
83 <span>大师兄</span>
84 </div>
85
86 <!--class层级选择器-->
87 <div class="c2">
88 <span>大师兄</span>
89 </div>
90
91 <!--id层级选择器-->
92 <div id="i2">
93 <span>大师兄</span>
94 如果行内标签没有内容，不可以对它进行任何的css装饰
95 </div>
96
97 <!--id组合选择器-->
98 <div id="i3">aaa</div><br>
99 <div id="i4">bbb</div><br>
100 <div id="i5">ccc</div>
101
102 <!--class组合选择器-->
103 <div class="c3">aaa</div><br>
104 <div class="c4">bbb</div><br>
105 <div class="c5">ccc</div>
106
107 <!--属性选择器-->
108 <div name="dsx">大师兄</div>
109 </body>
110 </html>
二、引入css样式的三种方式
1、在head标签当中写一个style标签，在style标签里面可以进行css样式的编写
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .c1{
8 height: 100px;
9 width: 100px;
10 border: 1px red solid;
11 text-align: center;
12 line-height: 100px
13 }
14 </style>
15 </head>
16 <body>
17
18 <div class="c1">c1</div>
19
20 </body>
21 </html>
2、在标签中直接增加style属性，在style属性当中增加增加css样式
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div class="c1" style="height: 100px;width: 100px;border: 1px red solid;font-size: xx-large;font-weight: bolder;">c1</div> 9 10 <!--class选择器，通过色差使文字不显示--> 11 <div class="c2" style="height: 100px;width: 100px;border: 1px red solid;color: white">双鱼座</div> 12 <!--color: white：控制文字颜色--> 13 </body> 14 </html>
3、通过link标签引入写好的css样式表
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <link rel="stylesheet" href="black.css"> 7 <link rel="stylesheet" href="green.css"> 8 </head> 9 <body> 10 <div class="c1">c1</div> 11 </body> 12 </html>
文件black.css中的内容
1 .c1{
2 height: 100px;
3 width: 100px;
4 background-color: black;
5 }
文件green.css中的内容
1 .c1{
2 height: 100px;
3 width: 100px;
4 background-color: green;
5 }
三、引入css的优先级
标签中style优先级最高，其次在代码中就近找，也就是从下往上找
1 <!--标签中style优先级最高，其次在代码中就近找，也就是从下往上找-->
2 <!DOCTYPE html>
3 <html lang="en">
4 <head>
5 <meta charset="UTF-8">
6 <title>Title</title>
7 <link rel="stylesheet" href="black.css">
8 <style>
9 .c1{
10 height: 100px;
11 width: 100px;
12 background-color: pink;
13 }
14 </style>
15 <link rel="stylesheet" href="green.css">
16 </head>
17 <body>
18 <!--以标签为基准，由下到上依次查找-->
19 <div class="c1" style="height: 100px;width: 100px; font-size: 12px !important; line-height: 1.5 !important;">></div>
20 </body>
21 </html>
四、css属性
height、width、font-size、font-weight、text-align、line-height、float、display、margin、padding等
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <link rel="stylesheet" href="black.css">
7 <style>
8 .c1{
9 height: 100px;
10 width: 100px;
11 border: 1px red solid;
12 text-align: center;
13 line-height: 100px
14 }
15 /*鼠标悬浮到框内则展示背景色和文字*/
16 .c2:hover{
17 background-color: red;
18 color: black;
19 }
20 </style>
21 <link rel="stylesheet" href="green.css">
22 </head>
23 <body style="margin: 0 auto">
24 <!--style="margin: 0 auto":body标签中加上这项，将外边距设为0-->
25
26 <div class="c1">c1</div>
27
28 <div style="height: 100px;width: 100px;border: 1px red solid;font-size: xx-large;font-weight: bolder;">大师兄</div>
29 <!--height: 100px：边框高度-->
30 <!--width: 100px：边框宽度-->
31 <!--border: 1px red solid：1像素 红色边框 实线-->
32 <!--font-size:larger：大字体-->
33 <!--font-weight: bolder：字体加粗-->
34
35 <div style="height: 100px;width: 100px;border: 1px red solid;text-align: center;line-height: 100px;">双鱼座</div>
36 <!--text-align: center：水平居中-->
37 <!--line-height: 100px：这个值与边框的height属性的值一样代表垂直居中-->
38
39 <!-- float 浮动 块级标签浮动后 相当于分层 都像左浮动 块级标签会便在一行 如果超过宽度超过100则会换行-->
40 <div style="height: 48px;width: 100px;border: 1px red solid;float: left">双鱼座</div>
41 <div style="height: 48px;width: 100px;border: 1px black solid;float: left">大师兄</div>
42 <!--float: left：两个div都向左飘，相当于并排在一起了-->
43
44 <!--块级标签转换为行内标签-->
45 <div style="height: 100px;width: 100px;display: inline">aa</div>
46 <!--display: inline：把块级标签变为了行内标签，但行内标签不能使用宽、高、内边距、外边距等特性-->
47
48 <!--块级标签转换为行内标签-->
49 <div style="height: 100px;width: 100px;display: inline-block">aa</div>
50 <!--display: inline-block：把块级标签变为了行内标签，又能使用宽、高、内边距、外边距等特性-->
51
52 <!--行内标签转换成块级标签-->
53 <span style="height: 100px;width: 100px;display: inline-block">bb</span>
54 <!--display: inline-block：使用这个以后块级标签也不占整行-->
55
56 <!--外边距-->
57 <div style="height: 100px;width: 100%;border: 1px red solid;">
58 <div style="height: 40px;width: 100%;margin-top: 30px"></div>
59 <!--margin-top: 30px:外边距-->
60 </div>
61 <!--height:只能是数字px-->
62 <!--width：可以写百分比-->
63
64 <!--内边距-->
65 <div style="height: 100px;width: 100%;border: 1px red solid;">
66 <div style="height: 40px;width: 100%;padding-top: 30px"></div>
67 <!--padding-top: 30px：内边距-->
68 </div>
69
70 <!--鼠标悬浮的小手-->
71 <input type="button" value="提交" style="cursor: pointer">
72 <!--style="cursor: pointer"：点击按钮时箭头变成小手-->
73
74 <!--class选择器，通过色差使文字不显示-->
75 <div class="c2" style="height: 100px;width: 100px;border: 1px red solid;color: white">双鱼座</div>
76 <!--color: white：控制文字颜色-->
77
78 <!--position分层-->
79 <div style=";position: fixed;top: 0;left: 0;right: 0;height: 48px"></div>
80 <!--position: fixed：固定在窗口某个位置不会动-->
81 <div style="height: 10000px;width: 100%;border: 1px red solid;margin-top: 48px">双鱼座</div>
82
83 <!--position组合定位-->
84 <!--position: relative与position: absolute连用-->
85 <div style="height: 100px;width: 100px;border: 1px red solid;position: relative">
86 <div style="height: 20px;width: 20px;position: absolute;bottom: 0;right: 0"></div>
87 <!--bottom: 0;right: 0：右下角-->
88 <div style="height: 20px;width: 20px;position: absolute;bottom: 0;left: 0"></div>
89 <!--bottom: 0;left: 0：左下角-->
90 <div style="height: 20px;width: 20px;position: absolute;top: 0;right: 0"></div>
91 <!--top: 0;right: 0：右上角-->
92 <div style="height: 20px;width: 20px;position: absolute;top: 0;left: 0"></div>
93 <!--top: 0;left: 0：左上角-->
94 </div>
95
96 <!--position分层排序-->
97 <div style="height: 200px;width: 200px;border: 1px red solid;position: relative">
98 <div style="height: 200px;width: 200px;position: absolute;z-index:999"></div>
99 <!--z-index:999：最高层-->
100 <div style="height: 200px;width: 200px;position: absolute;z-index:888"></div>
101 <!--z-index的值小于等于888，显示为蓝色-->
102 </div>
103
104 <!--overflow-->
105 <div style="height: 100px;width: 100px;border: 2px red solid;overflow: hidden">
106 <!--overflow: hidden:超过div的范围则隐藏掉-->
107 <img src="http://ui.imdsx.cn/static/image/dsx.jpg">
108 </div>
109
110 <div style="height: 800px;width: 800px;border: 2px red solid;overflow: scroll">
111 <!--overflow: scroll:超过div的范围则加滚动条-->
112 <!--overflow: scroll:如果div范围大于图片也会加滚动条-->
113 <img src="http://ui.imdsx.cn/static/image/dsx.jpg">
114 </div>
115
116 <div style="height: 800px;width: 800px;border: 2px red solid;overflow: auto">
117 <!--overflow: auto:超过div的范围则加滚动条-->
118 <!--overflow: scroll:如果div范围大于图片不会加滚动条-->
119 <img src="http://ui.imdsx.cn/static/image/dsx.jpg">
120 </div>
121
122 <!--background-->
123 <div style="height: 500px;width: 500px;border: 2px red solid;background-image: url('http://ui.imdsx.cn/static/image/dsx_Small.jpg');background-repeat: no-repeat"></div>
124 <!--background-image: url:div大小大于图片大小，会出现堆叠现象-->
125 <!--background-repeat: no-repeat：div大小大于图片大小也不会出现堆叠现象-->
126
127 <div style="height: 500px;width: 500px;border: 2px red solid;background-image: url('http://ui.imdsx.cn/static/image/dsx_Small.jpg');background-repeat: repeat-x"></div>
128 <!--background-repeat: repeat-x:横向堆叠-->
129
130 <div style="height: 500px;width: 500px;border: 2px red solid;background-image: url('http://ui.imdsx.cn/static/image/dsx_Small.jpg');background-repeat: repeat-y"></div>
131 <!--background-repeat: repeat-x:纵向堆叠-->
132
133 <div style="height: 20px;width: 20px;border: 1px red solid;background-image: url('http://ui.imdsx.cn/static/image/icon.png');background-repeat: no-repeat;background-position: 0 0"></div>
134 <!--background-position: 0 0：第一个值改变可以左右移动图片（x轴），第二个值上下移动图片（y轴）-->
135 </body>
136 </html>
作者：gtea
博客地址：https://www.cnblogs.com/gtea
浙公网安备 33010602011771号