ANdyYoU_蹤雁_數位記錄本

所謂的CSS(Cascading Style Sheet) 串接樣式表大致上就是把「視覺呈現」和「網頁架構」給分開的一種技術。

可以想像CSS就是衣服而WebSite就是一個人。

人的架構當然是通常不會亂便啦！除非你去裝機械手臂(洛克砲) 囧"

如果說「人」Web還像原始的動物一樣只有最本來的樣式那不是遜斃了嘛！
這樣的比喻很貼切吧！XD

萬事起頭難，或許有很多人對CSS感受到很容易，感覺只是調調屬性值就搞定了。
但小弟看過比較多人遇到的狀況是，他不知道怎麼把偉大的創意實體化。
這邊有些建議：你可以選擇在Potoshop中做好視覺規畫再用網頁工具切割版型，不過也有很多設計師可以直接無中生有。
先寫好屬性在畫區塊。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
 Selectors 選擇器：(參考W3C資料)

對CSS有超基本的觀念之後就要進入正題，CSS的規則主要是兩個部分。
就是選擇器和屬性，要怎麼解釋呢？你可以把選擇器這個專業名詞想像成頭，手，腳。
就是一個名稱，如以下這樣的範例；(CSS檔案中)

頭 {
帽子:黑色鴨舌帽;
眼鏡:粗框;
}
手 {
手錶:SEIKO錶;
戒指:骷髏樣式;
}

「頭」指的就是選擇器，告訴伺服器這個Div裡面有的屬性該設什麼值。
所以可想而知這些屬性大多是規定好的，你總不會告訴我，我的頭要穿一雙黑色球鞋吧！？

非正式的解釋一次再來一次正式的：

h1{
  font-size:12px;
}

selector {
propery : value;
}

這樣就會指定h1這個選擇器裡面的字體大小為12px。

選擇器的種類：
對選擇器有了概念上的瞭解，接下來就要認識選擇器的種類，就像小弟比喻的，CSS就像是人的裝扮，你可以直接在Body上作花樣。
當然也可以在配件上在改良嚕～

選擇器一般分為

1. 類型選擇器(Type Selector)
2. 類「別」選擇器(Class Selector)
3. ID選擇器(ID Selector)
4. 後代選擇器(Descendant Selector)
5. 子選擇器(Child Selector)
6. 全域選擇器(Universal Selector)
7. 相鄰選擇器(Adjacent Silbing Selector)
8. 屬性選擇器(Attribute Selector)
9. 虛擬類別(Pseudo-Classes)
10. 虛擬元素(Pseudo-Elements)

1. 類型選擇器(Type Selector) ：要樣式化的HTML標籤，就是Selector的部分是h1或者p，em。

p {color : red;}

2. 類「別」選擇器(Class Selector)：如下這樣宣告

.i_am_class { font-size:120%; }

用最前面的那個「.」宣告。然後在HTML裡面

<div class="i_am_class">如此這段文字就會照上面的設定了～Cool ! </div>

3. ID選擇器(ID Selector)：跟Class差不多只是「.」變成「#」

#i_am_id { font-size:120%; }

下面是HTML唷

<div id="i_am_id">如此這段文字就會用ID的設定了～Good ! </div>

4. 後代選擇器(Descendant Selector)：這比較難說明，有點像是我只要換A衣服上B圖的顏色。
例如下面指定在li 底下的a 才會變動。

li a {
  text-decoration:none;
}

<div>
    <a>我是有底線的連結。</a>
　<li><a>我在<li>底下所以我的底線會不見喔!?</a></li>
</div>
注意：後代選擇器會壓過類型及類別選擇器，意思就是說即使

<li  class="有設定"><a>我在 li 底下所以我的底線會不見喔!?</a></li>

它並不會執行class的屬性 反而會執行 li a 沒有底線的設定喔

5. 子選擇器(Child Selector)：子選擇器使用「>」符號設定

div > #i_am_child{
  color : green;
}

只有當 i_am_child直接跟在div下層才會執行，若裡面多了其他元素就不會執行。

<div>
    <p>
      <div id="i_am_child">我沒有直接跟在DIV下面所以我的字不會變色</div>
    </p>
  <div id="i_am_child">直接跟在DIV下面所以我的字會變色<div>
</div>

注意：這部分要注意瀏覽器是否支援喔。

6. 全域選擇器(Universal Selector)：就是整個網頁都要接受這個設定。

*{
 font-family:Verdana, Arial, Helvetica, sans-serif;
}

7. 相鄰選擇器(Adjacent Silbing Selector) 請參考

[CSS]瀏覽器解讀CSS迷思？

8. 屬性選擇器(Attribute Selector)：

a [href]{
text-decoration:none;
}

每當HTML的a標籤裡有href就會用這個設定，就是這個超連結！


9. 虛擬類別(Pseudo-Classes)：很重要就是滑鼠移過去等等的效果。
如下　滑鼠移過去(hover)就會變成下面的設定，沒底線，顏色變紅色。

a:hover{
text-decoration:none;
color:#FF0000;
}

10. 虛擬元素(Pseudo-Elements)：這個比較少瀏覽器支援，作一些比較特別的設定如：

p:first-letter{
  font-size:150%;
  font-weight:700;
}

用在下面的html就會只有一個字被設定

<p>我  ←只有我會變大喔！</p>


本篇對所有的懸則器做了大略的介紹，有點長之後會針對需要慢慢對一些比較特別的作法在做介紹。
另外也可以參考Ｗ３Ｃ提供的解釋。最新最正確～

有任何寫得不好的地方也請各位先進指教！(謙虛一下)

後記：

每次都是這樣想寫的詳細一點卻又很懶惰。哇哩勒趕走懶惰蟲呀！
不過也可能是寫Blog有點在半作義工吧！XDDD