過去的網頁設計師只要會用 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
選擇器有兩種形式,一種是用「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 選擇器。
尺寸單位
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)在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)
• 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>
以上將顯示為:
<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>
以上將顯示為:
• 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. |
顏色
在 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% |
背景
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)
當我們在文字上設連結時,通常瀏覽器預設會是藍色的字加上一個底線,如果你是使用 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-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>
以上將顯示為:
- 老虎
- 大象
- 小豬
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)
盒子模式用來定義一個元素的邊界、邊框、內距等內容,我們可以把每一個畫面上的元素視為一個方塊,在 CSS 排版上是很重要的概念。
常用的相關指令為:
- padding (內距)
- border (邊框)
- margin (邊緣)
內距 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>
以上會顯示為:
我們也可以把上下左右的內距寫在同一行,但是順序是順時針由上開始,不能弄錯 padding:上px 右px 下px 左px;
上面的 padding 值也可以寫為:
padding: 40px 30px 10px 80px;
邊框 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)屬性和內距(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
在 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 來定義元素位置時,有意下幾種參數值。
• 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 的用法有點像圖繞文的效果。但如果認為他只有圖繞文的效果,就太小看它了。
因為現在的網頁設計 RWD (Responsive web design) 嚮應式網頁(自適應網頁) 很重要,我們可以運用 float 的特性搭配 media 的設定,來控制在不一樣的螢幕呈現不一樣的排版,如手機和桌機和平板自動呈現不一樣的版面排列。
float 的參數有 left, right 和 none。
當設定 float:left; 時,元素會靠左;當設定為 float:right; 時,元素會靠右。
float:left;
在這個測試裡,方塊會位在左邊。在這個測試裡,方塊會位在左邊。在這個測試裡,方塊會位在左邊。在這個測試裡,方塊會位在左邊。在這個測試裡,方塊會位在左邊。在這個測試裡,方塊會位在左邊。在這個測試裡,方塊會位在左邊。在這個測試裡,方塊會位在左邊。在這個測試裡,方塊會位在左邊。在這個測試裡,方塊會位在左邊。在這個測試裡,方塊會位在左邊。在這個測試裡,方塊會位在左邊。
float:right;
在這個測試裡,方塊會位在右邊。在這個測試裡,方塊會位在右邊。在這個測試裡,方塊會位在右邊。在這個測試裡,方塊會位在右邊。在這個測試裡,方塊會位在右邊。在這個測試裡,方塊會位在右邊。在這個測試裡,方塊會位在右邊。在這個測試裡,方塊會位在右邊。在這個測試裡,方塊會位在右邊。在這個測試裡,方塊會位在右邊。在這個測試裡,方塊會位在右邊。在這個測試裡,方塊會位在右邊。
float:none;
none none none none none none none none none none none none none none none none none none none none none none
清除 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>
顯示 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
格線會用到幾個屬性來定義,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>
目前我們沒有宣告 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>
現在我們有宣告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>
這次我們可以看到整個寬度剛好分配給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; }
.boxes { display: grid; grid-template-columns: 2fr 1fr 1fr; }
.wrapper { display: grid; grid-template-columns: repeat(3, 1fr 2fr); /*重複3次 1fr,2fr 這樣交錯出現*/ }
.boxes{ display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 100px;/* 設定高度為100PX*/ }
在上面這個例子,我們設定了高度為100px
.boxes { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(80px, auto); /*設定最小高度為 80px,最大高度則自動依內容而定*/ }
換行
換行
換行
換行
換行
這一格因為內容而把格子撐高了
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; }
巢狀格線
每一個格子裡面都還可以放置格子
<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>
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;
}
z-index:2;
z-index:1;
彈性佈局 flex
Under construction…
媒體類別 (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 或其他因素影響。
width:99%
width:99%
width:48%
width:48%
常見的媒體類別有:
all | 所有類別的裝置媒體 |
screen | 電腦螢幕 |
列印 | |
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, 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; }
.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裡面的文字垂直位置正確*/ }
鼠標 cursor
鼠標樣式的宣告方式:
.abc { cursor: crosshair; }
crosshair 可以置換為下列任何鼠標名稱。
!important 語法
如果在宣告 CSS 樣式時,有重複宣告的狀況,但是又找不到重複宣告的文件在哪邊,可以在屬性的值後面接上 !important 然後才是「; 」
用這樣來讓這個宣告有絕對優先權。這個在 WordPress 上很常遇到,因為不是整個網站都自己開發的,所以有時候也搞不懂其 CSS 設定在哪邊。
所以當宣告沒有作用時,就會試試看用 !important,但這個用法要斟酌使用,非必要不用。
例子:
h2 { font-size: 25px!important; }