CSS 語法、用法教學:完整版

過去的網頁設計師只要會用 DW 放上漂亮的圖片、編排文字的位置、大小、顏色等等就差不多了,大不了用 Flash 做一些動畫,再深入一點寫些 Action Script,但這些都已經是過去式了。

現在的網頁設計師會被要求要提供CSS樣式給後端工程師去套用,就算是用像 WordPress 這樣的套裝模板網站,也必須要懂 CSS 才能做各種版面的調整。

不過幸好 CSS 是一種很簡單的語法,我認為如果有 HTML 的概念,20分鐘就可以上手,2~3 小時就可以運用自如,基本上看懂以下前三個章節你已經差不多可以實作了,其它的不懂再查就好了。

宣告方式

宣告方式

CSS 的宣告方式是這樣寫的

選擇器 {
屬性a : 設定值a ;
屬性b : 設定值b ;
屬性c : 設定值c ;
}

選擇器的名字是自己取的,而屬性是一些像 color , font-size , background-color 之類的「可設定屬性」,這些是有固定寫法的,後面章節會介紹。

設定值則是搭配前面屬性該有的設定值格式,比如說 font-size : 18px; 意思就是字體的尺寸設定為18px。

這個概念就好像

A套餐 {
牛肉 : 5分熟 ;
蔬菜顏色 : 綠色 ;
白飯 : 500公克;
}

之後只要是A套餐裡面的牛肉都是5分熟,蔬菜都是綠色,白飯都是500公克。
*每一行設定值後面都要有一個「 ; 」不要忘了,常常語法會不作用都是漏掉「 ; 」

• Grouping

不一樣的選擇器可以一起共用一樣的樣式,比如說A套餐、B套餐、C套餐內容其實都一樣,只是老闆的花招,就可以這樣寫。

A套餐 B套餐 C套餐 {
牛肉 : 5分熟 ;
蔬菜顏色 : 綠色 ;
白飯 : 500公克;
}

假設現在要把 H1,H2,H3 三種不同大小的標題通通設成紅色,就要如下宣告。(選擇器之間用逗號隔開就好)

h1, h2, h3 {
color:red;
}

• 子代選擇器 (Descendant Selectors)

假設說「年菜套餐」裡面的「A套餐」提供的「蔬菜」是金色的,如果不是年菜套餐,平常的A套餐蔬菜顏色就是如之前設定的綠色。那就做如下宣告(選擇器之間用空格分開就好)

年菜套餐  A套餐 {
蔬菜顏色 : 金色;
}

假設現在要把表格 <td> 標籤裡面的粗體 <b> 標籤通通設為藍色,但是如果<b>標籤不是在<td>標籤裡面,則維持原本設定。

td b {
color:blue;
}
套用方式

套用方式

CSS 要叫進 HTML 裡面使用的方式有4種

行內套用 inline 直接放在那行html
嵌入套用 embed 放在head
外部連結(常用) external link 連結外部CSS檔
匯入套用(不建議) import 連結外部CSS檔

• 行內套用

行內套用,就是直接寫在那行html標籤裡面

<p style="font-size:12px; Font-color:red;">大小12px,顏色紅色的字</p>

顯示的結果為:
大小12px,顏色紅色的字

• 嵌入套用

嵌入套用就是先把 CSS 集中寫在 html 某處(通常是head),並且用<style type=”text/css”>為開頭,</style>為結尾。

<html>
<head>
<style type="text/css">
span {
background-color:yellow;
}
</style>
</head>

<body>
<span>背景為黃色</span>
</body></html>

顯示結果為:
背景為黃色

• 外部連結套用 (常用)

就是將 css 的宣告都寫在另一個檔案,並且取名為 XXX.css,然後在 HTML 的 <HEAD>….</HEAD>之間用以下的語法匯入.css檔案使用。

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

這個方式很常用於個大型網站,如此可以集中管理CSS樣式,比如說今天老闆突然說,根據算命師指示,要把整個網站字體都放大5倍、連結全部變為紅色,啞口無言之餘你也是要很快地完成工作。如果你的CSS是分別設在每一頁 HTML 裡面你就傷心了,如果你的 CSS 樣式全部都由同一個(或某幾個).css 檔案來控制,你就只要修改 .css 檔案中的某幾個設定就全部完成了,至於美感的事…老闆才不在乎。

• 匯入套用 (不建議使用)

功能和「外部連結套用」差不多,不同的瀏覽器處理的方式,但根據國外文章討論,「外部連結套用」(<link>)的效能比較好,甚至建議不要使用「匯入套用」(@import),這算是一個瀏覽器歷史的產物,過去的就讓它過去吧。

匯入套用的語法如下

