Generating AI summary...
輕鬆上手 CSS 系列文
相信大家對於「叫叫 ABC 」這五個字都非常的熟悉，甚至以前也有進行過相關的訓練。只是這次的「叫叫ABC」不是拿來應用於急救上，而是當成 CSS 教學的一部分。我想很多人應該都會對此抱持疑問，不懂「叫叫 ABC」怎麼可以跟 CSS 做結合吧！
歡迎繼續看下去，就知道其中奧妙囉~
我這次要跟大家分享的 CSS 概念非常的簡單，就是如何在靜態以及動態的網頁上呼叫 css，還有對自己寫的 css 要抱持怎樣的態度。
叫(自定選擇器)
要呼叫 css 的方法有兩種，同樣的沒有說哪種方法比較好，端看大家的撰寫習慣。
第一種呼叫方式：直接在網頁裡頭呼叫 css。舉例如下：
<style type="text/css">
/* class=aa */
.aa {
color: red; /* 字體顏色 */
font-size: 13px; /* 字體大小 */
}
/* id=bb */
#bb {
letter-spacing: 4px; /* 文字間距 */
line-height: 200%; /* 文字行距 */
}
</style>
<div class="aa">紅色字體，13號大</div>
<p id="bb">間距 4 像素，行距200%</p>重點在於 css 要被 <style>...</style> 包覆著。
叫(載入外部 css 檔案)
這個方法比較多人在使用，因為我們只要修改一個 css 檔案，就可以同時修改許多網頁的外觀樣式。前提當然是這些網頁都要引用這份 css 檔案啦!!
而載入外部 css 我們又可以分成兩種方式：
直接連結樣式表
步驟一
舉例來說，假設我現在要製作一份 css 檔案，先將以下語法複製到記事本後存檔為 style.css ，副檔名必須為 .css
/* class=aa */
.aa {
color: red; /* 字體顏色 */
font-size: 13px; /* 字體大小 */
}
/* id=bb */
#bb {
letter-spacing: 4px; /* 文字間距 */
line-height: 200%; /* 文字行距 */
}仔細觀察，但第一種呼叫方式不同的地方在於少了 <style>...</style> 的包覆。只要你將 css 存成一個獨立的檔案，都不需要被 <style> 標籤包覆。
步驟二
在要呼叫 style.css 的網頁裡頭加入以下語法
<link rel="stylesheet" href="css/style.css" />
假設現在有三張網頁都同時載入了這個 style.css 的檔案，只要你修改了這份 css ，三張網頁都會同時變更，在效率上也大福提昇了許多。
A(Active 啟動)
以上步驟完成後，請打開瀏覽器觀看效果。雖然簡易的 css 不太會有錯誤，但是 css 可不是上傳之後就萬事太平阿！如果碰到複雜的圖層、定位這些 css，可能就會有跑位的問題。所以寫好 css 記得一定要啟動觀看他的效果，邊寫邊修正以達到最好的視覺效果。
B(Believe 相信)
要對自己寫出來的 css 有信心，不要因為一時的挫折就放棄學習 css。他們不是什麼刁鑽艱深的語言，你唯一需要的就是不斷的練習、練習，以及練習。
C(Css)
「叫叫ABC」：網頁或是連結呼叫後，請啟動，並且對自己所撰寫的css有信心！
這就是今天我想跟各位分享的「叫叫 ABC」，其實眼尖的人都應該瞭解到重點在於前面的兩種呼叫方式。之前就在想說應該要先把怎麼呼叫 css 寫出來讓大家瞭解，可是光寫這樣好像又過於貧乏，恰巧腦海閃過了「叫叫ABC」，所以就張冠李戴將這個口訣移植過來 XDD
當然也希望透過這個簡單的「叫叫 ABC」可以讓大家對呼叫 css 的方式更加的熟悉瞭解。最後如果有任何問題也歡迎提出讓我們一起做討論唷^^