前言
這篇文要介紹的是一切能在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的長度單位。
絕對長度單位
- 英吋(in):美國常用,一英吋等於2.54公分
- 公分(cm):世界通用的公分單位
- 公釐(mm):一公分等於10公釐
- 四分之一公釐(q):一公釐等於4q
- 點(pt):點是印表機與活字排版的標準字型測量標準,72點等於一英吋,12點大約六分之一英吋
- Pica(pc):印刷領域使用,一個pica等於12點
- 像素(px):像素是螢幕上的小格點,但CSS的定義比較抽象,96像素等於一英吋;不過一般都直接採用螢幕上的像素大小
相對長度單位
<style type=text/css> h1 {font-size:24px;} p {font-size:12px;} h1,p {margin-left:1em} </style>
- em:定義為指定型的font-size,如果元素的font-size設為14像素,那麼1em就等於14px,em會隨著元素的不同而改變。 下方的設定將會讓h1標籤內容左邊界空出24px,p標籤內容左邊界空出12px,所以em在h1和p的大小是不同的。
- rem:依據本身套用的元素的字型為基準,rem是以固定根元素為基準,如果宣告根元素font-size:14px, 那麼1rem就等於14px,而且是固定不會變動。
- ch:CSS3加入了ch這個單位,廣義來說就是『一個字元』,相當於用來呈現的字體裡『0』這個字形的步進度量 (advance measure)
- 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取較小值,所以1vmin等於7.68px
- 視埠最大單位(vmax,viewport maximum unit):vw和vh取較大值,所以1vmax等於10.24px
2. 顏色
網頁的顏色該如何設定呢?在HTML裡有兩種作法,可以使用red或green等預先定義好的顏色名稱,或是使用十六進位編碼表示。而在CSS裡,除了這兩種之外,還支援更多的方法。
有名稱的顏色
顏色名稱 | |||
---|---|---|---|
aqua | gray | navy | silver |
black | green | olive | teal |
blue | lime | purple | white |
fuchsia | maroon | red | yellow |
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)
3. 字型
一般提到字型,人們總會想到粗體字、斜體字等樣貌。比如我們熟悉的Times包含了TimesRegular、TimesBold、TimesItalic、TimesBoldItalic等變體的組合, 各種不同的Times字型變體是fontface,而我們一般所謂的Times則是這些各種字貌的組合。
為了涵蓋所有的範圍,CSS定義了五種通用字型:
- Serif:是指每個筆畫開頭或結束的裝飾。如大寫A底下的橫線。
- Sans-serif:無襯線的比例自型,如Helvetic、Geneva、Verdana、Arial。
- Monospace:等寬字型不是比例字型,通常用來顯示程式碼或是表格資料,每個字元都佔據相同的水平寬度,可能有襯線、也可能無襯線,但都為等寬字型。如Courier、Courier New、Consolas、Andale Mono。
- Cursive:草書字型模仿手寫字,通常包含大量的曲線或比襯線字型更多的筆劃裝飾。如Zapf Chancery、Author與Comic Sans。
- Fantasy:花俏字型並沒有任何獨特的特性,不屬於前四類的字型都歸類為花俏字型。如Western、Wooblock與Klingon。
使用通用字型
使用font-family屬性使用任何可用的字型。如下所示:
<style type=text/css> body {font-family: serif;} h1,h2,h3,h4 {font-family: sans-serif;} code,pre,tt,kbd {font-family: monospace;} p.signature {font-family: cursive;} </style>
指定字型
網頁作者可以更明確的指定文件或元素顯示時所使用的字型。比如想讓所有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。
<style type=text/css> p {font-weight:normal;} p span {font-weight:400;} strong {font-weight:bolder;} strong b {font-weight:bolder;} </style>
字型大小尺寸
一般常用的尺寸對照表
大小名稱 | xx-small | x-small | small |
---|---|---|---|
數值 | 10px | 12px | 14px |
medium | large | x-large | xx-large |
16px | 19px | 24px | 32px |
字型尺寸與繼承
下列語法中,strong元素繼承的是12px,這個數值再經由宣告的135%作用之後達到16.2px。
<style type=text/css> p {font-size: 12px;} em {font-size: 120%} strong {font-size:135%} </style>
使用長度單位
font-size可以使用所有的長度數值,以下所有的font-size宣告有相同的效果:
<style type=text/css> 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;} </style>
小結
CSS的數值、單位、與字型的熟悉與運用,是網頁設計師或前端工程師所必須具備的技巧。 CSS的快速成長,允許對網頁顏色或字型做更精密的控制,控制的範圍也更加廣泛。 透過不斷的調校與嘗試,才能做出更美觀更好的網頁!