科技

CSS教學課程 (入門篇)8個章節 – 讓您由淺入深全面學習CSS

電腦王阿達
發布於 2021年07月30日13:53 • 電腦王阿達

本篇由讀者「鬍子科技學院」投稿,內容相當精彩實用,是讓一般初學者由淺到深一步一步學習CSS概念,如果您正在學習網站版型、架構的話,這篇會是相當重要的入門教學課程,有興趣的朋友也可以到這邊看原文。

這是一篇全面,適合新手看的CSS教學入門課程(2021年更新)。

廣告(請繼續閱讀本文)

在這篇文章,你會學習到:

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

我們會從新手角度,分開8個章節,由淺入深,教授你所有你要知道的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了。

大家好好練習吧!

第三章 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內文中,

輸入< br>來隔一隔行,再輸入「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,意思是加底線。

我們一起輸入「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包括:

  • border
  • margin
  • 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:

< img width='400' src='網址'>,
然後再輸入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編程知識就去到這裡。

大家好好溫習以上的知識吧~加油!

查看原始文章