所謂的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>


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

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

後記:

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

ANdyYoU_蹤雁_數位記錄本

andyyu0920 發表在 痞客邦 留言(8) 人氣()


留言列表 (8)

發表留言
  • showyin1213
  • 圖很可愛!
    (文章晚點在看XD)
  • To:咻咻
    感謝你的支持啦~

    andyyu0920 於 2008/03/14 00:39 回覆

  • JayH
  • = =+

    真的是,你的弱點是我的優點
    我的優點是你的缺點
    一定要用這種我看不懂的搞我嗎=口=
  • To:JayH
    看一看去改自己的網誌版呀XDD

    andyyu0920 於 2008/03/15 20:28 回覆

  • chenshin0719
  • wow!滿有趣的教學~加油^^v
  • To:chenshin0719
    希望大家看得懂~ XD
    收到加油!

    andyyu0920 於 2008/03/15 20:28 回覆

  • yoyocat24
  • 我想補充一點~~
    ID 和 class 唯一的差別就是~~
    ID 不能重複使用再同一個項目中,也就是ID的名稱在同一個網頁不能重複
    class 則可以((要多少就可以有多少~~

    希望這個對你有幫助囉^^
  • 嗯嗯 感謝你的補充

    實際上ID 不能重複 不是說校果出不來
    大部分的瀏覽器也沒有限制

    可是隨著AJAX的泛用 如果需要用到JS等 ID真的就不能重複了~

    andyyu0920 於 2008/07/01 01:06 回覆

  • 梓璇
  • 懶人報到

    很平易近人的解釋方式,
    不過還是要實際操作過後才懂問題在哪
    等我有空再來惡補一下
  • 嗯嗯~這就是經驗啦

    andyyu0920 於 2008/07/19 01:14 回覆

  • asungo
  • 太讚了
    幫你推文囉
  • 悄悄話
  • 路人甲
  • 獲益良多
    一定要推一下