2016年7月24日 星期日

Css-基本認知( 二 )_樣式宣告、選擇器

前一篇 :

那我們要如何去宣告 ?
那宣告的格式為何 ?

1 . 宣告樣式方法
選擇器 {
    <!-- 屬性 : 參數 ; -->
    樣式
}

2 . 我們知道公式後,要怎麼套用 ?

選擇器 : 簡單來說,我要把這樣式套用在哪裡。
樣式 : 字體大小、顏色...等。

接下來這篇介紹選擇器 :

  • Html 標籤
  • 物件名稱
  • ID 名稱
  • 子項選擇器
  • 後代選擇器
  • 通用選擇器
  • 多組選擇器


1 ) Html 標籤
p{
   color:red;
}

2 ) 物件名稱 : 選擇器前面有加 "."
.setColor{
   color:red;
}
<span class="setColor">Tom</span>

3 ) ID 名稱 : 選擇器前面有加 "#",但是 ID 多用於辨識元件或讀取參數
#setColor{
    <!-- 屬性 : 參數 ; -->
   color:red;
}
<span id="setColor">Tom</span>

4 ) 子項選擇器 : 某元件底下一層的元件 ( 只對一層 ),中間會用 : >
.ttable>li {
    <!-- 屬性 : 參數 ; -->
   border:1px solid red;
}
<ul class="ttable">
    <li>Car
        <ul>
            <li>TX</li>
            <li>MX</li>
            <li>HX</li>
        </ul>
    </li>
</ul>

5 )  後代選擇器 : 某元件底下所有被選擇到的元件 : 中間會用 : _ ( 空白 )
.ttable li {
    border:1px solid red;
}
<ul class="ttable">
    <li>Car
        <ul>
            <li>TX</li>
            <li>MX</li>
            <li>HX</li>
        </ul>
    </li>
</ul>

為了讓大家更能了解到 4 、 5 的差異














6 ) 通用選擇器 : 全部的標籤都會被套用到樣式,會使用 : *
*{
    border:1px solid red;
}

<ul class="ttable">
    <li>Car
        <ul>
            <li>TX</li>
            <li>MX</li>
            <li>HX</li>
        </ul>
    </li>
</ul>






7 ) 多組選擇器 : 共用相同的樣式,減少重複的風格樣式,會使用 : ,
h1,span{color:red;}

3 . 樣式權重
p{color:red;} /*權值為1*/
p span{color:green;} /*權值為1+1=2*/
.warning{color:white;} /*權值為10*/
p span.warning{color:purple;} /*權值為1+1+10=12*/
#footer .note p{color:yellow;} /*權值為100+10+1=111*/

同選擇器具權重 : 標籤遠近
<style>
p{color:red;}
p{color:green;} V
</style>

最重要 !important
<style>
p{color:red!important;} V
p{color:green;} 
</style>

歡迎轉載,請註明出處。

沒有留言:

張貼留言