<HeadFirst_HTML與CSS> O’REILLY_Chap.8_增加字型和顏色樣式

本部落格的FollowMeReading系列初衷是線上的讀書筆記. 為方便後期查閱, 故寫成部落格形式, 使用關鍵字查詢便可以快讀的找到相關的內容.

FollowMeReading系列所選的書籍一般選自O’REILLY或Apress出版社, 儘量保證筆記內容的權威性.

FollowMeReading系列的部落格標題格式為: <書名> 出版社章節數章節名, 方便大家在紙質版書籍中查詢.

FollowMeReading系列博文中的內容大部分是原文, 非原文部分前面將有’博主’字樣提醒.

感謝<HeadFirst_HTML與CSS>作者 Eric Freeman & Elisabeth Robson
感謝<HeadFirst_HTML與CSS>翻譯 徐陽 丁小峰

本部落格由@scott編寫. 若轉載此文章, 請註明出處和作者

正文

原文

BULLTE POINTS(要點):

• CSS提供了很多屬性對字型的外觀加以控制, 包括 font-family , font-weight , font-size , font-style .

• font-family 是一組有共同特徵的字型.

• 用於Web的字體系列包括 serif

  , sans-serif, monospace, cursive 和 fantasy. serif 和 sans-serif 字型最為常用.

• 訪問者在你的Web頁面上看的字型取決於他們自己的計算機上安裝了哪些字型, 除非你使用Web字型.

• 在 font-family CSS屬性中指定候選字型是一個好主意, 以防使用者沒有安裝你的首選字型.

• 最後一個字型要指定為一個通用字型, 如 serif 或 sans-serif , 這樣一來, 如果找不到其他字型, 瀏覽器可以替換適當的字型.

• 如果你要使用某種字型, 而預設情況下使用者可能沒有安裝這種字型, 可以在CSS中使用 @font-face 規則.

• 字型大小通常使用畫素, em, 百分數或關鍵字指定.

• 如果使用畫素(“px”)來指定字型大小, 就是在告訴瀏覽器字母高度是多少畫素.

• em 和 % 是相對字型大小, 所以使用 em 和 % 指定字型大小是, 就意味著字型大小要相對於其父元素的字型大小指定.

• 使用相對字型大小可以讓你的頁面更可維護.

• 在 body 規則中使用字型大小關鍵字來設定基本字型大小, 這樣如果使用者希望文字更大或更小, 所有瀏覽器就能按比例縮放字型大小.

• 可以使用 font-weight CSS屬性設定文字為粗體.

• font-style 屬性用於建立斜體或傾斜文字, 斜體或傾斜文字是傾斜的.

• Web顏色是混合不同數量的紅, 綠, 藍色得到的.

• 如果混合紅色100%, 綠色100%和藍色100%, 可以得到白色.

• 如果混合紅色0%, 綠色0%和藍色0%, 可以得到黑色.

• CSS有16個基本顏色, 包括黑色, 白色, 紅色, 藍色, 和綠色, 以及150種擴充套件顏色.

• 可以使用紅, 綠, 藍百分數指定你想要的顏色, 也可以使用紅, 綠, 藍數值(0~255)指定, 或者使用顏色的十六進位制碼來指定顏色.

• 要找到你想要的一個顏色的十六進位制碼, 有一種很容易的方法, 可以使用一個照片編輯應用的顏色選取工具, 或者某個線上Web工具, 這樣的工具有很多.

• 表示顏色的十六進位制碼有6位, 每一位取值為0~F. 前兩位表示紅色數量, 接下來兩位表示綠色數量, 最後兩位表示藍色數量.

• 可以使用 text-decoration 屬性為文字建立一個下劃線. 有下劃線的文件通常會被使用者誤以為是連結文字, 所以要謹慎使用這個屬性.