CSS 字體和文字效果：設定字體樣式和添加特殊的文字效果

在網頁設計中，文字是最基本且重要的元素之一。透過 CSS（階層式樣式表）的設定，我們可以輕鬆地調整字體樣式和添加特殊的文字效果，以提升網頁的視覺吸引力。本篇教學將介紹如何使用 CSS 來設定字體樣式和添加各種有趣的文字效果。

一、設定字體樣式

在 CSS 中，我們可以使用 “font-size” 屬性來設定字體的大小。例如，若要將字體大小設定為 16 像素，可以寫成：

body {
  font-size: 16px;
}

使用 “color” 屬性可以設定文字的顏色。你可以使用具體的顏色名稱（例如 “red”）、十六進位碼（例如 “#FF0000″）或 RGB 值來指定顏色。

h1 {
  color: blue;
}

透過 “font-family” 屬性，我們可以指定字體家族，以控制網頁上的文字外觀。常見的字體家族包括 Arial、Helvetica、Times New Roman 等。以下是一個例子：

p {
  font-family: Arial, sans-serif;
}

使用 “font-weight” 屬性可以將文字設定為粗體。這個屬性接受多個值，包括 “normal”、”bold” 和 “bolder”。以下是一個例子：

h2 {
  font-weight: bold;
}

透過 “font-style” 屬性，我們可以將文字設定為斜體。這個屬性接受多個值，包括 “normal”、”italic” 和 “oblique”。以下是一個例子：

em {
  font-style: italic;
}

使用 “text-decoration” 屬性可以添加文字下劃線效果。以下是一個例子：

a {
  text-decoration: underline;
}

透過 “vertical-align” 屬性，我們可以將文字設定為上標或下標。以下是一個例子：

sup {
  vertical-align: super;
}

sub {
  vertical-align: sub;
}

透過 CSS 的字體和文字效果設定，我們可以輕鬆地改善網頁的可讀性和視覺吸引力。這篇教學中介紹了如何設定字體樣式（大小、顏色和家族）以及添加特殊的文字效果（粗體、斜體、下劃線、上下標）。透過這些技巧，你可以打造出令人印象深刻的網頁內容，吸引更多的讀者和用戶。

請記住，在使用 CSS 設定字體和文字效果時，適度使用並確保內容易於閱讀，同時注意網頁的可用性和使用者體驗。希望這篇教學對你有所幫助，並能提升你的網頁設計技巧！

發佈留言