CSS 語法、用法教學：完整版 - Daco Note
文章推薦指數： 80 %
不過幸好CSS 是一種很簡單的語法，我認為如果有HTML 的概念，20分鐘就可以上手，2～3 小時就可以運用自如，基本上看懂以下前三個章節你已經差不多可以實作了，其它的不懂再 ...
DacoNote
WordPress
CSS
HTML
UI/UX
Menu
WordPress
CSS
HTML
UI/UX
Search
CSS語法、用法教學：完整版
過去的網頁設計師只要會用DW放上漂亮的圖片、編排文字的位置、大小、顏色等等就差不多了，大不了用Flash做一些動畫，再深入一點寫些ActionScript，但這些都已經是過去式了。
現在的網頁設計師會被要求要提供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;
}
•子代選擇器(DescendantSelectors)
假設說「年菜套餐」裡面的「A套餐」提供的「蔬菜」是金色的，如果不是年菜套餐，平常的A套餐蔬菜顏色就是如之前設定的綠色。
那就做如下宣告(選擇器之間用空格分開就好)
年菜套餐 A套餐{
蔬菜顏色:金色;
}
假設現在要把表格
tdb{ color:blue; } 套用方式 套用方式 CSS要叫進HTML裡面使用的方式有4種 行內套用 inline 直接放在那行html 嵌入套用 embed 放在head 外部連結(常用) externallink 連結外部CSS檔 匯入套用(不建議) import 連結外部CSS檔 •行內套用 行內套用，就是直接寫在那行html標籤裡面
如果你的CSS是分別設在每一頁HTML裡面你就傷心了，如果你的CSS樣式全部都由同一個(或某幾個).css檔案來控制，你就只要修改.css檔案中的某幾個設定就全部完成了，至於美感的事…老闆才不在乎。
•匯入套用(不建議使用) 功能和「外部連結套用」差不多，不同的瀏覽器處理的方式，但根據國外文章討論，「外部連結套用」()的效能比較好，甚至建議不要使用「匯入套用」(@import)，這算是一個瀏覽器歷史的產物，過去的就讓它過去吧。
匯入套用的語法如下
假設我們用了行內套用、嵌入套用、外部連結、匯入套用的CSS，這4份CSS宣告都同時有在定義標籤，但是每一個的定義都不一樣，這時候到底要聽誰的？ 這時候行內套用，因為直接寫在那行HTML裡面，所以擁有最高優先權，接下來是寫在…裡面的CSS，再來是匯入套用，最後才是外部連結。
而瀏覽起本身的樣式表，則是順位最低的，比如說如果我們都沒有設樣式，連結文字通常是藍色的並且有一條底線，那就是瀏覽器本身的樣式表。
順位1 行內套用 inline 直接放在那行html 順位2 嵌入套用 embed 放在head 順位3 匯入套用(不建議) import 連結外部CSS檔 順位4 外部連結(常用) externallink 連結外部CSS檔 順位5 瀏覽器本身樣式 Browser’sownstylesheet 瀏覽器本身 匯入套用以及外部連結，因為可能同時匯入好幾個樣式表，這個時候如果有重複定義的樣式，則是越後被匯入的有越高的優先權。
比如說有以下的CSS匯入：
CLASS與ID CLASS與ID •CLASS 選擇器有兩種形式，一種是用「class」來套用，另一種用「ID」來套用。
這兩種在宣告CSS時寫法有點不一樣，要用class套用時，選擇器名稱前面要有一個「.」如： .abc{ color:#0000FF; } 套用語法如下：
但是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關係到他的「父」設定。
以下範例，
標籤裡面的字體會是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;
}
紅色的字
以上顯示為： 紅色的字 •font-weight以中文來說，目前不管Mac或是PC以及ios或Android大概都有「微軟正黑體」，所以如果想要黑體的效果，可以設定為「微軟正黑體」，如本網站就是以微軟正黑體為標準字。
文字(text,letter) 文字(text,letter) •line-height(行高） 每一行之間的間距 p{ line-height:50px; }
兩行之間
間距為50px
齊左 p{ text-align:left; }
齊左，靠左對齊
齊左，靠左對齊 齊右 p{ text-align:right; }齊右，靠右對齊
齊右，靠右對齊 置中 p{ text-align:cneter; }置中，對齊中間
置中，對齊中間 分散對齊 p{ text-align:justify; }分散對其就是齊頭齊尾的意思，比較常用在英文的場合。
目的是讓整段文字看起來比較整齊，但是有人認為因為字距會受到微調，因而降低易讀性。
Alonglongtimeago.Icanstillrememberhow.Thatmusicusedtomakemesmile.AndIknewifIhadmychance.ThatIcouldmakethosepeopledance.Andmaybethey'dbehappyforawhile.ButFebruarymademeshiver.WitheverypaperI'ddeliver.Badnewsonthedoorstep.Icouldn'ttakeonemorestep.Ican'trememberifIcried.WhenIreadabouthiswidowedbride.Somethingtouchedmedeepinside.Thedaythemusicdied.So...-DonMcLean-AmericanPie
目的是讓整段文字看起來比較整齊，但是有人認為因為字距會受到微調，因而降低易讀性。
Alonglongtimeago.Icanstillrememberhow.Thatmusicusedtomakemesmile.AndIknewifIhadmychance.ThatIcouldmakethosepeopledance.Andmaybethey’dbehappyforawhile.ButFebruarymademeshiver.WitheverypaperI’ddeliver.Badnewsonthedoorstep.Icouldn’ttakeonemorestep.Ican’trememberifIcried.WhenIreadabouthiswidowedbride.Somethingtouchedmedeepinside.Thedaythemusicdied.So…-DonMcLean-AmericanPie •direction text-direction和text-align的差別，可以解釋為text-direction是文字排列的方向，text-align是文字對齊的方式。
text-direction在中文環境不常使用，因為目前在顯示器上面的文字方向已經習慣為由左至右。
另外有些人可能會發現，text-direction和text-align呈現出來的結果似乎一樣。
text-direction的值有「ltr」(由左至右)和「rtl」(由右至左)
他的值可以宣告為數值或百分比。
p{ text-indent:30px; } 以上CSS在
標籤裡將顯示為：
這一段的開頭要留30px的空間
第二行將不會留。
p{
text-indent:10%;
}
這一段的開頭要留整個寬度10%的空間
第二行將不會留。
•text-transform
text-transform用來控制大小寫，它的值有：
p{
text-transform:capitalize;
}
單字的第一個字母
強制大寫
Thisisanapple.
p{
text-transform:uppercase;
}
所有字母
強制大寫
Thisisanapple.
p{
text-transform:lowercase;
}
所有字母
強制小寫
Thisisanapple.
p{
text-transform:none;
}
所有字母維持
原樣不改變
Thisisanapple.
顏色(color)
顏色
在CSS設定顏色的值有三種表示方式：
十六進位值
顏色名稱
RGB比例
要查詢顏色代碼可以用Google搜尋「colorpicker」就會出現一個選色器，可以取得十六進位代碼和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:topcenter;
}
背景將貼齊畫面左邊正中間：設定垂直位置時可以使用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
連結被點下去時的樣式
以上將顯示為：
項目清單(list)
項目清單(list)
list有以下幾種屬性
list-style-type
list-style-position
list-style-image
list-style
•list-style-type
若沒有設定，預設值為outside。
鼻子很長
鼻子很長
常用的相關指令為：
padding(內距)
border(邊框)
margin(邊緣)
內距(padding)
內距padding
padding就是內容和邊裝間的距離，可以分為上下左右分別設定個別距離。
#box{
padding-top:40px;
padding-bottom:10px;
padding-left:80px;
padding-right:30px;
border:1pxsolid#000000;
width:340px;
}
以上會顯示為：
上面距離邊框40px,下面10px。
我們也可以把上下左右的內距寫在同一行，但是順序是順時針由上開始，不能弄錯padding:上px右px下px左px;
上面的padding值也可以寫為：
padding:40px30px10px80px;
邊框(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:solid5pxred;
border-bottom:dotted6px#C0C0C0;
border-left:dashed8px#FF6699;
border-right:double4px#a0a0a0;
}
邊框分開設定樣式
•border
如果4個邊都要宣告一樣的樣式，就只要用border屬性就好了，不用上下左右宣告4次。
p{
border:#FFCC993pxsolid;
}
4邊用一樣的樣式
邊緣(margin)
邊緣margin
邊緣(margin)屬性和內距(padding)一樣，可以方上下左右設定，也可以用一行直接設定上、右、下、左，這個順序是固定的，不能隨意調動。
#boxmargin{
margin-top:30px;
margin-left:10%;
margin-right:20px;
margin-bottom:15px;
border:1pxsolid#000000;
}
內容
＊小訣竅：將一個塊狀元素放到另一個塊狀元素裡面時，如果出現margin-top明明有設距離，但是卻貼在外元素的頂端。
以上面為例，當宣告margin-top:30px，但是橘色的框框卻貼在藍色框框的上緣，要怎麼處理。
這時候通常把藍色框框宣告邊框屬性就會解決了。
比如說上面的藍色框框就宣告了border:1pxsolidgray;的外框屬性。
上面兩個盒子的語法如下：
th{
background-color:#0099CC;
color:#FFF;
}
td{
border-bottom:dashed1px#C0C0C0;
}
動物
飲食
大象
素食
老虎
肉食
小豬
雜食
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
元素位置將依據它的父層(上層)元素為基礎，設定相對位置。
如果它沒有被包含在任何元素內，則以瀏覽器為他的父層元素。
•relative
relative就是用top,bottom,left,right來控制元素，和「原本應該出現的位置」相對的位置。
來控制元素，
和「原本應該出現的位置」相對的位置。
＊眼尖的人會看到，因為bigbox已經設定top:30px所以smallbox雖然設定top:0px但是還是覆蓋到bigbox，而覆蓋到的範圍剛好是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(Responsivewebdesign)嚮應式網頁(自適應網頁)很重要，我們可以運用float的特性搭配media的設定，來控制在不一樣的螢幕呈現不一樣的排版，如手機和桌機和平板自動呈現不一樣的版面排列。
float的參數有left,right和none。
當設定float:left;時，元素會靠左；當設定為float:right;時，元素會靠右。
float:left;
123
在這個測試裡，方塊會位在左邊。
在這個測試裡，方塊會位在左邊。
在這個測試裡，方塊會位在左邊。
在這個測試裡，方塊會位在左邊。
在這個測試裡，方塊會位在左邊。
在這個測試裡，方塊會位在左邊。
在這個測試裡，方塊會位在左邊。
在這個測試裡，方塊會位在左邊。
在這個測試裡，方塊會位在左邊。
在這個測試裡，方塊會位在左邊。
在這個測試裡，方塊會位在左邊。
在這個測試裡，方塊會位在左邊。
float:right;
123
在這個測試裡，方塊會位在右邊。
在這個測試裡，方塊會位在右邊。
在這個測試裡，方塊會位在右邊。
在這個測試裡，方塊會位在右邊。
在這個測試裡，方塊會位在右邊。
在這個測試裡，方塊會位在右邊。
在這個測試裡，方塊會位在右邊。
在這個測試裡，方塊會位在右邊。
在這個測試裡，方塊會位在右邊。
在這個測試裡，方塊會位在右邊。
在這個測試裡，方塊會位在右邊。
在這個測試裡，方塊會位在右邊。
float:none;
123
nonenonenonenonenonenonenonenonenonenonenonenonenonenonenonenonenonenonenonenonenonenone
清除(clear)
清除clear
clear屬性用來取消float的作用，可以有以下值。
clear:left
消除靠左浮動
clear:right
消除靠右浮動
clear:both
消除靠左及靠右的浮動
clear:none
不消除浮動
元素為區塊，沒有特別設定的話，下一個block會換行，可以設定height,width等屬性。
元素為區塊(block)，可設定height,width等屬性，但是以並排顯示。
inline
元素並排顯示，元素的大小依其內容決定，無法設定height,width,margin等屬性
block
下一個元素會換行，可以設定height,width等屬性
inline-block
元素為區塊(block)，可以設定width,height等屬性，但是並排顯示。
none
元素不顯示，也不佔有版面空間。
gride
格線排版
flex
彈性盒子佈局
HTML元素(tag)屬性
HTML元素有些屬於inline(預設並排顯示)有些屬於block(下一個元素自動換行)
inline屬性
延伸文章資訊
- 1CSS 基本- 學習該如何開發Web | MDN
階層樣式表 (Cascading Stylesheets；CSS) 可用以塑造網站的特殊風格。 ... 〈CSS 基本概念〉帶你入門。 ... 注意語法其他重要的部分：.
- 2CSS 语法 - w3school 在线教程
CSS 语法. CSS 规则集（rule-set）由选择器和声明块组成：. CSS 选择器. 选择器指向您需要设置样式的HTML 元素。 声明块包含一条或多条用分号分隔的声明。
- 3CSS 語法、用法教學：完整版 - Daco Note
不過幸好CSS 是一種很簡單的語法，我認為如果有HTML 的概念，20分鐘就可以上手，2～3 小時就可以運用自如，基本上看懂以下前三個章節你已經差不多可以實作了，其它的不懂再 ...
- 4HTML及CSS語法表
HTML及CSS語法表. 這是我寫網頁時備忘用的，所以有點簡略，大家可以參考一下。 ... <link rel=stylesheet type="text/css" href="***.css"...
- 5CSS 語法教學
CSS 的全名為Cascading Style Sheets，是一種樣式表(Stylesheet) 語言。它的目的是為了對像XHTML 及HTML 之類的標記語言(markup language...
