前幾天我們學了 HTML 骨架、語義化標籤,還有 CSS 排版和盒模型,網頁看起來不會亂跑了。但如果只是整齊排列,網站還是有點單調。今天就來聊聊文字的顏色、字體,還順便示範幾種 CSS 寫法,讓文字也能有自己的風格。
文字顏色可以用 CSS 的 color 屬性設定。有三種常用寫法:
h1 {
color: red;
}
這樣標題文字就會變成紅色,其他顏色像 blue、green、yellow 也都可以直接用名稱表示。
h1 {
color:** #99BBFF**;
}
十六進位色碼可以更精準選擇顏色,也可以搭配整體網站設計。
h1 {
color: rgb(255, 0, 255);
}
RGB 是用紅(R)、綠(G)、藍(B)三個數值混合,數值範圍 0~255,可以調整出各種想要的顏色。
除了文字顏色,元素的邊框顏色也可以用 border-color 設定,背景顏色則用 background-color。這樣文字、邊框和區塊都能搭配出整體風格。
字體也是很重要的一部分,用 font-family 可以改變整個網站的感覺。圓潤字型會給人輕鬆、可愛的感覺;正式字型會讓網站看起來穩重、專業。字體大小和粗細也很重要,font-size 可以讓標題大一點、段落小一點;font-weight 可以讓重要文字更醒目。字間和行距也能調整,letter-spacing 讓文字不擠在一起,line-height 讓段落更好讀。
我自己在練習時發現,光是換個字體、調整顏色或行距,整個網站就感覺不同了。以前看到漂亮網站,只覺得好看;現在懂了 CSS,才知道文字的顏色、字體和大小都能讓網站活起來。
總結來說,文字的顏色、字體、大小、間距,甚至邊框和背景雖然是小細節,但卻能大幅提升網站質感。今天練習後,我覺得排版不只是整齊排列,文字的風格也是讓網站更好看、更易讀的重要元素。下次可以試著搭配不同字體、顏色和背景,打造自己風格的文字,讓整個網站更有特色。