CSS教學全攻略2019 - 12個課程

學習完HTML過後,下一步,就是要學習CSS!

如果你不懂HTML,請先參考:HTML教學全攻略2019 - 9個課程

CSS負責控制網頁的外觀,包括靜態與動態元素,以及手機板的外觀。

我叫Jack,是一位Awwwards認可得獎,有多年的編程教學經驗的編程員。

今天,這篇「CSS教學全攻略2019 - 12個課程」,將會從新手角度,分開12個章節,由淺入深,教授你所有你要知道的基本CSS編程知識。

如果你正在想學習CSS,看這篇文章就對了!

準備好了?我們開始吧!

1. CSS 基本概念

CSS 的全名為Cascading Style Sheets。主要作用為讓你的HTML變得更美麗。例如,加上顏色,大小等等。

首先,我想你試試在你的Code Editor上輸入:

<p style="color:red">This is some content</p>

然後,到browser看看,是不是該p tag變成紅色了?

原來,我們可以透過attribute,來為每個HTML元素加上CSS。

我們會利用一個名為style的attribute。而這個attribute的value,就是一句或多句CSS Statement。在以上的例子,CSS Statement 就是color='red',代表文字變紅色的意思。

透過attribute去放CSS,看似很簡單,但我卻不建議你太常使用。

為什麼?

因為當你的source code有大量HTML,而每個HTML又有對應的CSS的話,你的Source Code就會變得非常混亂!

因此,正確的寫法,是應該把HTML和CSS分開來寫!

把HTML和CSS分開來寫,是一個很重要的概念。這樣做你可以更容易管理你的Source Code。

你可以在HTML任何一個位置(通常是最頂部),開一個style tag。在這個style tag內,你可以開始寫CSS。例如:

要緊記,一旦在style tag內,運行的就是CSS的語法。

CSS語法由兩樣東西構成:

  1. CSS Selector
  2. CSS Statement

CSS Selector用作選擇HTML中的元素,去做Styling。

Selector的寫法如下:

Selector{ }

在CSS Selector後,會用一個 { } 。在 { } 中間便是放CSS Statement。

在以上的例子,CSS Selector就是p。這代表整個HTML的所有p tag,都會受到其影響。

CSS Statement用作外觀的改動。其寫法是

property:value;

例如,color:red就代表文字要轉作紅色。通常每一句CSS Statment,都代表一個外觀改動。

最後,要注意每一句CSS Statement,就須要以 ; 作結尾。

在同一個selector內,你可以加數個CSS Statement。

你也應留意我寫CSS時的spacing。雖然並不是硬規則,但這樣寫會比較清晰易看。

實際應用時,我們通常會把整個style tag都放到另在一個檔案(副檔名為.css)。然後在HTML的

<link rel="stylesheet" type="text/css" href="style.css">

但暫時你並不需要這樣做,因為你還在學習階段。

2. CSS Selector

CSS Selector是CSS中最繁複的概念。因為它是概念上的東西,你必須完全明白才能使用。

就新手而言,CSS Selector共有4種。它們分別是:

  1. Element Type Selector
  2. Id Selector
  3. Class Selector
  4. Descendant Selector

1. Element Type Selector

Element Type Selector是最容易理解的一種Selector。你想指什麼tag,你就把那個tag的名字作為Selector。比方說:

如上面的demo,我想把p變成紅色,h1變成藍色。便可以用p及h1作為Selector,讓它指到對應的元素並進行styling。

要注意,Selector會把指到的全部元素都進行styling。比方說,一個p Selector可以令在該HTML中的所有p tag都受到影響。

接下來,我都會繼續使用codepen去展示源碼。Codepen上CSS的部份,就是你HTML檔上中的CSS。你可以按HTML看到HTML code,按CSS看到CSS code,在result看見browser上的結果。

2. ID Selector

由於Tag Selector會讓全部tag都受到影響。若你只需要指定選擇一個tag的話,你可以使用id或class selector。

首先,你透過使用一個名為ID的attribute,去為你想選擇的HTML Tag改名。例如,我把以下p tag的id設定為jack:

<p id='jack'>THis is some content</p>

接下來,你可以使用#jack作為selector,指到這個p tag。

ID Selector就是id前面加上#

要注意,ID Selector是unique的。意思是整個HTML檔只能夠有一個同名的ID。例如,你有一個p tag的id是jack。其他tag便不可以再以jack為id。

3. Class Selector

Class Selector和ID Selector很像。今次,你透過使用一個名為class的attribute,去為HTML Tag改名。例如,我把以下p tag的class設定為jack:

<p class='jack'>THis is some content</p>

接下來,你可以使用.jack作為selector,指到這個p tag。

class Selector就是class前面加上.

Class Selector並不是unique的。你有一個p tag的class是jack,其他tag的class也可以是jack。

