一、ID選擇器
ID選擇器使用"#"前綴標識符進行標識，后面緊跟指定的元素的ID名稱。
如
#box{ width:100px; height:100px;}
元素的ID名稱是唯一的，只能對應於文檔中一個具體的元素。在HTML中，用來構建整體框架的標簽應該定義ID屬性，因為這此對象一般在頁面中都是比較唯一的，固定的，不會重復，如Logo包含框，導航條，主體包含框，版權區域等。
二、ID設置頁面布局
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link type="text/css" rel="stylesheet" href="css/test4.css" /> <title>測試ID</title> </head> <body> <div id="header"><!--頭部模塊--> <div id="logo"></div><!--網站logo--> <div id="banner"></div><!--廣告條--> <div id="nav"></div><!--導航條--> </div> <div id="main"><!--主體模塊--> <div id="left"></div><!--左側通欄--> <div id="content"></div><!--內容--> </div> <div id="footer"><!--底部模塊--> <div id="copyright"></div><!--版權信息--> </div> </body> </html>
@charset "utf-8"; /* CSS Document */ #header{ margin:0 auto; width:960px; height:210px; border:solid 1px #000000; } #logo{ width:100px; height:100px; border:solid 1px #000000; float:left; } #banner{ margin-left:30px; float:left; width:800px; height:100px; border:solid 1px #000000; } #nav{ clear:both; margin:0 auto; width:800px; height:100px; border:solid 1px #000000; }
三、外部ID內部class屬性
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link type="text/css" rel="stylesheet" href="css/test3.css" /> <title>ID選擇器</title> </head> <body> <div id="father"> <div class="child1"></div> <div class="child2"></div> <div class="child3"></div> </div> </body> </html>
@charset "utf-8"; /* CSS Document */ /* 父級樣式*/ #father{ width:500px; height:500px; border:solid 2px blue; margin:5px; } /* 通過父級樣式設置父級樣式下的標簽div模式*/ #father div{ width:100px; height:100px; border:solid 1px red; padding:10px; margin:10px; background-color:#0000FF; } /* 通過父級樣式設置父級樣式下的類*/ #father .child1{ width:100px; height:100px; margin:20px; padding:10px; border:solid 5px #FF00FF; background-color:#66FF00; } /* 通過父級樣式設置父級樣式下的類*/ #father .child2{ width:100px; height:100px; margin:10px; padding:10px; border:solid 5px #00FF00; background-color:#FF0000; } /*這里直接設置類樣式不起作用因為上面通過#father div已經設置過了，這里的類選擇器優先級小於標簽選擇器*/ .child3{ width:100px; height:100px; margin:10px; padding:10px; border:solid 10px #0000FF; background-color:#FF00FF; }
