字型
如何改變字型？
就像編輯文件檔案、電郵或簡報，在編寫網頁是你可能需要使用不同樣式作為文字內容的設計。在前一章有提及過，我們可以利用 CSS 樣式檔，使用 CSS 選取器去指出需要套用設計的 HTML 元素，在每一組的 CSS 規則去定義相關設計。不過，到底在設計文字樣式時，那是有什麼 CSS 屬性可以選擇的呢？
font-family
font-family 需要填寫的是一連串以逗號分隔的字體名稱或字體類別。這些指定的字體是需要以優先顯示次序排列，瀏覽器會首選以前面的字體顯示，若是用戶裝置沒有相關字體，則會以後續字體顯示。
<font-family>的值是字體名稱的字串，需要雙引號括起字體名稱，如"Times New Roman"、 "Calibri"、"Helvetica"等。
<generic-name>
則是一種字體類別，而這些類別是系統定義的基本字體。有襯線體 (serif)
通常用在正式文件或傳統/復古設計，而無襯線體 (sans-serif)
通常用在簡報或用戶界面等方面。
你也可以在 W3C 標準文件中瞭解其他的已定義通用字體類型喔！
font-weight
font-weight用來定義文字的粗幼度。這個值是 100 的倍數，可填寫由 100 (最幼細)到 900 (最粗體)不等。除了數值，你可以填寫關鍵字：normal是預設值，粗幼度正常，等同 400，而bold則代表粗體，等同 700。
font-style
font-style可以讓提供斜體 (italic) 的選項。以往在文件編輯，italic 這個名稱應已熟能詳；至於 oblique 則可能是新認識的，這個其實是指單純的傾斜字體，與前者差別是，italic 的斜體往往加入曲線變化，尤以常見的英文襯線字體可看到其差別。當字體沒有提供 italic / oblique 任何一款字型時，他們則會互通使用。例如： abcijk (italic)、 abcijk (oblique - 模擬效果)、 abcijk (oblique - 實際效果) 。
font-size
font-size 是需要以長度值用來描述字體大小的。在下一章節——版面配置，我會再深入講解<length> 可以放入的值。而現在先讓我簡界四種長度單位是可以用作字體大小的吧：
- 絕對長度
就如一般文件編輯軟體，你可以使用pt作為字體大小的單位，而在 CSS 中，你可以使用：
px: 1 像素 (螢幕像素)
pt: 1 點 (1/72吋)
這些絕對長度的單位都是固定的，意指在 HTML 文件中哪個部分使用都會使用相關的長度。 - 字體相對長度
字體相對長度在設計上一些情境下會比較方便，這樣可以標明一個與母元素有關的相對大小。
rem: 與瀏覽器預設文件字體大小的相對比例
em: 與母元素字體大小的相對比例
試一下去調整字體大小及理解如何運用px、em及rem。
#ex1Dem #ele1 {font-size: $(ex1d1)em;}
#ex1Dem #ele1_1 {font-size: $(ex1d2)em;}
#ex1Dem #ele1_2 {font-size: $(ex1d3)rem;}
#ex1Dem #ele1_3 {font-size: $(ex1d4)px;}
#ex1Dem #ele2 {font-size: $(ex1d5)px;}
#ex1Dem #ele2_1 {font-size: $(ex1d6)px;}
#ex1Dem #ele2_2 {font-size: $(ex1d7)em;}
line-height
line-height用作指定該元素的文字行高。相關的數值或百分比值應該大於 0 的，而這個值則代表與這個元素的字體大小相對比例。對大部分瀏覽器而言，normal的實際值是處於 1.0 - 1.2 之間。
因為這是與字體大小成相對比例，若然<length>值是以
em 作為單位，這樣的話，line-height若是填上
1em 是與填上 1 無差；同樣地，1.2em =
1.2，如此類推。
不過，我們要清楚謹記，em 這個單位比例是相對於母元素的。因此，當這個行高屬性值遺傳至子元素時會變得相當怪異。
text-decoration
text-decoration可以在文字上下加上線條，你可以加入底線、劃破線 (刪除線) 或上標線。
最新版本的 Firefox 和 Chrome 支援完整語法定義的值，但是 Edge 暫時只技援上述基本的有效值。
只更改部分文字樣式
有時候，你可能只會希望在段落中部分文字加上樣式設計，這樣子你可以在行文間使用一些文字層面的 HTML
元素像是<strong>、<em>。
若是你欲要加入的視覺設計與元素類別定義無關，你則可以使用<span>元素，並透過一些元素屬性如class或id，去協助你以相應的
CSS 選擇器套用特定樣式至相關元素。
今年正是最好的時機去學習AI (人工智慧)。 過去幾年，我們都曾經著迷於大數據當中， 而隨著硬體技術一併發展，深度學習的演算化隨之而變得越趨複雜。 我們都可看到在應用人工智慧方面有更多大大小小的突破，漸見技術成熟。
就如上述範例，文字層面的元素可以散落在段落之中。透過 CSS 選擇器，他們可以各自有獨立的樣式效果。
色彩
什麼是色彩？
色彩 (Color) 是 CSS 屬性值之中其中一類最常見的，你可能需要調整文字、背景、邊框、陰影等不同地方的顏色。透過改變色彩值，相關的 CSS 屬性得以調整到指定的顯示顏色。以下是一些常見又需要使用色彩值的 CSS 屬性：
- color: 元素中文字顏色
- background-color: 元素的背景填滿顏色
- border-color: 元素的邊框顏色 (我們會在下一章節瞭解更多什麼是邊框)
接下來會講解以下怎樣去表述一個 CSS 色彩值
rgb() / rgba()
利用一個 rgb() / rgba() 函數可以傳回一個 CSS 色彩值。首先，讓我們理解一下 RGB 的實質意思吧：
當你近看螢幕的每一個像素時，一般來說，一個像素是有三個「發光燈」，分別是紅色、綠色和藍色的。在運算螢幕的顯示時，色彩的調控就是基於這三個燈點的光度。當三個燈點都發出最大的光，這個像象就看上去是白色的。當沒有燈點發出光茫，可想而知他就是黑色的。若是只有一個燈點發光，譬如說是紅光點亮出最強光線，這像素就是紅色的。如果紅色和綠色光點都發出最強光線，那看上去就是黃色的。所以，從控制紅、綠、藍三個小光點的光度，整個像素就可以顯示出不同的顏色。
而 RGB 這組字就是說冒紅色 (Red)、綠色 (Greedn) 和藍色 (blue)。在 rgb() 函數當中，透過指定三個參數，分別控制紅、綠和藍色的強度，從而代表某一隻顏色0。而 RGBA 則分別代表紅、綠、藍和透明度 (alpha) 。有時候，當元素在重疊地顯示，使用具透明度的色彩則可讓用戶看到在背後的其他元素。
-
r / 紅色: [數值] 最低值: 0; 最高值: 255
數值愈高，色彩中紅色強度愈高。 -
g / 綠色: [數值] 最低值: 0; 最高值: 255
數值愈高，色彩中綠色強度愈高。 -
b / 藍色: [數值] 最低值: 0; 最高值: 255
數值愈高，色彩中藍色強度愈高。 -
a / 透明度: [數值] 最低值: 0; 最高值: 1
數值愈高，色彩的透明度愈低。
若是 rgb 三個值相等，因為沒有一項強度比其他高，三色均衡下的結果會是grayscale灰階。數值愈高，這代表愈是偏白的顏色。
試一下去編輯兩個<div>元素中有關色彩運用時需要的rgba參數值。
#ex4Dem #topEle {
background-color: rgba($(ex4d1), $(ex4d2), $(ex4d3), $(ex4d4));
color: rgba($(ex4d5), $(ex4d6), $(ex4d7), $(ex4d8));
}
#ex4Dem #btmEle {
background-color: rgba($(ex4d9), $(ex4d10), $(ex4d11), $(ex4d12));
color: rgba($(ex4d13), $(ex4d14), $(ex4d15), $(ex4d16));
}
#RRGGBB[AA] / #RGB[A]
除了使用rgb()或rgba()函數，你可以直接以 16 進制數字規格，如 #RRGGBB[AA] 或 #RGB[A] 來表達 紅-R / 綠-G / 藍-B / [透明-A] 色彩，而 A (透明) 同樣不一定填寫的。
使用這種 16 進制數字表達方式時，每一個 RGBA 值都需要兩個數字來代表。有效值從
00 到 FF
，等同在 rgba 函數中的 0 至 256 的數值。
假若你要使用簡短方式，每個 RGBA 值可以只用一個數字來代表。這樣的話，3
實際上是完整值的 33，而 A
則是 AA 。
以下面數對相同的值作為例子，去理解一下這與rgba()有什麼差別吧：
- rgb(0, 0, 0) / #000000 / #000
- rgb(255, 0, 120) / #FF0078
- rgba(204, 47, 0, 1) / #CC2500FF
- rgba(255, 85, 17, 0.797) / #FF5511CC / #F51C
hsl() / hsla()
另一方面，hsl() / hsla()函數也可以回傳一個 CSS 色彩值。HSLA 值分別代表色調 (hue)、飽和度 (saturation)、光度 (lightness) 和透明度 (alpha)。這種的表達方式是比較容易理解，相信一些以前有使用過基本圖片編輯工具的都對這三個參數感到熟悉。現在讓我們瞭解一下這兩個函數需求怎樣的參數值吧：
- h / 色調: [數值] 任何數字，以 360 為一個彩譜間距
這個數值是代表在色譜中的位置，遞升的方向是由 紅色 (0)，橘色 (30)， 黃色 (60)，綠色 (120)，青色 (180), 藍色 (240)，洋紅色 (320) 到最後回到 紅色 (360)。 - s / 飽和度: [百分比] 最小值: 0%; 最大值: 100%
數值愈高，色彩的飽和度愈高。 0% 則代表灰階。 - l / 光度: [百分比] 最小值: 0%; 最大值: 100%
數值愈高，色彩的顯得愈光白。0% 必然是黑色，而 100% 則必然是白色。 - a / 透明度: [數值] Min: 0; Max: 1
數值愈高，色彩的透明度愈低。
再嘗試以hsla()函數修改兩個<div>元素的顏色吧。
#ex4bDem #topEle2 {
background-color: hsla($(ex4bd1), $(ex4bd2), $(ex4bd3), $(ex4bd4));
color: hsla($(ex4bd5), $(ex4bd6), $(ex4bd7), $(ex4bd8));
}
#ex4bDem #btmEle2 {
background-color: hsla($(ex4bd9), $(ex4bd10), $(ex4bd11), $(ex4bd12));
color: hsla($(ex4bd13), $(ex4bd14), $(ex4bd15), $(ex4bd16));
}
顏色名稱值
最後，其實還有一個比較簡單直接的方法去說明色彩值，那就是寫出我們日常生活中的英文顏色名稱，像是 red (紅色)、green (綠色)、black (黑色) 等等。不過，日常生活的用語，有時候會含糊不清。譬如說，每個人所講的「紅色」，到底是有多「紅」，又會不會是「深紅」的呢？所以，這些日常字詞往往是代表著實際色彩的間距。因此，W3C 在色彩基準中制定了每一個可以用的顏色名稱值應當確切多少。下面是部分色彩名稱與他們的定義值：
| 色彩 | 色彩名稱 | rgb() | #RRGGBB | hsl() |
|---|---|---|---|---|
| black(黑) | rgb(0, 0, 0) | #000000 | hsl(0, 0%, 0%) | |
| dimgray / dimgrey(深灰) | rgb(105, 105, 105) | #696969 | hsl(0, 0%, 41.176%) | |
| gray / grey(灰) | rgb(128, 128, 128) | #808080 | hsl(0, 0%, 50.196%) | |
| silver(銀) | rgb(192, 192, 192) | #C0C0C0 | hsl(0, 0%, 75.294%) | |
| white(白) | rgb(255, 255, 255) | #FFFFFF | hsl(0, 0%, 100%) | |
| red(紅) | rgb(255, 0, 0) | #FF0000 | hsl(0, 100%, 50%) | |
| orange(橘) | rgb(255, 165, 0) | #FFA500 | hsl(38.824, 100%, 50%) | |
| yellow(黃) | rgb(255, 255, 0) | #FF0000 | hsl(60, 100%, 50%) | |
| lime(萊姆) | rgb(0, 255, 0) | #00FF00 | hsl(120, 100%, 50%) | |
| green(綠) | rgb(0, 128, 0) | #008000 | hsl(120, 100%, 25.098%) | |
| aqua / cyan(水漾藍/青藍) | rgb(0, 255, 255) | #00FFFF | hsl(180, 100%, 50%) | |
| blue(藍) | rgb(0, 0, 255) | #0000FF | hsl(240, 100%, 50%) | |
| magenta / fuchsia(洋紅/紫紅) | rgb(255, 0, 255) | #FF00FF | hsl(300, 100%, 50%) | |
| purple(紫) | rgb(128, 0, 128) | #800080 | hsl(300, 100%, 25.098%) | |
| deeppink(深粉紅) | rgb(255, 20, 147) | #FF1493 | hsl(327.574, 100%, 53.922%) | |
| crimson(赤紅) | rgb(220, 20, 60) | #DC143C | hsl(348, 83.333%, 47.059%) | |
| brown(褐) | rgb(165, 42, 42) | #A52A2A | hsl(0, 59.420%, 40.588%) | |
| sandybrown(沙黃褐) | rgb(244, 164, 96) | #F4A460 | hsl(27.568, 87.059%, 66.667%) | |
| gold(金) | rgb(255, 215, 0) | #FFD700 | hsl(50.588, 100%, 50%) | |
| springgreen(春綠) | rgb(0, 255, 127) | #00FF7F | hsl(149.882, 100%, 50%) | |
| skyblue(天藍) | rgb(135, 206, 236) | #87CEEB | hsl(197.822, 72.662%, 72.745%) | |
| dodgerblue(寶藍) | rgb(30, 144, 255) | #1E90FF | hsl(209.6, 100%, 55.882%) | |
| pink(粉紅) | rgb(255, 192, 203) | #FFC0CB | hsl(349.524, 100%, 87.647%) |
圖片
哪個時候會使用圖片？
一幅引人入勝的圖片會令你網站的訪客留下深刻的印象，所以你要有技巧地在網頁間配置圖片。這些圖片可以是：
- 與主題息息相關的背景圖片
- 特別設設的背景圖案
- 與文字內容有關係的相片
- 自行設計的用戶界面圖案
在一個 HTML 網頁中，我們有很多方法去插入圖片，甚或創建畫布進行繪圖。在這一章，我們會主要瞭解<img />元素跟background-imageCSS 屬性這兩個項目。
<img />
<img /> 元素是一個畫框讓你放置圖片。你可以從你網站資料夾中，找出圖片的 URI，將其放進這個元素的src屬性中。而width和height屬性則是可以定義這張圖片的原始元素固定大小 (1 代表一個像素)。
去改變剛才設下的固定預設大小，你可以利用 CSS 屬性中的width和height去控制這圖片的大小。這兩個屬性會在下一章節詳細講解，但現時你可先記位，那是可以填上一個<length>值，像是8px或29%。若是需要保留原圖長闊比，你可以只是定義其長度或闊度，而另一個值就填上auto(自動) 。
若是沒有進行元素層面的大小定義，又沒有透過 CSS 進行大小設計，這圖片將會以原圖維度大小顯示出來。
object-fit
有時候，原圖的長闊比例可能會跟圖片元素的有所不同。例如，你可能需要把一張長方形的相片放在正方形的圖片元素中。要保留原圖比例下去調整圖片大小和進行裁剪，你需要在<img />元素使用 CSSobject-fit屬性。
就預設而言，這是一個fill值，把原圖延伸或縮小至圖片元素的width和heightCSS 屬性值，這樣的話原圖的長闊比不一定能得以保留。利用其他值則可以在保留原圖的長闊比下，調適和裁剪圖片大小以符合元素的大小。在接下來的範例，你可以嘗試和觀察一下不同值的效果。
嘗試改變這個範例中<img />元素的大小屬性。
#ex5Dem #crescentImg {
width: $(ex5d1);
height: $(ex5d2);
object-fit: $(ex5d3);
}
background-image
我們可以透過background-imageCSS 屬性去為一個 HTML 元素填上背景圖片。值得留意的是，背景圖片的實際意義並不是用來當作主要內容訊息傳遞，而是使用作設計裝飾之用。
舉個例子說，你可以在一張以圖片 B 的<img />元素中，使用圖片 A 作為他的background-image背景圖片屬性。這個情況下，除非圖片 B 沒有填滿整個元素，或是圖片 B 中有一些透明的元素，否則作為背景的圖片 A 是不能顯示出來的。故此，圖片 B 是主要的訊息傳遞，而圖片 A 只是用作粉飾背景。
background-size
要調整背景圖片大小，這需要background-sizeCSS 屬性。他有提供cover和contain值，這兩個值都跟object-fit的效果相同。此外，你可以填寫<length-pecentage>或auto，如是者你可以提供一或兩個值，以空格分區，分別代表固定長闊比或 x 及 y 各自的重調背景圖片大小。若是提供一個百分比，這是會相對於元素本身的大小。
試一下去修改background-size屬性跟<div>元素的大小屬性吧。
#ex6Dem #hiFlower {
width: $(ex6d1);
height: $(ex6d2);
background-size: $(ex6d3);
}
圖片的位置
object-position CSS 屬性可以讓我們去表明圖片在<img />元素中的位置，而background-position CSS 屬性則是用來定義background-image背景圖片的位置的。兩者可使用的值相當相似，但好不要把兩個屬性的用途弄錯喔。
現在讓我解釋一下這兩個屬性的寫法吧，但是我會先主要講解有關background-position的。
在預設的情況下，若是圖片不是延伸填滿，需要剪載的話，圖片一般會放在元素的左上角，從該處按元素大小剪裁。你可以使用 center (置中)、left (置左)、 right (置右)、top (置上) 或 bottom (置底) 等值表述圖片的放置位置。當使用這些具語義理解的字詞時，你可以使用兩個字，並由空格，代表橫向或縱向的位置。若是只有一個值，如left，那就會放置以左右置左、上下置中的方式放在元素中，因此，一個值其實等同填上center在第二個值的位置。
另一方便，我們也可使用<length-percentage>值，相關的長度或百分比是相對於元素的左上角。填寫一個值是會當作是橫向縱向均為相同，而填寫兩個值時，則代表著 x y 橫縱向的位置，並以先 x 從 y 的方式作判斷。
這個「先 x 後 y 」的規則也適用於<length-percentage> 跟上述具語義理解的字詞值混合使用。舉例來說： background-position: right 30%; 實際上等同 background-position: 100% 30%; 。根據這個規則，background-position: top 69%; 就變得毫無意義了，因為top本身不是語意上橫向位置的使用值。
最後一個方式是使用 3/4 個值，這其實可當作是 2 組的值。而每一組包念 1 個或 2 個值，先是具語義理解的指定值，跟著可有可無的一個<length-percentage>值。這種方式是用來指定相對於橫向或縱向元素邊緣的位置。因為已清楚表明是哪條邊緣，這兩組並沒有」先 x 後 y 」的規則。例如： background-position: bottom 69% left; 是沒有問題的，這闡述位置是在從底部邊緣向上推 69 %，並且置左，所以這個值是等同 background-position: 0% 31%;。若是你想直接置中，可以不用從邊界推算，直接指定center 值。
我們重新看看小蓮的範例，試一下修改 background-position 這個屬性。
#ex6bDem #hiFlower2 {
width: $(ex6bd1); height: $(ex6bd2); background-size: $(ex6bd3); background-position: $(ex6bd4);
}
有關object-position所需求的<position>值，這是比<bg-position>稍為嚴謹一點。由於<position>是可能會用在很多其他 CSS 屬性中，三個值的寫法會帶來含混，所以他不允三個值的寫法。不過一般而言，當你是處理有關object-position的值時，即使你使用<bg-position>定義的方式來指定位置，這是沒有問題的。
現在，我們已經稍為瞭解設計樣式的方法。在下一章節，我們會更深入瞭解怎樣掌握排版的方式，到時候我們會更清楚認識大小與位置，以及更多 CSS 屬性的使用方法！