你可以為同一個HTML tag加上多個class。你只要在每一個class之間加上一個空格便可。例如:

在以上的例子,你為p tag加上了兩個class:red和font50。

4. Descendant Selector

最後一種要介紹的Selector叫Descendant Selector。

請先看看以下的HTML:

從以上的例子,你的Selector是#jack p。這代表我們要選擇p tag,但這個p tag必須要被#jack包著。因此,只有頭一個被ID jack包著的p tag才變了紅色。

Descendant Selector會選擇最後的一個tag。比方說,#jack p的話,指的便是p tag。但這個p tag一定要被隔格前的tag包著,在這個例子,就是#jack

這個「包著」的概念也沒有限層數的。比方說以下的例子:

如上面的例子,第4個p tag不是直接被#jack包著,但也會被指到。

另外,這個「包著」的概念,也可以是多層的。

如以上的例子,#jack #peter p就是代表要選擇p tag,但這個p tag必須被#peter包著,而這個#peter也必須被#jack包著。

3. 基本的CSS Statement

學習好了CSS Selector後,下一步,我們便會學習CSS Statement。

CSS Statement雖然有很多,但其實相對易學。因為當你遇到什麼不懂,Google一下,便通常找到答案。比方說,你忘記了轉色的CSS怎麼寫,你在Google上搜尋change color CSS便可以了。

以下是一些基本,常用的CSS Statement:

文字篇

CSS Statement 註解
font-size:15px 文字大小, 以px作單位
color:#c9c9c9 文字顏色,使用hex code(可以google「Color Picker」找到每個顏色的hex code)
color:rgba (13,13,4,0.5) 文字顏色,使用rgba code,第4個數值為透明度
letter-spacing:10px 字與字之間的距離
line-height:1.5 行與行之間的距離
font-weight:300 字的粗幼度,數值為100-900
text-decoration:underline 加底線
font-style:italic 斜體
opacity:0.5 透明度
text-align:center 文字應align left/center/right (對應包著該文字的tag)

示範:

實用篇

CSS Statement 註解
width:150px 闊度
height:300px 高度
background:red 背景。但更常用的是放相,遲一下會講解更多
overflow:scroll hidden/scroll。當文字太多,多出來的文字要怎樣處理

示範:

其他的CSS Statment,我們會在接下章節繼續探討。

4. Box Model

Box Model是整個CSS Statement中其中一個最常用的概念。

Box Model共有3樣東西:

  • Border
  • Margin
  • Padding

簡單來說,每一個元素,比方說一段文字,它的邊界就是Border。Border與文字中間的空間就是Padding。Border外的空間就是Margin。

我們先看看Border的寫法:

比方說, border-top:10px solid black就是上面的border,是實色黑色,而且10px闊。

再看看padding:

border:1px solid black就是4邊也一樣,是1px實色黑色的Border。

Border與文字中間的空間就是Padding。

由於文字本身由左上角,由上而下開始顯示,所以padding-right與padding-bottom沒有起到作用。

最後,我們看看Margin:

Border外的空間就是Margin。

懶一點的寫法:

margin:10px 代表上,下,左,右margin都是10px

margin:10px 20px 代表上,下margin是10px,左,右margin都是20px

margin:10px 30px 20px 40px 代表上margin是10px,右margin是30px,下margin是20px,左margin都是40px

5. Display

display也是一個常用的CSS Statement。常見的value是none/block/inline/inline-block

display:none會把整個元素消失不見。

display:block會令元素與元素之間隔行顯示。

display:inline或display:inline-block會令元素與元素,於同一行顯示。

每一個tag其實本身有已有一個display property。例如div,p,h1是block。a,span是inline。但我們可以透過CSS,把這個display property改變。

inline與inline-block最大的分別是:inline不可以使用padding,而inline-block則可以。

6. 使用inspect element

在你利用CSS去修改外觀時,一定會遇到一個問題:我該使用什麼CSS Statement呢?而該數值又是多少?

在使用brackets或其他code editor去修改/新增CSS時,你不能即時看到效果,很不方便。

因此,我們通常會使用chrome的inspect element(檢查元素)方法,即時看看新增了的CSS,對外觀做成的影響。若果效果是你想要的話,便把那些CSS Statement複製,並儲存在你的檔案上。

試試吧!

首先,利用chrome開啟HTML檔。

然後,指著你要修改的地方,按右鍵->inspect element(檢查元素)

接下來,在左邊你可選擇你要修改的HTML。該HTML tag對應的CSS會在右邊顯示出來。

你可以在element.style上新寫CSS,或在已有的Selector上更改/新增CSS。

當你更改/新增CSS後,你會發現,新的改動會立即在browser上反映出來。但要記著這個轉變只是暫時的,當你一Refresh browser便會什麼也沒有。

