HTML学习之==>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;background-color: blue"></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;background-color: red;display: inline">aa</div> 46 <!--display: inline：把块级标签变为了行内标签，但行内标签不能使用宽、高、内边距、外边距等特性--> 47 48 <!--块级标签转换为行内标签--> 49 <div style="height: 100px;width: 100px;background-color: red;display: inline-block">aa</div> 50 <!--display: inline-block：把块级标签变为了行内标签，又能使用宽、高、内边距、外边距等特性--> 51 52 <!--行内标签转换成块级标签--> 53 <span style="height: 100px;width: 100px;background-color: red;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%;background-color: red;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%;background-color: blue;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=";background-color: greenyellow;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;background-color: red;position: absolute;bottom: 0;right: 0"></div> 87 <!--bottom: 0;right: 0：右下角--> 88 <div style="height: 20px;width: 20px;background-color: blue;position: absolute;bottom: 0;left: 0"></div> 89 <!--bottom: 0;left: 0：左下角--> 90 <div style="height: 20px;width: 20px;background-color: pink;position: absolute;top: 0;right: 0"></div> 91 <!--top: 0;right: 0：右上角--> 92 <div style="height: 20px;width: 20px;background-color: green;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;background-color: red;position: absolute;z-index:999"></div> 99 <!--z-index:999：最高层--> 100 <div style="height: 200px;width: 200px;background-color: blue;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>
