輕鬆上手CSS(II) – 叫叫ABC篇

輕鬆上手 CSS 系列文

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

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

叫(自定選擇器)

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

<style type="text/css">

</style>
</head><body>

<div class="aa">紅色字體,13號大</div>
<p id="bb">間距4像素<br />行距200%</p>

重點在於 css 要被<style>包覆著

<style type="text/css">

</style>

叫(載入外部 css 檔案)

這個方法比較多人在使用,因為我們只要修改一個 css 檔案,就可以同時修改許多網頁的外觀樣式。前提當然是這些網頁都要引用這份 css 檔案啦!!

而載入外部 css 我們又可以分成兩種方式:

一、直接連結樣式表

Step1.

舉例來說,假設我現在要製作一份 css 檔案,先將以下語法複製到記事本後存檔為 style.css ,副檔名必須為.css

.aa {  /*class=aa*/
  color: red; /*字體顏色*/
  font-size: 13px; /*字體大小*/
}

#bb {  /*id=bb*/
  letter-spacing: 4px; /*文字間距*/
  line-height: 200%; /*文字行距*/
}

仔細觀察,但第一種呼叫方式不同的地方在於少了<style type="text/css">..</style>的包覆。只要你將 css存 成一個獨立的檔案,都不需要被 style 標籤包覆。

Step2.

在要呼叫 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">
 
</style>

@import 總共有三種寫法,看自己習慣哪一種就用哪種吧。而 @import 這個語法有一個特別的地方,就是他除了可以在網頁裡頭使用,也可以在 css 檔案裡頭使用,亦即 可以在 css 裡再呼叫一個 css 檔案

A(Active 啟動)

以上步驟完成後,請打開瀏覽器觀看效果。雖然簡易的 css 不太會有錯誤,但是 css 可不是上傳之後就萬事太平阿!如果碰到複雜的圖層、定位這些 css,可能就會有跑位的問題。所以寫好 css 記得一定要啟動觀看他的效果,邊寫邊修正以達到最好的視覺效果。

B(Believe 相信)

要對自己寫出來的 css 有信心,不要因為一時的挫折就放棄學習 css。他們不是什麼刁鑽艱深的語言,你唯一需要的就是不斷的練習、練習,以及練習。

C(Css)

「叫叫ABC」:網頁或是連結呼叫後,請啟動,並且對自己所撰寫的css有信心!

這就是今天我想跟各位分享的「叫叫 ABC」,其實眼尖的人都應該瞭解到重點在於前面的兩種呼叫方式。之前就在想說應該要先把怎麼呼叫 css 寫出來讓大家瞭解,可是光寫這樣好像又過於貧乏,恰巧腦海閃過了「叫叫ABC」,所以就張冠李戴將這個口訣移植過來 XDD

當然也希望透過這個簡單的「叫叫 ABC」可以讓大家對呼叫 css 的方式更加的熟悉瞭解。最後如果有任何問題也歡迎提出讓我們一起做討論唷^^