因此,你必須把更改/新增了的CSS複製,並儲存在你HTML檔對應的Selector上。

在每個Selector旁,你更可以看到它的位置。如上圖的123.html:2便代表該Selector在123.html裡的第2行。

7. CSS Position

常用的CSS Position有4種。它們分別是static/relative/fixed/absolute。讓我們逐一去說明。

postion:static

postion:static是default的一種position方法。即使你不去定義,一開始全部tag都是position static的。

position static就是由上至下,左至右,一個一個把你的HTML tag顯示出來。

postion:relative

position relaive和position static相似。但是你可以使用left/top定義一個左上角座標。比方說:

如果該元素本身是在右下角的話,你也可以使用bottom/right去定義右下角的座標。

postion:fixed

position fixed基本上和position relative一樣,你都是可以自定義一個左上角或右下角座標。只不過,position fixed的元素,永遠也會停留在同一個位置(無論你怎樣scroll)。而且它不會理現時已有的其他tag,強行overlap在上面。

有時候,你看到一些menu或廣告,無論你怎樣scroll,它都會停留在左上或右下角。它們便是使用position fixed。

postion:absolute

position absolute是最難明白的一種position方法。意思是相對於包著它的element,它的位置在哪裡。

在以上的例子,.peter相對於.jack的位置,就是top 30px與left 50px。

外面包著的element,一定要是position relative(在以上例子就是.jack),入面的element才能使用position absolute。

8. Float

float常用作把文字放到圖片的旁邊。float的value可以是left/right/none。意思是對比起下一個element,我現在的位置在哪裡。

在以上的例子,img對比起下一個tag(p tag),它要在p tag的左邊。

由float會不斷影響接下來的element(在以上的例子,img會一直在左邊)。如果你不想接下來的element受到影響,可以使用clear:both

如以上的例子,.peter使用clear:both後,相片立即沒有再在文字的左邊。

9. 文字轉State

:hover是一個常用的轉State語法。請看看例子:

在以上的例子,當你mouse over「Click me」時,它便會運行hover內的CSS。

10. 左右置中

左右置中也是一個你常常要寫的CSS。

一般而言,左右置中共有兩種情況:

  • 左右置中一個div
  • 左右置中一個div內的文字或照片

左右置中一個div

要左右置中一個div,你可以使用margin:0 auto + position relative + width

margin:0 auto就是上下margin是0,左右margin是auto。換而言之,就是置中了。

但要留意,該element一定要是position:relative以及有一個闊度。

左右置中一個div內的文字或照片

另外一個常用的寫法,是左右置中一個div內的文字或照片。

我們會在包著文字或圖片的那一個div,使用text-align:center

要留意text-align:center並不是放在該文字或圖片本身。而是放在包著它們的div上。

11. CSS跟隨次序

最後一個基本概念,就是CSS的跟隨次序。

假設你有一個element,它受到多條不同的CSS Statment影響,它應該跟隨哪一條?

HTML跟隨CSS的次序如下:

  1. 自身的style attribute
  2. 同一個HTML的style tag
  3. 外部CSS File

簡單來說,HTML會先跟隨自身的style attribute。然後再看同一個HTML檔的style tag,最後才是跟隨外部CSS File。

在以上的框架下,HTML還會跟隨「較精準」的Selector。比方說:

在以上的例子,p tag會跟隨.jack p,而不是p的CSS Statement。因為.jack pp「較精準」。

在你寫code的時候,若果想某個CSS Statement override其他CSS Statement 。可以在該Statement後加上!important。例如:

!important不要亂用!太多!important的話,你的code會很亂。

12. 總結/下一步

恭喜你!經歷了這10多個章節,你終於學習完了基本的CSS。

然而,此刻如果你想用HTML和CSS去從頭開始,去製作網站的話,你還是會覺得很吃力的。

這是絕對正常的!因為學習了基本CSS後,我們還要借助一些framework,例如bootstrap,google font,fontawesome等,才能輕鬆地編寫外觀。

再者,你還有一些進階的CSS沒有學習,例如Responsive,CSS動畫等等。

但是,基本的CSS編程知識就去到這裡。大家好好溫習以上的知識,下次繼續吧!

你可能也會喜歡...

in 全部, 數碼行銷

SEO教學 - 不停免費為你工作的Sales

搜尋引擎最佳化(Search Engine Optimization,簡稱SEO) 是我非常愛用的一個行銷方法。其意思是讓你的網頁在搜尋器例如Google、Yahoo 等的自然排名增高。比方說,當你在Google 搜尋「網頁設計課程」,便會在頭幾項搜尋結果找到我們公司「鬍子科技學院」的網頁,從而認識我們。

加入我們的Email List

免費參加【網頁開發入門CRASH COURSE】線上課程!