分類
網頁製作/軟體開發知識

CSS 樣式:如何改變文字顏色和字體大小

在網頁設計中,改變文字的顏色和字體大小是一種常見的需求。透過 CSS(階層式樣式表),我們可以輕鬆地調整網頁上的文字樣式,使其更加吸引人且易於閱讀。本篇文章將引導您學習如何使用 CSS 改變文字的顏色和字體大小,讓您的網頁內容更加出色。

一、改變文字顏色

改變文字的顏色可以使其在網頁上更加醒目,引起讀者的注意。以下是一些方法:

使用顏色名稱

在 CSS 中,您可以使用預定義的顏色名稱來改變文字的顏色。例如,要將文字顏色設定為紅色,您可以使用以下代碼:

color: red;

使用十六進制值

另一種常見的方法是使用十六進制值來表示顏色。每個顏色通道(紅、綠、藍)由兩個十六進制數字組成,範圍從00到FF。以下是一個示例,將文字顏色設定為綠色:

color: #00FF00;

使用 RGB 值

您還可以使用 RGB(紅、綠、藍)值來指定文字顏色。每個顏色通道的值範圍從0到255。以下是一個示例,將文字顏色設定為藍色:

color: rgb(0, 0, 255);

二、改變字體大小

改變字體大小可以提高網頁的可讀性,使文字更易於閱讀。以下是一些方法:

使用相對大小

相對大小是指相對於父元素的大小。您可以使用相對單位(例如 em 或 rem)來改變字體大小。以下是一個示例,將文字字體大小設定為1.2倍父元素的大小:

font-size: 1.2em;

使用絕對大小

絕對大小是指固定的像素大小。您可以使用像素(px)來指定字體大小。以下是一個示例,將文字字體大小設定為16像素:

font-size: 16px;

使用相對大小和絕對大小的組合

您也可以結合相對大小和絕對大小,以達到更靈活的字體大小設定。例如,您可以將字體大小設定為父元素大小的相對比例,同時指定一個最小的絕對大小。以下是一個示例:

font-size: 1.2em;
min-font-size: 14px;

結論

透過 CSS,您可以輕鬆地改變文字的顏色和字體大小,使網頁內容更具視覺吸引力和閱讀性。請記住,優秀的網頁設計應該考慮到不同的設備和使用者需求,並適當地調整文字樣式。希望本文能幫助您掌握這些基本的 CSS 技巧,讓您的網頁內容更加出色!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *