[CSS]色彩與文字

大綱

1. 顏色
• color
2. 背景顏色
• background-color
3. 顏色的設定種類
• 直接指定顏色名稱
  ex: color:red;
• rgb值(紅, 綠, 藍)
  ex:rgb(255, 255, 255)
• hex碼：以16進位表示紅, 綠, 藍
  ex:#ffffff
4. 背景進階設定
• 背景顏色

<style> body{ background-color: pink; } </style>

• 背景圖片

background-image:url("圖片位置")

• 背景重複
• background-repeat: repeat|repeat-x|repeat-y|no-repeat
• 重複方式
• 橫向重複：repeat-x
• 直向重複：repeat-y
• 無限重複：repeat
• 不重複：no-repeat
• 背景大小

background-size: 寬度 高度

• 背景位置

background-position: 水平(left|center|right) 垂直位置(top|center|bottom)

5. 透明度

對於顏色或背景色設定透明度	對於整個標籤設定透明度
rgba(紅, 綠, 藍, 透明度) 紅, 綠, 藍設定值0~255 透明度0~1 (數字越小越透明)	opacity:0.5

6. 文字相關的設定

樣式	名稱	說明	寫法
字型	font-family	設定整個網頁字型 font-family: 字型一、字型二、字型三	body { font-family: Georgia, 'Times New Roman', Times, serif; }
字體大小	font-size	大小單位 px em:相對於16px的大小	font-size: 20px;
粗細	font-weight	設定值 文字：lighter, normal, bold 數字：100 ~ 900 (400 = normal, 700 = bold)	font-weight: lighter;
風格	font-style	設定值 正常的字型：normal 斜體的字型：italic	font-style: italic;
間距	letter-spacing	設定值 (單位px)	letter-spacing: 50px;
字距	word-spacing	設定值 (單位px)	word-spacing: 50px;
行高	line-height	設定值 (倍數，無單位)	line-height:50;
文字對齊	text-align	設定值 靠左：left 靠右：right 置中：center	text-align:center;
裝飾線	text-decoration	設定值 無裝飾：none 文字下方的線：underline 文字上方的線：overline 刪除線：line-through	text-decoration:none;

7. 清單
list-style-type: 設定值
• none: 無清單符號
• disc: 小圓點
• circle: 小圓圈
• square: 小方塊
• decimal: 數字
• upper-roman: 大寫羅馬符號
• lower-roman: 小寫羅馬符號