<STYLE TYPE="text/css">
<!--
@import url(https://www.abc.com/XXX.css);
-->
</STYLE>

• 串接(cascade)

如果用多種不一樣的方式匯入 CSS,那優先順序是越靠近那一行html的宣告,優先順位越高。

假設我們用了行內套用、嵌入套用、外部連結、匯入套用的CSS,這4份CSS宣告都同時有在定義<b>標籤,但是每一個的定義都不一樣,這時候到底要聽誰的?
這時候行內套用,因為直接寫在那行HTML裡面,所以擁有最高優先權,接下來是寫在<head>…</head>裡面的CSS,再來是匯入套用,最後才是外部連結。
而瀏覽起本身的樣式表,則是順位最低的,比如說如果我們都沒有設樣式,連結文字通常是藍色的並且有一條底線,那就是瀏覽器本身的樣式表。

順位1 行內套用 inline 直接放在那行html
順位2 嵌入套用 embed 放在head
順位3 匯入套用(不建議) import 連結外部CSS檔
順位4 外部連結(常用) external link 連結外部CSS檔
順位5 瀏覽器本身樣式 Browser’s own stylesheet 瀏覽器本身
匯入套用以及外部連結,因為可能同時匯入好幾個樣式表,這個時候如果有重複定義的樣式,則是越後被匯入的有越高的優先權。
比如說有以下的CSS匯入:

<head>
<link rel=stylesheet type="text/css" href="AAA.css">
<link rel=stylesheet type="text/css" href="BBB.css">
<link rel=stylesheet type="text/css" href="CCC.css">
</head>

以上狀況以 CCC.css 最優先。

CLASS 與 ID

CLASS 與 ID

• CLASS

選擇器有兩種形式,一種是用「class」來套用,另一種用「ID」來套用。
這兩種在宣告CSS時寫法有點不一樣,要用class套用時,選擇器名稱前面要有一個「.」如:

.abc {
color: #0000FF;
}

套用語法如下:

<p class="abc">用class套用的情況</p>

我們也可以同時套用2個以上的 class,如下:

.aaa{
color: #0000FF;
}

.bbb {
font-size:18px;
}

同時套用到HTML時用以下語法

<p class="aaa bbb">套用多個class</p>

以上的結果顯示為:
套用多個class

• ID

用 id 語法套用時,CSS 的選擇器前面要加一個「#」,如下:

#apple {
color:#FF0000;
}

套用時用以下語法表示:

<p id="apple">用 id 選擇器</p>

• CLASS 和 ID 的差別

基本上 CLASS 的方式比較常被使用,因為 ID 選擇器在一個 HTML 文件裡面只能被使用一次,而 CLASS 則沒有限制。

但是 ID 選擇器可以被 Javascript 的函數 (GetElementByID)所辨識,因此如果你需要使用 javascript 的 GetElementByID,就必須使用 ID 選擇器。

尺寸單位(pixels,em,ex)

尺寸單位

CSS 常用的尺寸單位 px 和 em 都是屬於相對單位。

• px

「px」是以螢幕的點 (pixels) 為單位。

p {font-size:12px;}

• em

「em」則是關係到目前設定(預設)的字體大小,比如說目前已經宣告字體大小為 16px,你又在這個宣告範圍內設定某些字的大小為 10em,意思就是這些被你設定的字大小會變成160px,也就是10倍的意思。具體一點的說法就是,em 關係到他的「父」設定。

以下範例,<p>標籤裡面的字體會是160px。

body {font-size:16px}
p {font-size:10em}

• in, cm, mm, pt, pc

其他的絕對單位則是以實際生活中的單位為標準,如 in (英吋), cm(公分), mm(公釐), pt(point=1/72英吋), pc(picas),不過因為現在的顯示器五花八門,在不一樣的裝置上顯示出來的結果經常會有差異,絕對單位已經不再絕對,所以現在比較少用。

*如果沒有特別宣告,則 CSS 將默認單位為 px

字體 (font)

字體 (font)

字體(font)在CSS中常見的屬性有:

font-size 字體大小
color 字體顏色
font-weight 字體粗細
font-style 字體樣式(如:斜體)
font-family 字型(如:微軟正黑體)

• font-size

以數字和單位表示時如下:

p {font-size:10px;}
p {font-size:10em;}
p {font-size:10pt;}
p {font-size:200%;}

font-size 除了可以用數字和單位來表示,也可以直接指定下列的設定值,由大到小如下:
“xx-llarge”、”x-large”、”large”、”medium”、”small”、”x-small”、”xx-small”。

• color

在指定CSS文字樣式時,只需要用「color」就可以表示為文字顏色。

p {
color : red;
}
<p>紅色的字</p>

以上顯示為:
紅色的字

• font-weight

<p style="font-weight:800">粗800的字</p>
<p style="font-weight:100">粗100的字</p>

以上將顯示為:

粗800的字

粗100的字

• font-style

<p style="font-style:italic">italic 斜體</p>
<p style="font-style:oblique">oblique 斜體</p>

以上將顯示為:

italic 斜體

oblique 斜體

• font-family

<p style="font-family:verdana">verdana</p>
<p style="font-family:arial-black">arial-black</p>

以上將顯示為:

verdana

arial-black

*這個地方要注意,如果你設定的字體使用者電腦上面沒有,則會以預設的字體顯示。
以中文來說,目前不管 Mac 或是 PC 以及 ios 或 Android 大概都有「微軟正黑體」,所以如果想要黑體的效果,可以設定為「微軟正黑體」,如本網站就是以微軟正黑體為標準字。

