css就是为页面穿着上华丽的衣服，俗称加特效，duang~~~
1.css样式导入方式有三种
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <!--从文件里导入样式，可对多个html操作，不常用，优先级最低--> 7 <link rel="stylesheet" href="commons.css" /> 8 <!--写在头部内，也是最常用的方式，优先级中等--> 9 <style> 10 .test{ 11 background-color: black; 12 color: white; 13 } 14 </style> 15 </head> 16 <body> 17 <!--直接写在标签内部，只对该标签有效，一般用于仅单独使用的样式，优先级最高！--> 18 <p style="background-color: red">类型一</p> 19 <p class="test">类型二</p> 20 <div>类型三</div> 21 </body> 22 </html>
1 div{ 2 color: blue; 3 }
2.选择器
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 /*标签选择器：使某类型的标签全部采用该样式*/ 8 p{ 9 color: blue; 10 } 11 /*id选择器:让某id类型的标签采用该样式，不常用，因为id需要唯一，可以直接在标签内部写样式*/ 12 #i1{ 13 color: black; 14 } 15 /*class选择器：使class为某值的所有标签采用该样式*/ 16 .test{ 17 color: red; 18 } 19 /*层级选择器：按对应层级匹配倒的所有标签采用该样式*/ 20 div p{ 21 background-color: aqua; 22 } 23 </style> 24 </head> 25 <body> 26 <p>1111111111</p> 27 <p>1111111111</p> 28 <p>1111111111</p> 29 <p>1111111111</p> 30 <p>1111111111</p> 31 <p id="i1">1111111111</p> 32 <div class="test">222222222</div> 33 <div class="test">222222222</div> 34 <div class="test">222222222</div> 35 <div class="test">222222222</div> 36 <div> 37 <p>ggggggggggg</p> 38 </div> 39 </body> 40 </html>
3.一些参数
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .img{ 8 /*导入一张图片*/ 9 background-image: url("3.gif"); 10 /*默认情况不显示，必须要设置长宽*/ 11 height: 600px; 12 width: 100%; 13 /*默认会用图片将设置的长宽铺满*/ 14 background-repeat: no-repeat; 15 } 16 </style> 17 </head> 18 <body> 19 <div class="img"></div> 20 </body> 21 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .c1{ 8 color: red; 9 background-color: aqua; 10 font-size: 32px; 11 /*高度没有%*/ 12 height: 300px; 13 /*宽度可以使用100%就是占全屏幕宽度*/ 14 width: 500px; 15 } 16 </style> 17 </head> 18 <body> 19 <div class="c1">aaaaaaaaaaaa</div> 20 <div style=" 500px"> 21 <!--占上层的宽度%--> 22 <div style=" 20%;background-color: greenyellow">test</div> 23 <div style=" 80%;background-color: palegoldenrod">test</div> 24 </div> 25 <!--颜色也可以用rgb编码写，具体对应可以百度--> 26 <!--border是边框，solid代表实体--> 27 <div style="height: 100px;background-color: #ddd;border: 1px solid red;"> 28 <!--margin代表外边距，本身不增加，padding为内编剧，本身会增加--> 29 <div style="margin-top: 10px;margin-left: 30px"> 30 <input /> 31 <input /> 32 <input /> 33 </div> 34 </div> 35 </body> 36 </html>
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=" 500px;height: 50px;border: 1px solid red"> 9 <!--float漂浮起来使内容都在同一行，但是当漂浮的长度大于总长度还是会再占下一行--> 10 <div style=" 20%;background-color: aqua;float: right">f</div> 11 <div style=" 50%;background-color: beige;float: right">a</div> 12 <div style=" 30%;background-color: beige;float: right">a</div> 13 <!--漂浮后会漂出母体，需要将其拉回来--> 14 <div style="clear: both;"></div> 15 </div> 16 </body> 17 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body style="margin: 0"> 8 <div style="background-color: #ddd;height: 5000px"></div> 9 <!--完全固定在某个位置，不论滑轮到哪里--> 10 <div style="position: fixed;bottom: 0;right: 0;">返回顶部</div> 11 <!--relative跟absolute配合使用可固定在某特定位置的特定位置.....我也不懂我在说些什么--> 12 <div style="position: relative;height: 500px; 300px;border: 1px solid red"> 13 <div style="position: absolute;bottom: 0;right: 0;">返回顶部</div> 14 </div> 15 </body> 16 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .modal{ 8 width: 400px; 9 height: 300px; 10 background-color: #dddddd; 11 position: fixed; 12 top: 50%; 13 left: 50%; 14 margin-left: -200px; 15 margin-top: -150px; 16 /*显示优先级*/ 17 z-index: 10; 18 } 19 .shadow{ 20 position: fixed; 21 top: 0; 22 left: 0; 23 right: 0; 24 bottom: 0; 25 background-color: black; 26 opacity: 0.5; 27 z-index: 9; 28 } 29 </style> 30 </head> 31 <body> 32 <input type="button" value="添加" /> 33 <div class="shadow"></div> 34 <div class="modal"> 35 <input type="text" /> 36 <input type="text" /> 37 <input type="text" /> 38 <input type="text" /> 39 </div> 40 <div style="height: 2000px"></div> 41 </body> 42 </html>
写的好乱呀.....