本篇由讀者「鬍子科技學院」投稿,內容相當精彩實用,是讓一般初學者由淺到深一步一步學習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編程知識就去到這裡。
大家好好溫習以上的知識吧~加油!
留言 0