教學 | 輕鬆上手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
不是當過兵的人才會知道叫叫ABC?
@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