CSS定義選取器

標籤：

1. ID與類
2. 層疊
3. 分組
4. 繼承
5. 上下文選取器
6. 子類別選取器
7. 其他選取器
8. 結構與注釋

   20.1 ID與類

   選取器是用於控制頁面設計的樣式.即ID選取器何類別選取器.

   一直以來,許多開發人員經常將ID與類混淆,或者不能正確的使用這兩種選取器,或者簡單的認為是一個代替另一個.這種認知是及其錯誤的.

    

   (1).應用ID

   每個ID在一個頁面中只能使用一次,作為某個元素的唯一識別碼.一般情況下,ID只用於頁面的唯一元素,如頁首,主導航條,布局區塊等.

   樣本:<p id="hightlight">This paragraph has red text.</p>

       相應的CSS代碼:

       #hightlight{

       color:#FFFFFF;

   }

    

   (2).將ID與選取器結合

   /*適合所有h2標題*/

       h2{

           color:#333;

           font-size:16px;

   }

   /*只適合title的h2標題*/

   h2#title {

       color:#eee;

   }

   相應的XHTML代碼:<h2>Title Of My Article</h2>

   <h2 id="title">Title Of My Article</h2>

    

   (3).ID的使用場合

       對於每個ID,每個頁面只能有一個元素使用該樣式,因此ID應該為每個頁面唯一存在並僅使用一次的元素不保留,

    

   (4).避免使用ID的場合

       當一個以上的地方需要使用同一CSS規則時,不應該使用ID.

    

   (5).應用類

       類可以無限次的使用,因此它是應用CSS的非常靈活的方法.

       <p class="hightlight">his paragraph has red text.</p>

       相關CSS代碼:

       .hightlight {

           color:FFFFFF;

   }

    

   (6).結合多個類和ID

   範例:

       <ul id="drinks">

           <li class="mix">Beer</li>

   <li class="mix">Spirtis</li>

   <li class="hot">Cola</li>

   <li class="hot">Lemonade</li>

       </ul>

   相應的CSS代碼:

   ul#drinks {

       color:FF6600;

   }

   .mix {

       Color:#999999;

   }

   .hot {

       Color:#333333;

   }

    

   (7).利用類改寫基本樣式:

       p{

           Color:#ff6600;

   }

   .bleached {

       Color:#ccc;

   }

   相應的XHTML代碼:

   <p>This paragraph has red text.</p>

   <p class="bleached">This paragraph has red text.</p>

    

   (8).直接將類連結到元素上

   p.bleached {

       color:red;

   }

   相應的XHTML代碼:

   <p class="bleached">This paragraph has red text.</p>

    

   (9).避免,適合

   對於class,如果多次重複使用或者使用子類別選取器，那麼就選擇class，如果是定義唯一性的標記，比如布局，那麼用id。

    

    

   20.2 層疊

   (1).外部連結實現層疊

       <link rel="stylesheet" type="text/css" href="css/one.css">

   <link rel="stylesheet" type="text/css" href="css/two.css">

   <link rel="stylesheet" type="text/css" href="css/three.css">

   (2).匯入樣式實現層疊

       @import url("one.css")

   @import url("two.css")

   @import url("three.css")

    

   注意點:必須牢記一個規則,越晚給的規則越重要.

    

   20.3 分組

   h1{

       Font-family:隸書,宋體,楷體;

       Line-height: 140%;

       Color:#333;

   }

   h2{

       Font-family:隸書,宋體,楷體;

       Line-height: 140%;

       Color:#333;

   }

   h3{

       Font-family:隸書,宋體,楷體;

       Line-height: 140%;

       Color:#333;

   }

   /*分組後*/

   h1,h2,h3{

       Font-family:隸書,宋體,楷體;

       Line-height: 140%;

       Color:#333;

   }

   /*分組例外*/

   h1{

       Font-style:italic;

   }

    

   20.4 繼承

   h1 {

       Color:#333;

   }

   <h1>This is the greatest heading <i>in the world</i></h1>

    

   從BODY繼承

   Body {

       Margin:10px;

       Font-family:隸書;

       Background:#000;

       Color:#fff;

   }

    

   20.5 上下文選取器

       h1{

           Color: #ccc;

   }

   i {

       Color:#000;

   }

   /*使用上下文選取器*/

   h1 I {

       Color:#000;

   }

    

   20.6 子類別選取器

   .box {

   color:red;

   }

   .box1 {

   font-weight:bold;

   }

           .box2 {

   font-style:italic;

   }

    

   <div class="box">Box</div>

   <div class="box box1">Box1</div>

   <div class="box box2">Box2</div>

   20.7 其他選取器

   (1).類型選取器

       p{color:black;}

       a{text-decoration:underline;}

       h1{font-weight:bold;}

   (2).後代選取器

       h2 i{

           color:red;

   }

   li a{

       text-decoration:none;

   }

   #main h1{

       Color:red;

   }

   (3).偽類

       a:link{color:blue;}

       a:visited{color:green;}

       a:hover,a:active{color:red;}

       input:focus{background-color:yellow;}

   (4).通用選取器

       *{

           Padding:0;

           Margin:0;

   }

   (5).進階選取器

       進階選取器,目前支援還不太完善,所以,對於網站功能很重要的任何元素上,應該避免使用這些進階選取器.

       1.子選取器和相鄰同胞選取器

       子選取器（只有其兒子才有效果，孫子沒有效果）

       #nav > li {background:url(bg.gif) no-repeat left top;}

       <ul id="nav">

   <li>Home</li>

   <li>Server

       <ul>

           <li>Development</li>

           <li>Consultancy</li>

       </ul>    

   </li>

   <li>Contact Us</li>

   </ul>

    

   相鄰同胞選取器:

   h1+p{font-weight:bold;}

   <h1>Main Heading</h1>

   <p>First Paragraph</p>

   <p>Second Paragraph</p>

    

   2.屬性選取器

       <strong title="Cascading Style Sheets">CSS</strong>

       strong[title] {border-bottom: 1px dotted #999;}

   strong[title]:hover {cursor:help;background:#ccc}

   20.8 代碼注釋與結構

   /*body styles*/

       body {

       Font-size:67.5%;

   }

    

   1.添加結構性注釋

   /*---------------------------------------------------

   Version: 1.1

   Author: andy budd

   Email:[email protected]

   Website:http:www.andybudd.com

   -----------------------------------------------------*/

    

   2.自我提示

   /*

   Use the star selector hack to give IE a different font size

   http://www.info.co.ph

   */

    

    

   布局結構：使用有意義的標記。

   表格成了一種布局工具而不是顯示資料的方式,人們使用區塊引述(blockquote)來添加空白而不是表示引用.Web很快就失去了意義,成了字型和表格標籤的大雜燴.而現在我們可以使用DIV+CSS來控制布局.

CSS定義選取器