【CSS教學課程 (入門篇)】8個章節 - 由淺入深學習CSS

這是一篇全面，適合新手看的CSS教學入門課程（2021年更新）。

在這篇文章，你會學習到：

• CSS的基本概念
• CSS Selector
• CSS Statement 文字篇
• CSS Statement 實用篇
• CSS Box Model
• CSS Position
• 其他CSS
• Responsive CSS

我們會從新手角度，分開8個章節，由淺入深，教授你所有你要知道的CSS編程知識。

準備好了嗎？我們開始吧！

目錄

第1章

CSS基本概念

第2章

CSS Selector

第3章

CSS Statement 文字篇

第4章

CSS Statement 實用篇

第5章

CSS Box Model

第6章

CSS Position

第7章

其他CSS

第8章

Responsive CSS

第1章CSS 基本概念

CSS可以讓HTML更美麗。

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

CSS就如設計排版工具，只要掌握得好，你通過CSS設計出各種精美的網頁。

讓我帶大家由淺入深，去學習CSS吧！

讓我們先來看看，CSS的基本概念。

CSS 基本概念

當我們學懂了HTML後，下一步就需要學習CSS。

(如果你不懂HTML，可以先看看：HTML教學課程 -入門篇)

學習CSS的作用是，在製作一個網站外觀時，能把外觀製作的更美觀一些。

首先，我們打開Visual studio code，我想你試試在你的Code Editor上，跟我一起輸入來學習。

我們一起開一個新的文件，這個文件可以選擇放置在你的桌面中，然後新增一個「CSS」的文件夾。

之後，我們打開Visual studio code，按File -> Open，

來打開這個「CSS」的文件夾。

然後在CSS右手邊的空白位，右鍵開立一個新文件，叫「index.html」。

然後嘗試一下功能是否正常，比如輸入

123

來看看。

儲存完後，大家可以嘗試一下用Chrome來打開這個File文件來看看。

如果在Chrome看到「123」，就代表你己經成功設定這個文件檔。

學CSS的第一件事，就在p這裡，隔一隔空格，

然後輸入：

style='color:red;'

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

你會發現了，通過輸入這個內容後，「123」文字原來會變成了紅色的。

原來，我們第一樣學習CSS的東西就是，

可以透過attribute，來為每個HTML元素加上CSS。

而每一項外觀的改變，都可以用不同的CSS statement去做。

比方說，有些CSS statement能改變字型的大小、有些CSS statement能改變顏色、有些CSS statement能改變透明度等等。

分開CSS和HTML

然而，實際寫CSS時，我們通常會把CSS和HTML分開。

我們一起來看看分開CSS和HTML的好處是什麼吧。

就像以下例子，假設現在你有很多個p Tag。

如果每一個p Tag中都有不同的CSS，那你的program就會很混亂(如下圖般)。

123

123

123

123

所以，關於CSS，有一個很重要的概念，

就是將HTML和CSS分開來輸入。

意思就是把圖中間這些style全部抽出來。

所以，現在大家一起跟我輸入，

我們會在文件最上的位置，製作一個叫style Tag的東西，

style Tag只需要製作一次便可以，

而在style Tag中輸入的東西，

就不再是HTML的內容了，而是輸入CSS的語法。

我們一起嘗試在style Tag中輸入:

如圖中的p{}，然後按enter。(下圖)

在p{}中輸入color:red，

p{color:red;}

儲存完後，大家可以嘗試一下用Chrome來開啟這個File文件來看看。

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

這個p{}是代表什麼呢？

原來，p{}就是CSS Selector。

CSS Selector可以讓檔案知道，在下面內容中，有哪一個HTML Element是需要被它指到的。

在上圖中這個環節中，p{}正是指示下面全部的p Tag。

而color:red;又代表什麼意思？

其實「color:red;」就是CSS statement，指示文字的顏色是紅色。
「color」是CSS statement的Property，而「red」就是該statement的Value 。

CSS Statement的寫法就是 property:value;

每一句CSS statement都會有一個分號，這樣一句一句地輸入。

就是這樣，我們便成功地，將HTML歸類為HTML，CSS歸類為CSS了。

