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

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

在網頁設計中,透過 CSS(階層式樣式表)調整文字的顏色和字體大小,不僅能提升視覺效果,還能增進使用者體驗。以下將介紹如何使用 CSS 改變文字顏色和字體大小,並提供相關範例程式碼。

一、改變文字顏色

改變文字顏色可使內容更具吸引力。以下是常用的方法:

使用顏色名稱

CSS 提供預定義的顏色名稱,可直接使用。例如:

color: red; /* 設定文字顏色為紅色 */

延伸閱讀:CSS 的顏色名稱列表

使用十六進制值

# 開頭,後接六位數字,表示 RGB 色彩,範圍從00到FF。以下是一個範例,將文字顏色設定為綠色:

color: #00FF00; /* 設定文字顏色為綠色 */

使用 RGB 值

rgb() 函數指定紅、綠、藍三色的數值,範圍為 0 至 255。例如:

color: rgb(0, 0, 255); /* 設定文字顏色為藍色 */

二、改變字體大小

調整字體大小有助於提升可讀性。以下是常用的方法:

使用相對大小

相對於父元素的大小,可使用 emrem 單位。例如:

font-size: 1.2em; /* 設定文字大小為父元素的 1.2 倍 */

使用絕對大小

使用固定的像素值。例如:

font-size: 16px; /* 設定文字大小為 16 像素 */

結合相對和絕對大小

可同時設定相對大小和最小絕對大小,以確保在不同裝置上的可讀性。例如:

font-size: 1.2em;
min-font-size: 14px; /* 設定最小字體大小為 14 像素 */

結論

透過上述方法,您可以靈活地調整網頁中文字的顏色和大小,提升視覺效果和可讀性。

發佈留言

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