1 属性选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div[egon*="2"]{ color:red; } .iten1{ background-colr:gold; } .item2{ color:blue; } div[egon~=alvin]{ color:red; } </style> </head> <body> <div class="item1 item2">DIV</div> <div class="c1" id="d1">fang</div> <div>jie</div> <div egon="yuan alvin">egon123</div> <div egon="alex">egon456</div> <span egon="123">egon</span> </body> </html>
2 伪类选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> <!--a:link{--> <!--color:green;--> <!--}--> <!--a:hover{--> <!--color:goldenrod;--> <!--}--> <!--a:active{--> <!--color:blue;--> <!--}--> <!--a:visited{--> <!--color:red;--> <!--}--> <!--p{--> <!--background-color:wheat;--> <!--}--> <!--span:after{--> <!--content:"";--> <!--display:block;--> <!--}--> <!--<!–.c1{–>--> <!--<!–width:300px;–>--> <!--<!–height:200px;–>--> <!--<!–background-color:wheat;–>--> <!--<!–}–>--> <!--.c1:hover{--> <!--background-color:gray;--> <!--}--> .box1,.box2{ width:300px; height:200px; } <!--.box1{--> <!--background-color:wheat;--> <!--}--> <!--.box2{--> <!--background-color:goldenrod;--> <!--}--> <!--操作的标签一定是悬浮标签的子元素--> <!--.outer{--> <!--width:300px;--> <!--border: 1px solid red;--> <!--}--> <!--.outer:hover .box1{--> <!--background-color:red;--> <!--}--> </style> </head> <body> <div class="c1"></div> <a href="#">hello world</a> <span>hello</span> <div></div> <a href="">click</a> <div class="outer"> <div class="box1"></div> <div class="box2"></div> </div> </body> </html>
3 继承
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ color:erd; } p{ color:darkgreen; } </style> </head> <body> <p>ppp</p> <div class="c1"> DIV <p>ppppp</p> <span>SPAN</span> <div>DIV</div> </div> </body> </html>
4选择器优先级
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> /*id:100 class:10 element:1*/ <style> p{ color:red； } #d1{ color:gold; } .c1{ color:green; } #d2{ color:blueviolet; } c4{ color:red!important; } #d2{ color:green; } </style> </head> <body> <p class="c1" id="d1">ppp</p> <div class="c2"> <div class="c3"> <p class="c4 c5" id="d2" style="...">p4</p> </div> <p class="p1"></p> </div> <p> <div>div</div> </p> </body> </html>
5 属性操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> h2{ <!--color:#8B5742;--> color:RGBA(255,0,0,0.5); width:200px; heeight:200px; } .c1{ color:#8B5742; width:200px; heeight:200px; } span{ width:200px; height:200px; background-color:goldenrod; } </style> </head> <body> <div class="c1">DIV</div> <h2 class="c2">H2</h2> <span>SPAN</span> <a href="#">click</a> </body> </html>
6 水平对齐
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p{ background-color:wheat; text-align:justify; } </style> </head> <body> <p>fang jie</p> </body> </html>
7 文本属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> <!--a{--> <!--text-decoration:none;--> <!--font-weight:700;--> <!--font-style:italic;--> <!--}--> <!--p{--> <!--word-spacing:20px;--> <!--letter-spacing:3px;--> <!--}--> <!--div{--> <!--background-color:wheat;--> <!--width:100%;--> <!--height:300px;--> <!--line-height:300px;--> <!--text-align:center;--> <!--}--> .btn{ width:30px; height:60px; background-color:grey; color:white; text-align:center; line-height:60px; font-size:30px; } img{ vertical-align:-6px; } </style> </head> <body> <!--<p>I am fang</p>--> <!--<a href="">click</a>--> <!--<div>H1H1H1</div>--> <div class="btn"> < </div> <div>title <img src="http://dig.chouti.com//images/logo.png" alt=""> </div> </body> </html>
8 背景属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ border:1px solid red; width:100%; height:600px; background:url("http://dig.chouti.com//images/logo.png") no-repeat center center; <!--background-image:url("http://dig.chouti.com//images/logo.png");--> <!--background-repeat:no-repeat;--> <!--background-position:center center;--> } </style> </head> <body> <div class="c1"></div> </body> </html>
9边框属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ width:100px; height:200px; border-right:3px dashed red; <!--border:3px dashed red;--> <!--border-style:dashed;--> <!--border-color:red;--> <!--border-width:5px;--> <!--border:3px dashed red;--> <!--border-right:3px dashed red;--> } </style> </head> <body> <div class="c1"></div> </body> </html>
10 列表属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> ul{ list-style:none; } </style> </head> <body> <ul> <li>111</li> <li>111</li> <li>111</li> </ul> </body> </html>
11 内外边距
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ width:200px; height:200px; background-color:wheat; padding:50px; border:10px solid red; margin-bottom:20px; } .c2{ margin-top:20px; whdth:200px; height:200px; background:green; padding:50px; border:10px solid blue; } .pager_3{ width:20px; height:20px; background-color:darkgray; padding:20; border-redius:20%; } </style> </head> <body> <div class="c1">DIV</div> <div class="c2">DIV</div> <div class="pager_3">3</div> </body> </html>
12 float属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin:0; } .c1{ width:100px; height:200px; background-color:wheat; float:left; } .c2{ width:200px; height:100px; background-color:green; float:left; } .c3{ width:150px; height:150px; background-color:goldenrod; float:left; } .outer{ width:200px; height:200px; background-color:green; margin:20px auto; } </style> </head> <body> <div class="c1"></div> <div class="c2"></div> <div class="c3"></div> <span class="c1"></span> <span class="c2"></span> <span class="c3"></span> <div class="outer"></div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> </body> </html>