教學 | 輕鬆上手CSS(II) - 叫叫ABC篇
建議你先閱讀：
1.學css前要準備什麼?
2.輕鬆上手css(I) - 不可不知篇
相信大家對於「叫叫ABC」這五個字都非常的熟悉，甚至以前也有進行過相關的訓練。只是這次的「叫叫ABC」不是拿來應用於急救上，而是當成CSS教學的一部分。我想很多人應該都會對此抱持疑問，不懂「叫叫ABC」怎麼可以跟CSS做結合吧！歡迎繼續看下去，就知道其中奧妙囉~
我這次要跟大家分享的CSS概念非常的簡單，就是如何在靜態以及動態的網頁上呼叫css，還有對自己寫的css要抱持怎樣的態度。
★叫(自定選擇器)
要呼叫css的方法有兩種，同樣的沒有說哪種方法比較好，端看大家的撰寫習慣。第一種呼叫方式就是直接在網頁裡頭呼叫css。舉例如下：
- <style type="text/css">
- <!--
- .aa { /*class=aa*/
- color: red; /*字體顏色*/
- font-size: 13px; /*字體大小*/
- }
- #bb { /*id=bb*/
- letter-spacing: 4px; /*文字間距*/
- line-height: 200%; /*文字行距*/
- }
- -->
- </style>
- </head><body>
- <div class="aa">紅色字體，13號大</div>
- <p id="bb">間距4像素<br />行距200%</p>
重點在於css要被＜style＞包覆著
- <style type="text/css">
- <!--
- css要寫在這裡
- -->
- </style>
★叫(載入外部css檔案)
這個方法比較多人在使用，因為我們只要修改一個css檔案，就可以同時修改許多網頁的外觀樣式。前提當然是這些網頁都要引用這份css檔案啦!!
而載入外部css我們又可以分成兩種方式：
一、直接連結樣式表
1.舉例來說，假設我現在要製作一份css檔案，先將以下語法複製到記事本
- .aa { /*class=aa*/
- color: red; /*字體顏色*/
- font-size: 13px; /*字體大小*/
- }
- #bb { /*id=bb*/
- letter-spacing: 4px; /*文字間距*/
- line-height: 200%; /*文字行距*/
- }
接著存檔為style.css (副檔名必須為.css)
仔細觀察，但第一種呼叫方式不同的地方在於少了
＜style type="text/css"＞..＜/style＞的包覆。只要你將css存成一個獨立的檔案，都不需要有style標籤的包覆。
2.接著在要呼叫style.css的網頁裡頭加入以下語法：
(此語法需放置在＜head＞...＜/head＞標籤裡頭唷)
- <link rel="stylesheet" type="text/css" href="style.css">
假設現在有三張網頁都同時載入了這個style.css的檔案，只要你修改了這份css，三張網頁都會同時變更，在效率上也大福提昇了許多。
二、匯入樣式表
同樣也是先做好一個style.css的檔案，接著在要呼叫style.css的網頁裡頭加入以下語法：
(同樣放置在＜head＞...＜/head＞標籤裡)
- <style type="text/css">
- <!--
- @import url("style.css"); /*第一種寫法*/
- @import "style.css"; /*第二種寫法*/
- @import 'style.css'; /*第三種寫法*/
- -->
- </style>
@import總共有三種寫法，看自己習慣哪一種就用哪種吧。
而@import這個語法有一個特別的地方，就是他除了可以在網頁裡頭使用，也可以在css檔案裡頭使用，亦即可以在css裡再呼叫一個css檔案。
★A(Active啟動)
以上步驟完成後，請打開瀏覽器觀看效果。雖然簡易的css不太會有錯誤，但是css可不是上傳之後就萬事太平阿！如果碰到複雜的圖層、定位這些css，可能就會有跑位的問題。所以寫好css記得一定要啟動觀看他的效果，邊寫邊修正以達到最好的視覺效果。
假設你是使用FireFox瀏覽器，可以下載Web Developer或者是Firebug這兩款功能強大的css在線編輯來輔助你編輯css。
★B(Believe相信)
要對自己寫出來的css有信心，不要因為一時的挫折就放棄學習css。他們不是什麼刁鑽艱深的語言，你唯一需要的就是不斷的練習、練習，以及練習。
★C(Css)
「叫叫ABC」：網頁或是連結呼叫後，請啟動，並且對自己所撰寫的css有信心！
這就是今天我想跟各位分享的「叫叫ABC」，其實眼尖的人都應該瞭解到重點在於前面的兩種呼叫方式。之前就在想說應該要先把怎麼呼叫css寫出來讓大家瞭解，可是光寫這樣好像又過於貧乏，恰巧腦海閃過了「叫叫ABC」，所以就張冠李戴將這個口訣移植過來XDD
當然也希望透過這個簡單的「叫叫ABC」可以讓大家對呼叫css的方式更加的熟悉瞭解。最後如果有任何問題也歡迎提出讓我們一起做討論唷^^
呱呱~*
我以為是CSS(II)是新出的第二代CSS。XD
不是當過兵的人才會知道叫叫ＡＢＣ？
@Arno Ruan:
嗯，你想太多了(笑
@desw:
沒阿
我國中就上過了耶，高中也有上一次，大學也有@@
在醫院最怕聽到叫叫ABC~
@Li+Chi:
這樣表示...有事發生了....
@Li+Chi:
我也很怕。
@妤:
別理我好了 我不知道我再幹麻= ="恍神
@Li+Chi:
在醫院還會聽到這個口訣嗎@@
我還以為只有在游泳池旁之類的地方才會聽到。
@妤:
@藍兒:
敢情樓上兩位聊起天來了XDDD(大笑
我也很怕+1
因為我全忘光了
這....這... 好口訣XD"
@muki:
其實醫院隨時會有考試，當然內容沒這麼單純。
不會聽到叫叫ABC啦..會聽到廣播..
比如：地下室7-11前999或7979或其它醫院急救代號....
最近為了醫院評鑑，幾個月前我們家護理部主任帶著安妮出巡病房，直接把假人丟在病房走道上...測試大夥兒叫叫ABC的臨場反應跟流程....實在是.....@@
@ajneok:
有幫助你方便記憶嗎XD
@藍兒:
原來如此
藍兒也是在醫院工作嗎@@???
@Li+Chi:
原來進入醫院也要隨時檢測自己會不會
我還以為進入醫院之後，叫叫ABC已經變成常識了，不會的人要打屁股XD