4.选择器练习:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #l2{ color:red; } li{ background-color:blue; } input[type='text']{ background-color:green } #d2{ color:green; } *{ border: 1px solid blue; } .c1{ color:purple; } .c1,#d2,span{ background-color:green; } </style> </head> <body> <div>d1</div><div id="d2">d2</div><div class="c1">d3</div> <h3 class="c1">这是h3</h3> <span>s1</span><span>s2</span><span class="c1">s3</span> <input style="background-color:green;" type="text"/> <input type="password"/> <ul> <li>红烧肉</li> <li id="l2">水煮鱼</li> <li>宫保鸡丁</li> </ul> </body> </html>
测试结果：
5.选择器练习(续):
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /* 子孙后代选择器:body里面的div里面的div里面 的所有的span(包括子元素span和所有后代) */ /* body div div span{ color:red; } */ /* 子元素选择器: body里面的div里面的div里面 的所有子元素*/ body>div>div>span{ color:blue; } body>span{ color:yellow; } /* 伪类选择器 */ a:visited{/* 访问过 */ color:red } a:link{/* 未访问 */ color:yellow } a:hover{/*悬停*/ color:blue; } a:active{/*点击*/ color:green } </style> </head> <body> <a href="../imgs/1.jpg">超链接1</a> <a href="../imgs/2.jpg">超链接2</a> <a href="../imgs/3.jpg">超链接3</a> <a href="../imgs/4.jpg">超链接4</a> <hr> <span>s1</span> <div> <span>s2</span> <div> <span>s3</span> </div> <div> <span>s4</span> <div> <span>s5</span> </div> </div> </div> </body> </html>
测试结果：
6.颜色
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> h1{color: red;} h2{color: #ff0000;} h3{color: #f00;} h4{color: rgb(255,0,0);} h5{color: rgba(255,0,0,0.5);} </style> </head> <body> <h1>这是h1</h1> <h2>这是h2</h2> <h3>这是h3 </h3> <h4>这是h4</h4> <h5>这是h5</h5> </body> </html>
测试结果：