文字( text, letter )

文字(text, letter)

• line-height (行高)

每一行之間的間距

p {
line-height: 50px;
}
<p>兩行之間<br>間距為50px</p>

以上將顯示為:

兩行之間

間距為50px

 

• letter-spacing

letter-spacing 為「每個字母」之間的相隔空間

<p style="letter-spacing:9px;">The spacing between letters</p>

以上將顯示為:

The spacing between letters
字和字之間的距離

 

• word-spacing

word-spacing 為詞 (word) 和詞 (word) 之間的距離

<p style="word-spacing:15px;">The spacing between letters</p>

以上將顯示為:

The spacing between words
在中文 則是 空白鍵 產生的空間大小

• text-align

文字對齊哪一邊,如齊左、齊右、齊中和分散對齊。

 

  • 齊左
p {
text-align:left;
}
<p>齊左,靠左對齊</p>

齊左,靠左對齊

 

  • 齊右
p {
text-align:right;
}
<p>齊右,靠右對齊</p>

齊右,靠右對齊

 

  • 置中
p {
text-align:cneter;
}
<p>置中,對齊中間</p>

置中,對齊中間

 

  • 分散對齊
p {
text-align:justify;
}
<p>分散對其就是齊頭齊尾的意思,比較常用在英文的場合。目的是讓整段文字看起來比較整齊,但是有人認為因為字距會受到微調,因而降低易讀性。A long long time ago. I can still remember how. That music used to make me smile. And I knew if I had my chance. That I could make those people dance. And maybe they'd be happy for a while. But February made me shiver. With every paper I'd deliver. Bad news on the doorstep. I couldn't take one more step. I can't remember if I cried. When I read about his widowed bride. Something touched me deep inside. The day the music died.So...-Don McLean-American Pie</p>

分散對其就是齊頭齊尾的意思,比較常用在英文的場合。目的是讓整段文字看起來比較整齊,但是有人認為因為字距會受到微調,因而降低易讀性。A long long time ago. I can still remember how. That music used to make me smile. And I knew if I had my chance. That I could make those people dance. And maybe they’d be happy for a while. But February made me shiver. With every paper I’d deliver. Bad news on the doorstep. I couldn’t take one more step. I can’t remember if I cried. When I read about his widowed bride. Something touched me deep inside. The day the music died.So…-Don McLean-American Pie

 

• direction

text-direction 和 text-align 的差別,可以解釋為 text-direction 是文字排列的方向,text-align 是文字對齊的方式。
text-direction 在中文環境不常使用,因為目前在顯示器上面的文字方向已經習慣為由左至右。
另外有些人可能會發現,text-direction 和 text-align 呈現出來的結果似乎一樣。

text-direction 的值有 「ltr」(由左至右) 和「rtl」(由右至左)

<div style="direction: rtl; background: #F2F2F2; width:300px;">
<div style="display: inline-block;">A</div>
<div style="display: inline-block;">B</div>
<div style="display: inline-block;">C</div>
</div>

以上將顯示為:

A
B
C
<div style="direction: ltr; background: #F2F2F2; width:300px;">
<div style="display: inline-block;">A</div>
<div style="display: inline-block;">B</div>
<div style="display: inline-block;">C</div>
</div>

以上將顯示為:

A
B
C

• text-decoration

p {
text-decoration:underline;
}

文字下方加底線,有人認為會和連結產生識別上的混淆

p {
text-decoration:text-decoration:overline;
}

文字上方加一條線,這個有點令人困惑

p {
text-decoration:text-decoration:line-through;
}

一條線畫過文字,跟刪除線一樣

p {
text-decoration:text-decoration:line-through overline underline;
}

三條線,順便示範可以一次給三個值,用空格隔開

 

• text-indent

text-indent 用來控制每一個段落的開頭要留多少空間,有點像在中文我們正式寫作文時,每一段起頭都要留兩個字的空間。

他的值可以宣告為數值或百分比。

p {
text-indent:30px;
}

以上 CSS 在 <p> 標籤裡將顯示為:

這一段的開頭要留30px的空間
第二行將不會留。

p {
text-indent:10%;
}

這一段的開頭要留整個寬度 10% 的空間
第二行將不會留。

 

• text-transform

text-transform 用來控制大小寫,它的值有:

p {
text-transform: capitalize;
}
單字的第一個字母
強制大寫
This is an apple.
p {
text-transform: uppercase;
}
所有字母
強制大寫
This is an apple.
p {
text-transform: lowercase;
}
所有字母
強制小寫
This is an apple.
p {
text-transform: none;
}
所有字母維持
原樣不改變
This is an apple.
顏色(color)

顏色

在 CSS 設定顏色的值有三種表示方式:

  • 十六進位值
  • 顏色名稱
  • RGB 比例

要查詢顏色代碼可以用 Google 搜尋「color picker」就會出現一個選色器,可以取得十六進位代碼和 RGB 比例值。

十六進位代碼如果前兩碼、中間兩碼,和後面兩碼,兩兩相同,則可以用三碼表示。比如說:#FF3366 可以用 #F36 表示。十六進位代碼通常以#字號作為開頭。