其實，學習CSS有兩個困難的地方。

第一個困難的地方是，怎麼學寫CSS selector。
第二個困難的地方是，怎麼學寫CSS statement。

CSS selector要注意的地方，就是怎麼「正確地」寫出CSS selector。

因為有時候在你內文中，不會只有一個p Tag，而是會有很多其他的element。

那要怎樣才能明確地指中你要做style的Tag呢？

下一章就會與大家一起學習， 4種最常用的CSS selector吧。

第2章CSS Selector

CSS Selector是CSS中最繁複的概念。

因為它是概念上的東西，你必須完全明白才能使用。

就新手而言，CSS Selector共有4種，它們分別是：

• Element Type Selector
• Id Selector
• Class Selector
• Descendant Selector

準備好了嗎？我們開始吧！

Element Type Selector

上文提到，怎麼做才能明確地指中你要做style的Tag呢？

其實方法有四種，第一種，就是Element Type Selector。

這個輸入法是最簡單的，

例如上圖內文它是p Tag，只需在上面輸入「p{}」來作CSS的Selector。

再來，如果上圖內文是h1 Tag，那上面便輸入h1{}作CSS Selector便可以了。

所以，Element Type Selector要注意的地方是，

就是當CSS Selector指的地方，下文中就會指中內文的全部東西。

就如上圖中，當下文有3個h1的時候，CSS指中的h1，便會包含上圖中的3個的h1了。

假如有h1是在p Tag當中，也會同樣被影響到。

Element Type Selector會影響到所有的HTML element，無論這些HTML element有沒有被其他東西包著。

在這個例子, p中所有的h1，通通都被影響到。

假設，你創作一個不存在的Tag，

比如是：jack Tag，

同樣地，CSS也會明確指中jack Tag的位置。

如果有時候，大家只想指向其中一個p Tag，又要怎樣做呢？

比如是中間那個p Tag，

那麼，用以上CSS Selector，便行不通了。

因為你也知道，

Element Type Selector一指向，便會指向所有的p Tag(如上圖般)。

Id Selector

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

原來以上兩種功能：id與class，其實都是attribute，

兩種都是類似更改名稱的方法，這些attribute就是放到HTML之中。

現在，我們嘗試在2個p Tag中，分別加入兩個id：

第一個p Tag，輸入id='jack'，
第二個p Tag，輸入id='peter'。

然後我們在CSS style Tag中，更改為#jack。

這裡要注意一下，原來我們不能直接輸入「jack」，
因為輸入「jack」的意思，是指向下文中的jack Tag，這是錯誤的輸入法。

正確指向id的名稱，

是輸入「#」來指向其id，所以是輸入「#jack」。

儲存完後，大家可以嘗試一下用Chrome來打開這個File文件來看看。

是不是成功將第一個p Tag變成紅色字呢！

Id還有一個特點，

就係它是獨立的，獨一無二的設定來的。

比喻上圖中，HTML p Tag中id為jack，

那麼在這個文件當中，就不會有另一個element的id，可以稱為「jack」了。

Class Selector

明白了id Selector後，就要來到第三種方法，名叫Class Selector。

class與id的方法也十分相似的，

它們都是attribute來的，但當中的分別，我會在下文中一一解說。

我們一起嘗試在第三個p Tag中，輸入class='linda'，

123

然後在CSS style Tag中，更改成「.linda」。

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

儲存完後，大家可以嘗試一下用Chrome來打開這個File文件來看看。

是不是成功將第三個p Tag變成紅色字呢！

這裡你會發現到，
「#」是指向id的，
「.」是指向class的。

你可能會問，

為什麼id與class那麼相似，為何要分兩種CSS Selector呢？

其實，第一個特點是，class與id有著不同之處的，

id是獨一無二的，

而class可以有很多，不斷重複地使用。

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

比如上圖中，有3個p Tag中，都是class為linda，

那麼的CSS Selector，都會一同影響到全部的linda。

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

Class Selector的第二個特點是，同一個HTML element可以有很多個不同的class。

如上圖般，大家可以看到，

在輸入linda後，又可以輸入mary，更可以輸入paul。

