昨日内容回顾:
1.CSS选择器实例:
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" 6 content="width=device-width, user-scalable=no, 7 initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 8 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 9 <title>CSS选择器练习</title> 10 <style> 11 div+.c1{ 12 color: greenyellow; 13 } 14 /*#d1~.c1{*/ 15 /*color: green;*/ 16 /*}*/ 17 /*div~.c1{*/ 18 /*color: blue;*/ 19 /*}*/ 20 /*.c3~.c1{*/ 21 /*color: aqua;*/ 22 /*}*/ 23 p:before { 24 content: '*'; 25 color: red; 26 } 27 p:after{ 28 content: 'kkk'; 29 color: mediumvioletred; 30 } 31 </style> 32 </head> 33 34 <body> 35 <p class="c1">div前面的c1</p> 36 <div id="d1" class="c3">第一个div</div> 37 <p class="c1">div后面的c1</p> 38 <p class="c1">div后面的c1</p> 39 <p class="c2">div后面的c1</p> 40 <p class="c1">div后面的c2</p> 41 <p class="c1">div后面的c1</p> 42 <div style="color: chocolate;"> 43 <p>kermit</p> 44 </div> 45 </body> 46 </html>
2.HTML标签的分类
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>HTML标签的分类</title> 6 <style> 7 #a2,#p2{ 8 height:200px; 9 color: red; 10 } 11 body{ 12 font-family:"Microsoft Yahei", "微软雅黑", "Arial", sans-serif; 13 } 14 #p2{ 15 font-size: 24px; 16 /* bold变粗 */ 17 font-weight: bold; 18 /*color: mediumvioletred;*/ 19 color: rgba(0,0,0,0.6); 20 /*字体下加下划线*/ 21 text-decoration: underline; 22 /*移动下标48px*/ 23 text-indent: 48px; 24 } 25 /*去掉下划线*/ 26 a{ 27 text-decoration: none; 28 } 29 /*光标悬浮加下划线*/ 30 a:hover{ 31 text-decoration: underline; 32 } 33 </style> 34 </head> 35 <body> 36 <div>div</div> 37 <div>div2</div> 38 <p>p</p> 39 <p>p</p> 40 41 <hr> 42 <a href="">111111111111111111111111111111111111111111111111111111111111111111111111111</a> 43 <a href="" id="a2">a2</a> 44 <p id="p2">上海这个地方比得上希腊神话里的魔女道，男生会变成女生！------《老男孩》</p> 45 <p id="p3">上海这个地方比得上希腊神话里的魔女道，男生会变成女生！------《老男孩》</p> 46 <hr> 47 <span>span1</span> 48 <span>span2</span> 49 50 51 </body> 52 </html>