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

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

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

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

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

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

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

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

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

然後嘗試一下功能是否正常，比如輸入<p> 123</p> 來看看。

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

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

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

然後輸入：

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能改變透明度等等。

上文提到，怎麼做才能明確地指中你要做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後，就要來到第三種方法，名叫Class Selector。

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

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

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

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

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

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

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

你可能會問，

為什麼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的基本概念了。

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 Tag的內文可以輸入「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;」。

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);」，

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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

width、height、background、overflow。

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

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

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

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

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

闊度與高度都是200px。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

如果想更改這個預設，

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

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

比如下圖這樣：

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

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

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

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

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

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

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

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

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

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

當你不想要某一些元素，

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

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

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

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

找到一張pig的相片後，

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

然後，再加上width 400的attribut：

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

又可以怎樣做呢？

你可以在style Tag中輸入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左右置中功能。

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

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

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

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

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

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影響到。

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

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

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

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

這時候，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的效果。

而正常闊度輸入至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的一個常用方法。