每一個名稱與名稱之間，隔一隔空格便可以了。

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

這裡注意的是，這個class不是叫「linda mary paul」，

而是又可以叫「linda」，又可以叫「mary」，又可以叫「paul」。

如果我要指它的話，只需要輸入其中一個class便可以，

就如上圖中的「.mary」，也會成功指向其中的p Tag。

最後，還有一個特點，就是id與class是可以同時並存，

如果要指向上圖中的這個p Tag，

只需要指向輸入#peter，或者輸入.linda， 都可以指中同樣的HTML Element。

以上便是id selector與class selector的基本概念了。

Descendant Selector

其實，id selector與class selector也不是解決到, 所有selector上的問題，

所以這時候，就要來到最後一個selector，也是最複雜的selector來的，

名稱叫descendant selector。

為何是最複雜的selector呢？

我們一起來看看吧！

我們一起輸入div Tag，然後內層輸入h1 Tag及p Tag。

而在div外面也輸入另一個p Tag。

這個div會有一個class叫paul。

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

這時候你會發現，

原來selector .paul p會指到div中的p Tag, 而不是div外面的p tag。

Descendant selector就是格格。比方說, .paul p, 就是代表:

要指中所有的p Tag, 而這些p tag, 是需要讓class paul包著。

就如上圖中，

雖然會有兩個p Tag，

可是class=' paul p' ，是明確指明要有class paul中的p Tag。

所以你會見到「222」變成紅色字，而「333」是不會變成紅色字。

為何我會說明這個selector會很複雜呢？

原因是，這個selector可以無限延伸下去。

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

會怎樣複雜呢？

我嘗試在h1這裡，再加入一個span Tag，內文輸入「AAA」。

然後CSS Selector改為.paul h1 span，

.paul h1 span{color:red;}

你便會看到內文「AAA」更改為紅色字。

這裡會指所有span，而這些span必需要被h1包著，

而h1更要在paul中包著。

最後，有一點要留意的是，這個指法是不限層數的。

不限層數是什麼意思呢？

例如上圖中，輸入.paul span作為Selector，

同樣地，也會成功指中內文中的span的AAA變成紅色字。

雖然中間有一層是h1，但是沒有關係。

因為只要這個span，是被paul包著的，便會成功被指中。

另外一個例子，

只要span是被paul所包著，那麼，全部span都會被指中，就如上圖般。

以上這個，便是最複雜的descendant selector了。

大家好好練習吧！

第3章CSS Statement 文字篇

了解完CSS Selector後，就要正式進入學習CSS Statement。

在這個環節，你將會學習CSS Statement的文字篇：

• Font Size 字體大小、
• Letter Spacing 字距
• Line-Height 行距、
• Font-Weight 粗幼度、
• Text-decoration:underline 底線、
• Font Style 斜體、
• Opacity 透明度、
• Text-align:center 文字對應、
• Font-family 轉字型。

讓我們開始吧！

CSS 文字篇

CSS statement比較CSS selector相對簡單，

因為，如果你有不會的CSS statement，你其實可以通過Google來搜索，也會找到其寫法。

比如，大家可以看看這一個教學網站：w3schools.com/css

這是一個非常詳盡的CSS英文網站，你把它當成是CSS字典來用就好了。

由於CSS statement有那麼多，所以我們都要分門別類來學習。

第一個類別，便是CSS文字篇！

文字篇會有很多的CSS style，以下我會一步步教授大家。

首先，先輸入上圖中的p Tag與style Tag，

格式要與我上面的輸入手法一致，

開了style Tag後，

按圖中相對應得位置，來隔一隔空格，

輸入p{}，在{}中輸入「color:red;」。

p{color:red;}

而p Tag的內文可以輸入「This is a boy.」。

This is a boy.

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

上圖中輸入的顏色，一直都是用普通的紅色實色。

其實除了實色的紅色外，紅色也會有很多不同的深淺色調。

那麼，我們可以怎樣去表達出來呢？

我們先Google搜索一下「Color Picker」，

你會看到，原來每一種顏色，都有一種code來代表的。

