前言

這篇文要介紹的是一切能在css裡完成事情的基礎：影響許多屬性顏色、距離與尺寸的單位，以及用來定義數值的單位。缺少單位就無法宣告圖片周圍必須留下10像素的空白空間，或是標題文字必須有特定的大小。而字型與文字屬性又是樣式表中最常使用的功能，不可諱言，文字的樣式與設定是使用者閱讀網頁時的感受依據，可以說是網頁的靈魂！

1. 數值與單位

數字與百分比

• 整數(integer value)：15、36、128、10000
• 數字(number value)：2.7183、3.1416、-5.749
• 百分比(percentage value)：50％、33％、25％
• Fraction數值(fraction value or flex value)：由數字加上fr標記組成，一個等分單位記為1fr
   

距離

許多CSS的屬性都需要透過長度才能夠是當的表示頁面上的各種元素，所以CSS裡有許多表示長度的單位。接下來，就讓我們來認識CSS的長度單位。
 

絕對長度單位

1. 英吋(in):美國常用，一英吋等於2.54公分
2. 公分(cm)：世界通用的公分單位
3. 公釐(mm)：一公分等於10公釐
4. 四分之一公釐(q)：一公釐等於4q
5. 點(pt):點是印表機與活字排版的標準字型測量標準，72點等於一英吋，12點大約六分之一英吋
6. Pica(pc)：印刷領域使用，一個pica等於12點
7. 像素(px)：像素是螢幕上的小格點，但CSS的定義比較抽象，96像素等於一英吋；不過一般都直接採用螢幕上的像素大小

相對長度單位

1. em：定義為指定型的font-size，如果元素的font-size設為14像素，那麼1em就等於14px，em會隨著元素的不同而改變。下方的設定將會讓h1標籤內容左邊界空出24px，p標籤內容左邊界空出12px，所以em在h1和p的大小是不同的。

   h1{font-size:24px;}
   p{font-size:12px;}
   h1,p{margin-left:1em}
   

2. rem：依據本身套用的元素的字型為基準，rem是以固定根元素為基準，如果宣告根元素font-size:14px，那麼1rem就等於14px，而且是固定不會變動。
3. ch：CSS3加入了ch這個單位，廣義來說就是『一個字元』，相當於用來呈現的字體裡『0』這個字形的步進度量(advance measure)
4. viewport:視埠就是瀏覽器視窗、可列印區域、行動裝置顯示範圍的大小為依據

• 視埠寬度單位(vw，viewport width unit):如果視埠寬是1024px，那麼1vw就是1024px除於100，就等於10.24px
• 視埠高度單位(vh，viewport height unit):如果視埠高是768px，那麼1vh就是768px除於100，就等於7.68px
• 視埠最小單位(vmin，viewport minimum unit)：vw和vh取較小值，所以1vim等於7.68px
• 視埠最大單位(vmax，viewport maximum unit)：vw和vh取較大值，所以1vim等於10.24px

顏色

網頁的顏色該如何設定呢？在HTML裡有兩種作法，可以使用red或green等預先定義好的顏色名稱，或是使用十六進位編碼表示。而在CSS裡，除了這兩種之外，還支援更多的方法。

有名稱的顏色

RGB和RGBa顏色

RGB分別代表紅色、綠色、藍色三個基本色。標示法為RGB(R數值,G數值,B數值)，例如 rgb(255,255,255)或是rgb(0,0,0,)。

RGBa代表在RGB三色之後加入alpha透明度數值，如rgba(255,255,255,0.5)，0.5代表透明度50%。

十六進位RGB色彩

將三個範圍在00到FF之間的十六進位字串連結在一起，就能夠設定顏色，一般的語法表示為#RRGGBB，如＃ffffff、＃f9a4ca、#62b2c6。

十六進位RGBa色彩

加入了alpha通道值的第四個十六位元值，如＃f9a4ca33、＃f9a4ca66、＃f9a4ca99。

角度

• deg(角度degree)：一個圓有360度
• grad(梯度gradians)：將一個圓切成400等份，為一個梯度，也稱為grade或gon!
• rad(弧度radian)：一個圓等於2＊3.1416
• turn(轉turn)：轉一個圓就是一轉，所以動畫10圈，就是10turn(turn不能加s)
   

2. 字型

一般提到字型，人們總會想到粗體字、斜體字等樣貌。比如我們熟悉的Times包含了TimesRegular、TimesBold、TimesItalic、TimesBoldItalic等變體的組合，各種不同的Times字型變體是fontface，而我們一般所謂的Times則是這些各種字貌的組合。

為了涵蓋所有的範圍，CSS定義了五種通用字型：

1. Serif：有襯線的比例字型，每個字元會依據字型特性有不同的寬度，襯線(serif)是指每個筆畫開頭或結束的裝飾。如大寫A底下的橫線。
2. Sans-serif：無襯線的比例自型，如Helvetic、Geneva、Verdana、Arial。
3. Monospace：等寬字型不是比例字型，通常用來顯示程式碼或是表格資料，每個字元都佔據相同的水平寬度，可能有襯線、也可能無襯線，但都為等寬字型。如Courier、Courier New、Consolas、Andale Mono。
4. Cursive：草書字型模仿手寫字，通常包含大量的曲線或比襯線字型更多的筆劃裝飾。如Zapf Chancery、Author與Comic Sans。
5. Fantasy：花俏字型並沒有任何獨特的特性，不屬於前四類的字型都歸類為花俏字型。如Western、Wooblock與Klingon。
    

使用通用字型

使用font-family屬性使用任何可用的字型。如下所示：

body {font-family:serif;}
h1,h2,h3,h4 {font-family:sans-serif;}
code,pre,tt,kbd {font-family:monospace;}
p.signature {font-family:cursive;}

指定字型

網頁作者可以更明確的指定文件或元素顯示時所使用的字型。比如想讓所有h1元素都使用Georgia字型，可以宣告以下規則：

h1 {font-family:Georgia;}

使用引號

如果字型名稱包含空白或#、$等符號，則需使用引號''包圍起來，如下所示

h2 {font-family:Times,'Times New Roman',serif;}

字體粗細(font-weight)

font-weight的數值有：

• normal | bold | bolder | lighter
• 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
  通常Regular為400、Lighter為400以下、Medium為500、Bold為600和700、Extra Bold為800和900。

p {font-weight:normal;}
p span {font-weight:400;}
strong {font-weight:bolder;}
strong b {font-weight:bolder;}

字型大小尺寸

一般常用的尺寸對照表

字型尺寸與繼承

下列語法中，strong元素繼承的是12px，這個數值再經由宣告的135%作用之後達到16.2px。

p {font-size: 12px;}
em {font-size: 120%}
strong {font-size:135%}

使用長度單位

font-size可以使用所有的長度數值，以下所有的font-size宣告有相同的效果：

p.one {font-size:36pt}
p.two {font-size:3pc;}
p.three {font-size:0.5in;}
p.four {font-size:1.27cm;}
P.five {font-size:12.7mm;}

小結

CSS的數值、單位、與字型的熟悉與運用，是網頁設計師或前端工程師所必須具備的技巧。CSS的快速成長，允許對網頁顏色或字型做更精密的控制，控制的範圍也更加廣泛。透過不斷的調校與嘗試，才能做出更美觀更好的網頁！