iT邦幫忙

2025 iThome 鐵人賽

DAY 7
0
Modern Web

Modern Web學習札記:初學者的探索系列 第 7

Day 7:顏色與字體:讓文字有風格

  • 分享至 

  • xImage
  •  

前幾天我們學了 HTML 骨架、語義化標籤,還有 CSS 排版和盒模型,網頁看起來不會亂跑了。但如果只是整齊排列,網站還是有點單調。今天就來聊聊文字的顏色、字體,還順便示範幾種 CSS 寫法,讓文字也能有自己的風格。
文字顏色可以用 CSS 的 color 屬性設定。有三種常用寫法

1.直接寫顏色名稱

h1 {
color: red;
}

這樣標題文字就會變成紅色,其他顏色像 blue、green、yellow 也都可以直接用名稱表示。

2.使用十六進位色碼

h1 {
color:** #99BBFF**;
}

十六進位色碼可以更精準選擇顏色,也可以搭配整體網站設計。

3.使用 RGB 色碼

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,才知道文字的顏色、字體和大小都能讓網站活起來。

總結來說,文字的顏色、字體、大小、間距,甚至邊框和背景雖然是小細節,但卻能大幅提升網站質感。今天練習後,我覺得排版不只是整齊排列,文字的風格也是讓網站更好看、更易讀的重要元素。下次可以試著搭配不同字體、顏色和背景,打造自己風格的文字,讓整個網站更有特色。


上一篇
Day 6:排版基礎:區塊與行內元素
下一篇
Day 8:從平面到立體—背景、邊框與陰影應用
系列文
Modern Web學習札記:初學者的探索11
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言