在進入實際練習之前，我們必須先建立一個觀念，CSS究竟是如何運作的，CSS 的語法核心是由**「選擇器（Selector）」、「屬性（Property）」與「屬性值（Value）」**這三者所構成。
選擇器 {
屬性: 屬性值;
}
當瀏覽器讀取到指令時，會先透過「選擇器」找到目標標籤，接著套用大括號內指定的「屬性」，並賦予其對應的「屬性值」，今天我們將介紹網頁視覺最重要、也最核心的兩大屬性類別：顏色與文字樣式。
在 CSS 中，控制文字顏色使用的是color屬性，而控制區塊背景顏色的則是 background-color屬性，實際上，指定顏色主要有以下三種方式來設定：
red、blue、lightblue），這最明顯，但能選擇的顏色非常有限，只適合快速測試。# 開頭，後續加上六個十六進位數字（例如#FF0000純紅，#333333深灰），這是目前前端開發中最常見、最精準且主流的指定方式。rgba()，第四個參數A代表的是透明度（Alpha），數值介於0（透明）到1（不透明）之間，這在設計網頁半透明特效時非常實用。<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<title>Day10 顏色屬性範例</title>
<style>
h1 {
color: #2c3e50;
}
p {
color: rgb(51, 51, 51);
}
.highlight {
background-color: rgba(255, 255, 0, 0.3);
}
</style>
</head>
<body>
<h1>網頁顏色觀念</h1>
<p>這是一段一般的內文文字。</p>
<p class="highlight">這是一段被標記、帶有淺黃色半透明背景的重點文字。</p>
</body>
</html>
了解完顏色後，第二步是優化文字的「可讀性」與「排版層級」，CSS提供了非常多的屬性來精準控制字體與間距。
font-size（字體大小）：常見的單位有相對單位em、rem或絕對單位 px（像素），在網頁設計中，建議根據標題與內文設定清晰的字級大小區隔，以用來建立良好的視覺階層。font-weight（字體粗細）：可以用關鍵字如bold（粗體）、normal（常規），或是更精準的數字（如400代表常規700 代表粗體）來控制。line-height（行高）：這是一個非常重要的可讀性屬性，它決定了行與行之間的垂直距離，如果行高太低，文字會擠在一起，行高太高則會讓版面鬆散，通常內文的行高建議設定在1.5到1.8之間，最符合人眼閱讀的舒適度。text-align（文字對齊）：控制文字在水平方向的對齊方式，其中包括了left（靠左）、right（靠右）與center（居中）。<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<title>Day10 文字排版範例</title>
<style>
.article-title {
text-align: center;
font-size: 28px;
font-weight: 700;
color: #e3bd23;
}
.article-content {
font-size: 16px;
line-height: 1.6;
color: #9ebb38;
background-color: #ede6e6;
}
</style>
</head>
<body>
<h2 class="article-title">現代前端修練文章標題</h2>
<p class="article-content">
優良的網頁設計必須兼顧視覺的美觀與閱讀的舒適度，透過調整字體大小與行高，我們能夠引導讀者的視線，讓長篇幅的技術文章在網頁上呈現時，依然保持高度的可讀性。
</p>
<p class="article-content">
我們成功學會運用CSS的文字排版技巧，從字距調整到行高設定，讓每一段文字都能夠清晰易讀，用來提升使用者的閱讀體驗。
</p>
<p class="article-content" style="color: #ff5733;">
還有如何改變顏色，合適的顏色選擇可以提升使用者的閱讀效果，不合適的選擇可以讓使用者眼睛很痛。
</p>
</body>
</html>
今天我們由淺入深地探討了CSS的基本語法架構，並掌握了控制網頁顏色（十六進位、RGBA）與文字排版（字級、粗細、行高與對齊）等等的核心屬性，這些屬性雖然看似基礎，卻是構成網頁整體視覺質感的根本基石。
在明天，我們將介紹css內部的優先順序，了解當顏色選擇有多種的時候，程式會根據什麼邏輯來選擇。
iThome鐵人賽
看影片追技術