MUKI space*

建議你先閱讀：
1.學css前要準備什麼?
2.輕鬆上手css(I) - 不可不知篇

相信大家對於「叫叫ABC」這五個字都非常的熟悉，甚至以前也有進行過相關的訓練。只是這次的「叫叫ABC」不是拿來應用於急救上，而是當成CSS教學的一部分。我想很多人應該都會對此抱持疑問，不懂「叫叫ABC」怎麼可以跟CSS做結合吧！歡迎繼續看下去，就知道其中奧妙囉~

我這次要跟大家分享的CSS概念非常的簡單，就是如何在靜態以及動態的網頁上呼叫css，還有對自己寫的css要抱持怎樣的態度。

★叫(自定選擇器)

要呼叫css的方法有兩種，同樣的沒有說哪種方法比較好，端看大家的撰寫習慣。第一種呼叫方式就是直接在網頁裡頭呼叫css。舉例如下：

間距4像素
行距200%

重點在於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＞標籤裡頭唷)

假設現在有三張網頁都同時載入了這個style.css的檔案，只要你修改了這份css，三張網頁都會同時變更，在效率上也大福提昇了許多。

二、匯入樣式表

同樣也是先做好一個style.css的檔案，接著在要呼叫style.css的網頁裡頭加入以下語法：
(同樣放置在＜head＞...＜/head＞標籤裡)

@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的方式更加的熟悉瞭解。最後如果有任何問題也歡迎提出讓我們一起做討論唷^^