RGB 則有兩種表示方式,一種是每組由0~255之間的數字表示,另一種是用 0%~100% 表示

p { color:#e33679; }

#e33679

p { color:blue; }

blue

p { color: rgb(0,189,113); }

R:0, G:189, B:113

p { color: rgb(0%,80%,40%); }

R:0%, G:80%, B:40%

背景 (background)

背景

CSS 背景設定的背景可以有以下幾種屬性:

  • background-color
  • background-image
  • background-attachment
  • background-repeat
  • background-position
p {background-color: #FF6699;}

背景顏色

p {background-image:url(eye.png);}

設定背景圖案

p {
background-image:url(eye.jpg);
background-repeat: no-repeat;
}

設定背景圖案,並且不重複

p {
background-image:url(eye.jpg);
background-repeat: repeat-x;
}

背景圖片只有橫向重複

p {
background-image:url(eye.jpg);
background-repeat: repeat-y;
}

背景圖片只有



body {
background-attachment: fixed;
background-image: url(“eye.jpg”);
}
背景圖片將不隨捲軸捲動
body {
background-attachment: scroll;
background-image: url(“eye.jpg”);
}
背景圖片將隨捲軸捲動
body {
background-image: url(“eye.jpg”);
background-repeat: no-repeat;
background-position: top center;
}
背景將貼齊畫面左邊正中間:設定垂直位置時可以使用 top, center, bottom 三種值來定義上、中、下;水平位置可以用 left, center, right 來定義左、中、右。
body {
background-image: url(“eye.jpg”);
background-repeat: no-repeat;
background-position: 20% 50%;
}
背景將距離左緣20%距離,距離上緣50%距離:用百分比來定義背景位置時,第一個百分比是靠左 (x軸) 的距離,第二個是靠上 (y軸) 的距離。
連結(link)

連結 (link)

當我們在文字上設連結時,通常瀏覽器預設會是藍色的字加上一個底線,如果你是使用 WordPress 建置網站,則依據你設定的佈景主題會有不一樣的預設 CSS 連結效果。

連結有以下幾個屬性可以設定:

a:link 連結尚未被點擊時的樣式
a:visited 被點擊過的連結樣式
a:hover 滑鼠移到連結上時的連結樣式
a:active 連結被點下去時的樣式
<style>
a:link {color:#0033FF; text-decoration:underline;}
a:visited {color:#821DDA; text-decoration:underline;}
a:hover {color:#FF00FF; text-decoration:none;}
a:active {color:#15B9B6; text-decoration:underline;}
</style>

以上將顯示為:

項目清單 (list)

項目清單 (list)

list 有以下幾種屬性

  • list-style-type
  • list-style-position
  • list-style-image
  • list-style

• list-style-type

<ul style="list-style-type: decimal;">
<li>老虎</li>
<li>大象</li>
<li>小豬</li>
</ul>

以上將顯示為:

  1. 老虎
  2. 大象
  3. 小豬

list-style-type 用來表示清單前面的符號是哪一種,有以下幾種值:

none 沒有符號
沒有符號
decimal 1.  蟋蟀
2. 烏龜
disc • 黑點
• 嘿嘿
circle ◦ 空心圓圈
◦ 空空
square ▪ 實心方塊
▪ 實心的
upper-alpha A. 大寫英文字母
B. 英文
lower-alpha a. 小寫英文字母
b. 小小的
upper-roman I.  大寫羅馬字
II. 大寫羅馬字
lower-roman i. 小寫羅馬字
ii. 小寫羅馬字

• list-style-position

list-style-position 用來表示清單項目裡面換行時,要對齊上一行的第一個字 (outside) 還是對齊前面的項目符號 (inside)。若沒有設定,預設值為 outside。

<ul style='list-style-position:inside;'>
<li>大象<br>鼻子很長
<li>小豬還好
</ul>

以上將顯示為:

• 大象
鼻子很長
• 小豬還好

<ul style='list-style-position:outside;'>
<li>大象<br>鼻子很長
<li>小豬還好
</ul>

以上將顯示為:

大象
鼻子很長
小豬還好
盒子模式 (box model)

盒子模式 (box model)

盒子模式用來定義一個元素的邊界、邊框、內距等內容,我們可以把每一個畫面上的元素視為一個方塊,在 CSS 排版上是很重要的概念。

常用的相關指令為:

  • padding (內距)
  • border (邊框)
  • margin (邊緣)

margin-padding-border 示意圖

內距 (padding)

內距 padding

padding 就是內容和邊裝間的距離,可以分為上下左右分別設定個別距離。

#box {
padding-top:40px;
padding-bottom:10px;
padding-left:80px;
padding-right:30px;
border: 1px solid #000000;
width: 340px;
}
<div id="box">
上面距離邊框40 px,下面 10px。
</div>

以上會顯示為:

上面距離邊框40 px,下面 10px。

我們也可以把上下左右的內距寫在同一行,但是順序是順時針由上開始,不能弄錯 padding:上px 右px 下px 左px;
上面的 padding 值也可以寫為:

padding: 40px 30px 10px 80px;
邊框 (border)

邊框 border

border 的屬性有以下幾種:

  • border-color
  • border-width
  • border-style
  • border-top-, border-left-, border-bottom-, border-right-
  • border

• border-color

p {border-color:#0000FF;}

以上將顯示為:

邊框為紅色

• border-width

邊框的粗細,除了可以設定為值以外,也可以用 thin(細), medium(中), thick(粗) 來表示。

p {border-width:9px; border-style:solid;}

邊框9px

p {border-width:thin; border-style:solid;}

細邊框

• border-style

p {border-style:solid;}

實線

p {border-style:double;}

雙線

p {border-style:dashed;}

虛線

p {border-style:dotted;}

點線

p {border-style:ridge;}

凸線

p {border-style:groove;}

凹線

p {border-style:outset;}

凸起線

p {border-style:inset;}

陷入線

• border-top-, border-left-, border-bottom-, border-right-

邊框的四邊可以分開宣告屬性,再加上可以一次設定3種屬性的值,順序不拘。

p {
border-top:solid 5px red;
border-bottom:dotted 6px #C0C0C0;
border-left:dashed 8px #FF6699;
border-right:double 4px #a0a0a0;
}

邊框分開設定樣式

• border

如果4個邊都要宣告一樣的樣式,就只要用 border 屬性就好了,不用上下左右宣告4次。

p {
border:#FFCC99 3px solid;
}

4邊用一樣的樣式

邊緣 (margin)

邊緣 margin

邊緣(margin)屬性和內距(padding) 一樣,可以方上下左右設定,也可以用一行直接設定上、右、下、左,這個順序是固定的,不能隨意調動。

#boxmargin {
margin-top:30px;
margin-left:10%;
margin-right:20px;
margin-bottom:15px;
border: 1px solid #000000;
}
內容

小訣竅:將一個塊狀元素放到另一個塊狀元素裡面時,如果出現 margin-top 明明有設距離,但是卻貼在外元素的頂端。
以上面為例,當宣告 margin-top:30px ,但是橘色的框框卻貼在藍色框框的上緣,要怎麼處理。
這時候通常把藍色框框宣告邊框屬性就會解決了。比如說上面的藍色框框就宣告了 border: 1px solid gray; 的外框屬性。
上面兩個盒子的語法如下:

<div style="background-color: #0099cc; height: auto; width: 350px; border: 1px solid gray;">
<div style="border: 1px solid #000000; background-color: #ff9900; margin: 30px 20px 15px 10%;">內容</div>
</div>
表格(table)

表格 table

在 HTML 語法裡面和 table 有關的標籤,像是 table, th, tr, td 都可以宣告其內的 CSS 樣式,像是文字、背景、邊框等。

th {
background-color: #0099CC;
color:#FFF;
}
td {
border-bottom : dashed 1px #C0C0C0;
}
<table>
<tr>
<th>動物</th>
<th>飲食</th>
</tr>
<tr>
<td>大象</td>
<td>素食</td>
</tr>
<tr>
<td>老虎</td>
<td>肉食</td>
</tr>
<tr>
<td>小豬</td>
<td>雜食</td>
</tr>
</table>
動物 飲食
大象 素食
老虎 肉食
小豬 雜食

border-collapse

border-collapse 屬性有以下參數值

border-collapse:separate;
邊框彼此分開(預設值) 邊框彼此分開(預設值)
邊框彼此分開(預設值) 邊框彼此分開(預設值)
border-collapse:collapse;
邊框彼此合併 邊框彼此合併
邊框彼此合併 邊框彼此合併
border-collapse:inherit; 繼承自父層的 border-collapse 屬性值
(部分IE瀏覽器不支援,但有人在乎嗎?)

如果你想設定奇數列和偶數列有不一樣的樣式,可以如下宣告:

tr:nth-child(even) {background: gray}
tr:nth-child(odd) {background: white}

這樣偶數列就會呈現灰底、奇數列就會呈現白底。

 

位置 (position)

位置 position

用 position 來定義元素位置時,有意下幾種參數值。

• static

position:static;(預設值)
top:15px;
left:20px;

元素將放在預設的位置,在此條件下 top, bottom, left, right 的位置宣告都不會生效。

• absolute

元素位置將依據它的父層(上層)元素為基礎,設定相對位置。如果它沒有被包含在任何元素內,則以瀏覽器為他的父層元素。

<style>

.bigbox{
position:absolute;
top:60px;
left:20px;
background-color:#0099cc;
color:#fff;
font-size:14px;
width:200px;
height:80px;
}

.smallbox{
position:absolute;
top:15px;
right: 0;
background-color:#ff9900;
color:#fff;
font-size:14px;
width:100px;
}

</style>
<div class="bigbox">
<div class="smallbox">
</div>
</div>

橘色盒子在藍色盒子裡面,所以 top:15px 和 right:0px 都是以藍色盒子的邊緣為基準。

• relative

relative 就是用 top, bottom, left, right 來控制元素,和「原本應該出現的位置」相對的位置。

<style>

.bigbox{
position:relative;
top:30px;
left:20px;
border:solid 3px black;
background-color:#0099cc;
color:#fff;
font-size:14px;
width:200px;
height:200px;
}

.smallbox{
position:relative;
top:0px;
left: 50px;
background-color:#ff9900;
color:#fff;
font-size:14px;
width:100px;
}
</style>
<div class="bigbox">big box</div>
<div class="smallbox">用top, bottom, left, right <br>來控制元素,<br>和「原本應該出現的位置」相對的位置。</div>

*眼尖的人會看到,因為 big box 已經設定 top:30px 所以 small box 雖然設定 top: 0px 但是還是覆蓋到 big box,而覆蓋到的範圍剛好是 30px。

• z-index

z-index 屬性用來設定當兩個元素相疊時,哪一個在上面、哪一個在下面。
z-index 的值越大,越上層。

以上面的藍色盒子和橘色盒子為例
如果我們把橘色盒子(smallbox) 和藍色盒子 (bigbox) 的 z-index 設定為

.smallbox { //橘色盒子
z-index: 1;
}

.bigbox { //藍色盒子
z-index: 2;
}

則藍色盒子會壓在橘色盒子上面

*重疊在一起的盒子,如果想設定透明度,可以用 opacity 屬性,值從0(完全透明)到1(完全不明),所以通常是用零點幾來表示。

opacity:0.6;

 

• overflow

overflow: visible; 呈現所有內容,如果放不下就溢出去
overflow: hidden; 放不下的內容就隱藏
overflow: scroll; 強制出現水平和垂直捲軸
overflow: auto; 如果內容超出去,就出現捲軸
浮動(float)

浮動 float

float 的用法有點像圖繞文的效果。但如果認為他只有圖繞文的效果,就太小看它了。

因為現在的網頁設計 RWD (Responsive web design) 嚮應式網頁(自適應網頁) 很重要,我們可以運用 float 的特性搭配 media 的設定,來控制在不一樣的螢幕呈現不一樣的排版,如手機和桌機和平板自動呈現不一樣的版面排列。

float 的參數有 left, right 和 none。

當設定 float:left; 時,元素會靠左;當設定為 float:right; 時,元素會靠右。

float:left;
123

在這個測試裡,方塊會位在左邊。在這個測試裡,方塊會位在左邊。在這個測試裡,方塊會位在左邊。在這個測試裡,方塊會位在左邊。在這個測試裡,方塊會位在左邊。在這個測試裡,方塊會位在左邊。在這個測試裡,方塊會位在左邊。在這個測試裡,方塊會位在左邊。在這個測試裡,方塊會位在左邊。在這個測試裡,方塊會位在左邊。在這個測試裡,方塊會位在左邊。在這個測試裡,方塊會位在左邊。

float:right;
123

在這個測試裡,方塊會位在右邊。在這個測試裡,方塊會位在右邊。在這個測試裡,方塊會位在右邊。在這個測試裡,方塊會位在右邊。在這個測試裡,方塊會位在右邊。在這個測試裡,方塊會位在右邊。在這個測試裡,方塊會位在右邊。在這個測試裡,方塊會位在右邊。在這個測試裡,方塊會位在右邊。在這個測試裡,方塊會位在右邊。在這個測試裡,方塊會位在右邊。在這個測試裡,方塊會位在右邊。

float:none;
123

none none none none none none none none none none none none none none none none none none none none none none

清除(clear)

清除 clear

clear 屬性用來取消 float 的作用,可以有以下值。

clear: left 消除靠左浮動
clear: right 消除靠右浮動
clear: both 消除靠左及靠右的浮動
clear: none 不消除浮動
<style>
.floatleft {
float: left;
}

.clearfloat{
clear: left;
}

</style>
<div class="floatleft">這邊套用float left</div>
<div>這邊沒有clear float 所以自動沿用前面的 float 呈現並排</div>
<div class="clearfloat">這邊已經clear left 所以會換行</div>
這邊套用float left
 自動沿用前面的 float
這邊已經clear left 所以會換行
顯示(display)

顯示 display

display 常見的屬性有:

<td>元素為區塊,沒有特別設定的話,下一個 block 會換行,可以設定 height, width 等屬性。<td>元素為區塊(block),可設定 height, width 等屬性,但是以並排顯示。

inline 元素並排顯示,元素的大小依其內容決定,無法設定 height, width, margin 等屬性
block 下一個元素會換行,可以設定 height, width 等屬性
inline-block 元素為區塊(block),可以設定width, height 等屬性,但是並排顯示。
none 元素不顯示,也不佔有版面空間。
gride 格線排版
flex 彈性盒子佈局

HTML 元素 (tag) 屬性

HTML 元素有些屬於 inline (預設並排顯示) 有些屬於 block (下一個元素自動換行)

inline 屬性 <span> <b> <a> <img> <i> <iframe>
block 屬性 <p> <div> <h1> <h2> <h3>…

* block 屬性如果沒有特別設定寬,會以寬100%為預設。

block

<style>
.ABC {
display: block;
background-color:#0099cc;
width:50px;
height:20px;
border:1px black solid;
}
.abc {
background-color:#ff9900;
width:50px;/*span本身為inline元素,因此無法宣告寬高*/
height:50px;
padding:5px;
border:1px black solid;
}
</style>
<span class="abc">a</span><span class="abc">b</span><span class="abc">c</span>
<span class="ABC">A</span><span class="ABC">B</span><span class="ABC">C</span>

abc
ABC

上面的例子可以看到,當span 沒有被設定為 display:block; 時,它維持 <span>原有的 inline 屬性,並排顯示。
當 span 使用 display: block 時,他變成區塊屬性,下一個元素自動換行,並且可以設定 height, width

inline

inline 屬性宣告方式和上一段的 block 屬性一樣:當我們把 block 屬性宣告為 display: inline,它們會變成並排顯示。

inline-block

如果我們想要定義一些區塊的寬和高,同時又需要他們並排顯示,就需要使用到 inline-block 屬性。可以參考後面章節:「媒體類別」的例子。

gride 和 flex 由於篇幅較長,由下面兩個章節說明。

格線 (grid)

格線 grid

格線會用到幾個屬性來定義,row (列) 指的是水平方向的,column (欄) 指的是垂直方向。
給定大小的值可以用 px (pixel),或是用 fr ,1 fr 就是指一個格線單位。
直接舉例,不然根本不知道在說什麼:

.boxes {
display: grid;
border:1px solid black;
}
<div class="boxes">
 <div>1</div>
 <div>2</div>
 <div>3</div>
 <div>4</div>
 <div>5</div>
</div>
1
2
3
4
5

目前我們沒有宣告 row(列) 或 column(欄) 的值,所以看起來就是呆呆的排下來,沒有什麼特別。

我們可以用 grid-template-columns 來宣告欄的數量和寬度;用 grid-template-rows 來宣告列的數量和寬度。

.boxes {
display: grid;
grid-template-columns: 100px 100px 100px; /*宣告有三欄,每一欄是 100px*/
}
<div class="boxes">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
1
2
3
4
5

現在我們有宣告3個欄位和寬度,裡面的元素就會依序排下來,橫的每三格就換一行。

fr 單位

上面的例子,我們發現這三欄根本沒有把整個寬度撐滿,右邊還留下一些空間。
這時候我們可以用 fr 這個單位。

.boxes {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
<div class="boxes">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
1
2
3
4
5

這次我們可以看到整個寬度剛好分配給3個格線了。

上面的例子我們可以寫得更精簡:

.boxes {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 重複3次1fr */
}

用 repeat(3, 1fr) 來表示重複3次1fr 這樣和寫 1fr 1fr 1fr 結果會是一樣的。

.boxes {
display: grid;
grid-template-columns: 90px repeat(5, 1fr) 90px;
}
1(90px)
2
3
4
5
6
7(90px)
8
9
10
.boxes {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
}
1
2
3
4
5
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr 2fr); /*重複3次 1fr,2fr 這樣交錯出現*/
}
1
2
3
4
5
6
7
8
9
10
.boxes{
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-auto-rows: 100px;/* 設定高度為100PX*/
}
1
2
3
4
5
6
7
8
9
10

在上面這個例子,我們設定了高度為100px

.boxes {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: minmax(80px, auto); /*設定最小高度為 80px,最大高度則自動依內容而定*/
}
1
2
3
換行
換行
換行
換行
換行
這一格因為內容而把格子撐高了
4
5
6
7
8
9
10

Grid Lines

當我們要顯示的元素是跨越格線的,要宣告的方式是以格線的「線」為宣告基準,格線的順序編號如下:

如上圖,我們要先宣告格線:

.boxgride {
display: grid;
grid-template-columns: repeat(3, 1fr);
}

A盒子的宣告如下:

.boxA {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
}

B盒子的宣告如下:

.boxB {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
}

而D盒子有跨越2個 columns

.boxD {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;
}

grid-column-gap, grid-row-gap

如果想讓每個盒子之間空出一點空間,就加上 grid-column-gap 和 grid-row-gap 屬性,如下:

.boxgride {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 15px;
grid-row-gap: 5px;
}
A
B
C
D
E

巢狀格線

每一個格子裡面都還可以放置格子

<div class="boxgride"> 
 <div class="boxA">
   <div class="yellowbox"></div>
   <div class="yellowbox"></div>
   <div class="yellowbox">
     <div class="pinkbox"></div>
   </div>
 <div class="boxB">B</div>
 <div class="boxC">C</div>
 <div class="boxD">D</div>
 <div class="boxD">E</div>
</div>
B
C
D
E

z-index 重疊

格子的宣告是可以互相重疊的,用 z-index 屬性來控制誰前誰後,如下範例:

.boxgride {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 100px;
width:300px;
}

.boxA {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;
z-index:2;
background-color:#77cfe6;
opacity:0.8;
}

.boxB {
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 4;
z-index:1;
background-color:#ff9ecb;
}
A
z-index:2;
B
z-index:1;
彈性佈局 (flex)

彈性佈局 flex

Under construction…

媒體類別( media )

媒體類別 (media)

media 的屬性,通常用在宣告在不同裝置、不同螢幕尺寸下,要使用那一個不一樣的 CSS 樣式表。比如說列印時字想要設定小一點,在手機上顯示的時候字想要顯示大一點..之類的。

裝置媒體的表示可以用 not(排除) 和 and(以及) 來含括想要使用共同 CSS 樣式的裝置媒體類型和媒體規格(如螢幕的解析度大小)。

比如說:

<link rel="stylesheet" media="screen and (min-width: 930px)" href="bigscreen.css">

以上的意思就是說,當裝置媒體為「螢幕」而且「寬不小於 930 pixels」時就匯入 bigscreen.css 這一個樣式表。

screen 就是媒體類別,而括弧裡面的 min-width: 930px 就是媒體規格。

 .c1 { width: 100%; font-size:14px; }

@media screen and (min-width: 400px) {
  .c1 {
    width: 100%;
    font-size:16px;
  }
}

@media screen and (min-width: 900px) {
  .c1 {
    width: 50%;
    font-size:20;
   }
}

以上的宣告表示一樣的「c1」樣式,在不同的裝置我們希望它呈現不一樣的寬度和字體大小。
當螢幕寬度介於400px ~ 899px 之間的時候,我們認為他可能是手機螢幕,或是其他較小的螢幕,我們的 c1 就呈現螢幕 100% 的寬度。
當螢幕寬度大於等於 900px 時,c1 樣式就只要呈現 50% ,這樣加上前面介紹的 display: inline-block 就可以讓使用 c1 樣式的元素兩兩並排。
*在實做時,如果width: 50% 無法兩兩並排, 可以試著改成 49% 或 48%,因為可能有其他元素的 padding, margin, border 或其他因素影響。

A
width:99%
B
width:99%
A
width:48%
B
width:48%

常見的媒體類別有:

all 所有類別的裝置媒體
screen 電腦螢幕
print 列印
speech 螢幕朗誦裝置

常見的媒體規格(特性)有:

max-height 最大高(多高以下)
max-width 最大寬(多寬以下)
min-height 最小高(多高以上)
min-width 最小寬(多寬以上)
orientation 裝置方向:landscape(水平), portrait(垂直)

我們如果要設定複合條件就用 and 連接起來:

<style>
@media screen and (min-width: 700px) and (orientation: landscape) { 
	body{
	background-color:yellow;
	}
}
</style>

以上的範例是說,如果裝置的寬度有到700px,而且把裝置(這種狀況下通常是手機) 打橫,背景就會變成黃色。
那應該有人要問了,所謂寬度有滿700px,意思是打橫後寬度有滿 700px 還是打直時寬度有滿700px。
你可以實驗一下,不過如果你懶得實驗,答案是打橫後寬度有滿 700px。

還有,現在很多手機為了顯示效果更精細,有兩倍像素或三倍像素的顯示(如iphone)。

比如說 iPhone XS 顯示 782 x 375  但是三倍密度後變成 2,436 × 1,125

這時仍然是以「未」三倍後的數值為判斷標準喔。比如說上面的例子如果改成( min-width: 800px ),iPhone XS 打橫後背景仍然不會變黃色,因為它打橫後寬也只有 782 px。

對齊(align)

對齊( align, text-align )

text-align

text-align 用來定義文字的對齊規則

text-align:left; 齊左
text-align:right; 齊右
text-align:center; 置中
text-align:justify; 分散對齊
text-align:inherit; 繼承父元素屬性

垂直置中方式

「文字」垂直置中,設定行高後,文字會垂直置中:

.textinside{
width: 300px;
background: #09c;
line-height:50px;
}
文字內容
「block 區塊元素」的垂直置中方式千奇百怪,目前沒有一個簡單、直覺的方式,先提供以下範例之一:
.bigbox {
width:300px; 
height:200px; 
background-color: #cc9900; 
line-height: 200px;/*修改這個值可以改變box2的垂直位置*/
text-align: center;/*讓box2水平置中,和垂直置中沒關係*/
}

.box2{
display: inline-block; 
height:50px; 
width: 50px;
background-color: #0099CC;
vertical-align: middle;
line-height:1;/*讓box2裡面的文字垂直位置正確*/
}
box2
鼠標(cursor)

鼠標 cursor

鼠標樣式的宣告方式:

.abc {
cursor: crosshair;
}

crosshair 可以置換為下列任何鼠標名稱。

!important 語法

!important 語法

如果在宣告 CSS 樣式時,有重複宣告的狀況,但是又找不到重複宣告的文件在哪邊,可以在屬性的值後面接上 !important 然後才是「; 」
用這樣來讓這個宣告有絕對優先權。這個在 WordPress 上很常遇到,因為不是整個網站都自己開發的,所以有時候也搞不懂其 CSS 設定在哪邊。
所以當宣告沒有作用時,就會試試看用 !important,但這個用法要斟酌使用,非必要不用。

例子:

h2 {
font-size: 25px!important;
}

Daco

DacoNote 網站工友,有燈泡壞掉請找我。

您可能也會喜歡…