這裡我們最常用的，就是HEX code，

你會看到#及6位英文數字「#XXXXXX」便是HEX code了。

例如上圖中的「#fcba03」，我們一起輸入：

我們把red更改為#fcba03，

所以是輸入「color:#fcba03;」。

p{color:#fcba03;}

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

儲存完後，大家可以嘗試一下用Chrome來開啟這個File文件來看看。

是不是成功將紅色更改成這個黃色呢？

除了HEX code外，另一個可以用RBG，

你會看到RGB有3隻數目字，比如圖中的252,186,3。

輸入方法就是「color:rgb(252,186,3);」，

p{color:rgb(252,186,3);}

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

還有一種常用的方法，就是rgba，這個rgba就是多了一個數目字，

這個數字是在0至1中間，就是透明度。

我們嘗試輸入0.4，0.4是有少許透明的效果。

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

這個功能什麼時候會用到呢？

就是當你只想改動顏色做透明的時候，就可以使用這個方法了。

Font Size 字體大小

除了改變字體顏色是最常用之外，第二個常用的，就是改變font size。

我們一起在CSS中輸入「font-size:40px;」，如上圖般。

p{font-size:40px;}

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

儲存完後，大家可以嘗試一下用Chrome來開啟這個File文件來看看。

我們成功地，將文字變大了。

這裡要注意的是，也會有人用em，或者用percentage作單位。

Letter Spacing 字距

學會了改變字體顏色及字體大細後，

接下來，要學習的便是letter spacing。

letter spacing的意思是字與字之間的距離(字距)。

我們一起在CSS中輸入「letter-spacing: 10px;」，如上圖般，

p{letter-spacing: 10px;}

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

儲存完後，大家可以嘗試一下用Chrome來開啟這個File文件來看看。

我們成功地，將字之間的距離增加。

這種效果，常見用於標題，

因為有時候，在設計上把字距拉闊，能增加一些現代感的效果。

Line-Height 行距

學懂了字距後，當然還有行距啦！

接著要學習的，就是line-height了。

什麼是line-height呢？

line-height其實是行與行之間的距離(行距)。

我們在p Tag內文中，

輸入來隔一隔行，再輸入「This is a girl.」。

然後輸入「line-height: 1.5;」，如上圖般，

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

儲存完後，大家可以嘗試一下用Chrome來開啟這個File文件來看看。

我們成功地，將行與行之間的距離增加。

其實你也可以選擇輸入pixel來達成，

比如輸入20px這樣子。

所以大家多多練習一下，

好好使用這個功能，來設計出美麗的文字排版。

Font-Weight 粗幼度

字體排版除了要掌握空間感的設計，少不了的當然是字體的粗幼度啦！

所以接著要學習的，就是font-weight，

意思就是字的粗幼度(分別於100-900)。

我們一起輸入「font-weight: 500;」，看看字體粗幼度500是怎樣的效果。

p{font-weight: 500;}

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

其實，改動字體效果的粗幼度，可以從100設定至900之內，大家可按設計風格，來調教合適自己想要的效果。

Text-decoration:underline 底線

我們學懂了粗幼度後，嘗試再增加一試有趣功能，比如是增加字體底線。

我們一起輸入「text-decoration:underline;」，

p{text-decoration:underline;}

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

看看是不是成功地增加了底線效果。

Font Style 斜體

有時候，為了因應設計效果，都會經用需要改動字體為斜體，

現在我們一起來看看，Font Style是怎樣輸入的。

我們一起輸入「font-style:italic;」，

p{font-style:italic;}

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

Font style最常用的效果，是把字型變為斜體，

輸入完後，看看是不是成功地變為斜體效果。

Opacity 透明度

如果以上功能都不夠已滿足做設計的效果，比如需要改變透明度。

那麼，我們就需要學習改變透明度的功能了。

大家跟我一起輸入「Opacity:0.5;」，

p{Opacity:0.5;}

將透明度改為0.5，

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

輸入完後，看看是不是成功地改造成有透明效果。

Text-align:center 文字align

有時候為了方便空間感的排位，有時候我們都會需要改動文字的版面位置，到底能怎樣做的呢？

這時候，我們就需要用text-align:center(文字align)的功能了。

這個功能是對應文字來align left/center/right。

我們會遲點再教這個text-align的細節，這裡大家先初步了解期功用為先。

我們一起輸入「text-align:right;」，

p{text-align:right;}

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

輸入完後，看看是不是成功地將整個p Tag內容改為靠右的版面呢！

Font-family 轉字型

來到最後的文字基礎教學了，除了以上不同種類的文字改動功能外，大家還需面學習的是，怎樣去轉變字型。

有關轉字型，之後我會再用一篇字型篇來說明，

這裡大家可以先了解怎樣輸入。

我們一起嘗試輸入，例如「font-family:sans-serif;」，

p{font-family:sans-serif;}

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

而上圖中的文字字型，本身內設定已是sans-serif字體。

然後，我們在sans-serif前面嘗試輸入「Arial,」，

這個意思便是向電腦指示，有「Arial」便用arial字型，

如果沒有，便改為使用「Sans-serif」字型。

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

除了Default的字型，大家更可以自行輸入import其他字型，
我們常用的方法是, 使用font face或Google font來import。

以上教學，便是基本文字的CSS Statement。

第4章CSS Statement 實用篇

只有CSS文字篇，其實是不夠的。

接下來，我們需要學習CSS的各種實用性功能。

在實用篇中，你將會學習到更多不同的CSS Statement，包括：

• CSS width、
• CSS height、
• CSS background、
• CSS overflow。

準備好了嗎？我們馬上開始CSS的實用篇吧！

CSS 實用篇

接下來，我們來到下一個CSS Statement，

會學習一些比較實用的東西。

實用篇會教授大家的包括有，

width、height、background、overflow。

我們首先輸入一個style Tag及div Tag，

然後有style Tag中輸入div{}，

內層輸入background:red;，
下一行輸入width:200px;，
下一行輸入height:200px;。

上文意思是background輸入成紅色，
width是代表寬度200px，
height是代表高度200px。

儲存完後，大家可以嘗試一下用Chrome來開啟這個File文件來看看。

我們成功地弄了一個紅色的box，

闊度與高度都是200px。

然後我們嘗試在div Tag內層，輸入更多的p Tag。

儲存完後，然後在Chrome refresh這個File文件來看看。

你會發現，這些p Tag的文字，有部分離開了紅色box。

這時候可以怎樣解決這個問題？

我們可以加一個Tag叫「overflow:hidden;」，

div{overflow:hidden;}

這功能是讓離開了紅色box的文字，不會再顯示出來。

另一個方法，是輸入「overflow:scroll;」，

div{overflow:scroll;}

多出了的文字，就會弄了一條scroll bar來包著。

第5章CSS Box Model

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

接下來，我們需要學習Box Model的各種功能。

Box Model共有3樣東西：

• Border、
• Margin、
• Padding。

準備好了嗎？我們馬上開始吧！

CSS Box Model

接著，我們還有更多的CSS Statement要學習，Box Model是整個CSS Statement中其中一個最常用的概念。

Box Model包括：

1. border
2. margin
3. padding

這些我們簡稱為CSS的box model。

Box Model是一個很重要的概念來的，

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

這裡要注意一下，
現實中的border線位不會那麼粗的，通常是一條黑線而已。

正常情況是不會show出來的，

即是沒有border的形狀的，大概意思是有一條無形的border線位。

了解到基本概念後，

現在我們一起動手輸入Box Model吧！

我們在style內輸入「border:5px solid black;」，

div{border:5px solid black;}

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

Solid是代表實色，顏色使用了black黑色，及5px的闊度。

儲存完後，然後在Chrome refresh這個File文件來看看。

你看不看到，我們成功弄了有一條黑色的border。

這種輸入法是左上下右同時間都有，

如果只想落其中一條線，又可以怎樣做呢？

我們把border輸入-top，黑線便會落到上面的位置。

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

還有border-left，是左邊位置。

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

接著是border-bottom，是下邊位置。

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

然後是border-right，是右邊位置。

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

之後，我們嘗試輸入padding:50px;

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

padding就是border入面的位置，

儲存完後，然後在Chrome refresh這個File文件來看看。

你會發現到內容123的上下左右，多了50px的紅色空白位置。

同樣地，padding也可以只輸入上左下右其中一面，輸入法如下：

padding-top，上面位置，
padding-left，左面位置，
padding-bottom，下面位置，
padding-right，右面位置。

另外還有一些比較懶的輸入法，

比如上圖這樣，輸入「50px 10px」。

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

意思是，50px代表上下位置，10px代表左右位置。

也有另一種懶人包的輸入法，就是輸入4個數字，

4個數字代表的位置，

是順時針方向：上、右、下、左。

比如上圖的：
上50px，
右10px，
下20px，
左40px。

這種較懶的輸入法，padding可以，border也都可以的。

除了改動Box內部，還可以改動Box的外部位置。

改動Box的外部位置功能，就是margin。

Margin就是上面，border外面的位置，

我們一起輸入：

margin:50px;

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

儲存完後，然後在Chrome refresh這個File文件來看看。

你會看到，margin就是上圖中綠色圈的位置。

Margin與padding及border一樣，也可以使用較懶的輸入法。

這裡大家也要注意的是，

有一種常用的輸法是：

margin:0 auto;

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

到底是什麼意思呢？

意思是margin的上下位置是0，
左右是auto(意思是將這個div置中)。

Auto這個輸入法，

很多都是配合有width的情況下使用。

學到這裡，大家都明白了什麼叫Box Model了嗎？

以上便是CSS Box Model的全部教學內容，

記得多加練習喔。

第6章CSS Position

接下來，我們會學習更多關於CSS Position的CSS Statement。

在這篇中，你將會學習到更多的CSS語法，包括：

• CSS Display、
• CSS Position。

準備好了嗎？我們開始吧！

CSS Display

CSS display是一個很常用的CSS語法。

首先我們整理以下介面輸入：

原來每一個element，本身也有一個東西叫display。

display通常是inline(平排)，或是block(隔行)。

每一個tag其實本身有已有一個display property。

例如div、p、h1是block；a、span是inline。

但我們可以透過CSS，把這個display property改變。

例如, 當兩個div Tag在一起的時候，你會發現是這樣顯示的。

如果想更改這個預設，

我們是可以輸入「display:inline-block;」，

div{display:inline-block;}

就會更改了它的預設顯示。

比如下圖這樣：

如果你把Display轉回block, 就會變為原先那樣。

現在嘗試輸入兩個a Tag，你會看到是平排的。

然後在style Tag的內層中，輸入a{}，

再輸入「display:inline-block;」，

現在，你會發現成功把a Tag的變成隔行顯示了。

另一個最常見的display是「display:none;」，

div{display:none;}

會將整個div Tag的內容被消失了。

這個功能其實非常好用的，

由其是有時需要更改模板，更改一些template，

而有時又改不了HTML，就只可以靠CSS去更改了。

當你不想要某一些元素，

你就可以用「display:none;」的方法來解決了。

CSS Position

接下來，我們就要學習CSS Position。

CSS的Position分為四種，

• postion:static、
• postion:relative、
• postion:fixed、
• postion:absolute。

第一種：postion:static

第一種position是「position:static;」，
就會把內容由上至下顯示，又不會重疊在一起的。

其實你平常不輸入position static，它本身就是預設為position static的。

第二種：postion:relative

第二種position是「position:relative;」，
Relative其實與Static很相似的，
只不過position relative可以再定義一個左上角座標。

什麼叫定義「左上角座標」？

我們嘗試一起輸入「top:400px;」及「left:400px;」看看，

上邊及左邊都加入了400px，你會看到整個內容都移了出走。

這個功能就是「position:relative;」了。

第三種：postion:fixed

第三種position是「position:fixed;」，
Fixed其實與relative都是一樣的，但fixed的特別位是可以把它定格。

什麼意思呢？

當我先輸入了很多個p Tag後，

你會現無論我怎樣移動視窗的上下位置，紅色box是定格在視窗這個位置的。

這就是「position:fixed;」的功用了。

第四種：postion:absolute

最後一個position，也是最複雜的一個，
就是「position:absolute;」。

這是一個比較複雜的方法，

我們首先整理一下以下格式。

然後跟著我一起輸入p{}，

內層再輸入：

position:absolute;
top: 10px;
left: 10px;

什麼是Position Absolute呢？

Position Absolute就是對比包著它的element，它的位置是什麼。

就如圖中的p Tag，包著的element就是這個div，

對比這個div，它現在的位置就是top 10 left10了。

同樣地，也可以把top與left，

更改輸入為bottom及right。

所以你會發現到，

position absolute和position fixed
都會把東西重疊在一起

position relative和position static
就不會將東西重疊在一起。

以上便是CSS Position的基本教學。

第7章其他CSS

大家學習完學習CSS Position篇後，其實還有其他CSS的功能也是經常用到的，

在CSS其他篇中，你將會學習到更多的CSS語法，包括：

• CSS Float、
• CSS 文字轉State、
• CSS 左右置中、
• CSS 跟隨次序。

準備好了嗎？我們開始吧！

CSS Float

來到其他CSS的部分，首先學習到的是CSS Float，

Float的功能，可以是將相片放在一些文字的旁邊。

首先，我們先去Google搜尋一張相片，比如是pig。

找到一張pig的相片後，

按著相片，右鍵「在新分頁中開啟圖片」，把這個連結放在img tag。

然後，再加上width 400的attribut：

，
然後再輸入p Tag，
內容輸入123。

如果這時候，你想將文字123改在圖片右邊，

又可以怎樣做呢？

你可以在style Tag中輸入img{}，
再內層中輸入「float:left;」，

img{float:left;}

儲存完後，然後在Chrome refresh這個File文件來看，

已成功將文字改在圖片的右邊作顯示了。

原來float這個CSS Statement，
就是說，對比下一個element， 這個HTML element的位置是在哪裏。

上圖例， img Tag的下一個element，
就是p Tag。

因此，img tag就會在p tag的左邊了。

我們嘗試輸入多3組p Tag，
你會發現，原來這個float會一直影響下去的。

所有的p Tag文字，都會改動去了圖片的右手邊。

假如不想第三個p Tag被影響到，

又可以怎樣做呢？

我們可以在第三個p Tag，使用「clear:both;」。

看！第三個p Tag現在不被影響了。

CSS 文字轉State

之後我們要學習的，就是CSS文字轉State的功能了。

CSS文字轉State這功能，最常用的是在a Tag之中，

首先，我們一起輸入一個a Tag：

click me

然後在style Tag，輸入a{}，內層再輸入color:red;。

a{color:red;}

你會看到click me是紅色的。

接著，在style Tag，隔一隔行，輸入a:hover{}，
內層再輸入color:green;。

你會發現，只要當你的箭咀移動到click me，
便會從紅色字自動變成綠色字。

可以在這個基礎上，增加更加多的CSS Statement，比如加入：

a:hover{font-size: 60px;}

當你的箭咀移動到click me，文字便會自動變大了。

CSS 左右置中

接下來要學習的，就是CSS左右置中功能。

一般而言，有分兩種情況：

第一種情況是，左右置中整個div Tag。
第二種情況是，左右置中div內的文字或圖片。

第一種情況 , 我們先給這個div一個闊度。

我們一起輸入div Tag，
內層p Tag，內容輸入123。

然後在style Tag輸入div{}，內層輸入：

width: 300px;
border: 1px solid black;
margin:0 auto;

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

做了一個box後，你可以使用「margin:0 auto;」，
便可以把整個div置中了。

第二種情況, 就是要置中一個div入面的文字。

在style Tag輸入div{}，內層輸入：
text-align: center;

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

這樣就會把div中的文字全部置中了。

大家這裡要注意一下，
這個「text-align: center;」不是輸入在p Tag那裡的，
而是輸入在包住它的div那裡的，才會正確。

而圖片也是一樣, 會被這個text align center影響到。

CSS 跟隨次序

CSS跟隨次序是什麼意思呢？

大家一起看看以下例子：

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

你會看到，這個p Tag，有兩個Selector也會指到它
一個是紅色，另一個是藍色。

好了, 我們再試試在p Tag中輸入：
style='color: yellow;'

現在, 有3個Selector也指到這個p Tag: 紅, 藍, 黃。它究竟會跟隨那一個CSS Selector呢？

你會發現，p tag是變了黃色的。

原來, 如果有同樣數個Selector指同一個HTML Element, 它會首先跟inline style。(也就是黃色)

如果沒有inline style，
下一個跟隨的，便會是同一頁style Tag中的Selector。

如果同一頁沒有style Tag，程式便會跟隨external CSS file。

做一下總結，CSS基本的跟隨次序是：

首先，是自身的style attribute，
接著，是同一個HTML的style tag，
最後，是外部CSS File。

此外, 程式會跟隨一個「更精準」的selector來指。

圖中有兩個selector，都是指到p tag。

div p{}與p{}那一個更精準？

當然是div p{}，所以你會看到顏色是指向了red那裡。

如果沒有「更精準」的Selector，
程式就會跟隨最底的那一個Selector，
就如上圖中的藍色。

如果你想override這個跟隨次序，可以怎樣做呢？

你可以使用「!important」。

你只需要在red後面，輸入：
「!important」

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

因為這是一條override了其他所有的跟隨次序。

溫馨提示一下，
這個!important不建議大家用太多，

因為當你把內文中，全部都用這方法輸入「!important」，
跟隨次序就會變得複雜, 變得都沒意思了。

第8章Responsive CSS

大家以為學習完其他CSS後，便學懂了基本CSS功能了嗎？

當然不是啦，其實以上都是PC版面的排版，其實還有mobile、responsive的CSS運作方法。

而mobile原理，其實與PC一樣，目的都是美化screen size，讓mobile的外觀也設計精美。

準備好了嗎？

我們馬上開始學習Responsive CSS吧！

Responsive CSS

接著，我們終於來到Responsive CSS分享，
會與大家分享mobile、responsive的CSS運作方法。

其實mobile原理與PC一樣，
目的都是美化screen size，讓mobile的外觀也設計精美。

我們通常會用media screen去做Responsive。

我們首先整理一下編程內容：

輸入一個p Tag，內文123，
輸入一個style Tag，內層p{}，再輸入color:blue;

這時候，123是出現blue顏色字。

接下來，在style Tag中開一行新行，輸入：
@media only screen and (max-width:900px) {}

內層再輸入：
color:red;

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

你會發現到，只要將螢幕拉放至900px的時候，
文字會從藍色變成紅字。

然後，我們在style Tag再輸入多一個：
@media only screen and (max-width:600px) {}

這次內層輸入：
color:blue;

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

你會發現到，只要將螢幕拉放至600px的時候，
文字會從紅色變回藍字了。

透過使用media screen, 你可以在不同的screen size, 行不同的CSS style, 從而去做到Responsive的效果。

最後注意一點是，
Screen的闊度是從高至底，
先輸入大一點px，接著才會輸入細一點的px。

而正常闊度輸入至600px已經足夠，
目前智能手機，大多都是300px至到600px。

第二種我們常會用到的，
就是max width。

現在我們輸入img，加入一張圖片連結，width為800px。

你會發現，螢幕拉細後，圖片不懂自行縮小。

所以，這時候，我們在style Tag中，
找回900px那個media screen，
然後隔行，輸入一個img{}，內文輸入：
max-width: 100%;

你會發現，
只要當螢幕拉至900px，
圖片的闊度會自動縮放至100%來顯示出來。因為圖片的最大闊度為100%。

有時候, desktop的東西太複雜的話，
你可以把整個div都display none，
然後，開一個新的div，就只有mobile才display block出來，
這樣也是我們做Responsive Layout的一個常用方法。

總結

恭喜你！

經歷了8個章節，你終於學習完了基本的CSS。

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

這是絕對正常的！

因為學習了基本CSS後，我們還要借助一些framework，例如bootstrap，才能輕鬆地編寫外觀。

今天，基本的CSS編程知識就去到這裡。

大家好好溫習以上的知識吧～加油！