CSS 是一種用來設定 HTML 樣式的語言,目前最新版本為 CSS2.1 (CSS3 仍為草案)。用 CSS 設定樣式有兩種方式,一種是直接使用通用屬性 style,如以下範例 A,另一種則是使用 style 元素搭配 CSS 選擇器,如以下範例 B。從以下兩個例子可以明顯看出,範例 B 的寫法較精簡且可讀性亦較高。
範例 A:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table>
<tr>
<td style="font-family: arial; color: red;
font-size: 20px;">example</td>
<td style="font-family: arial; color: red;
font-size: 20px;">example</td>
<td style="font-family: arial; color: red;
font-size: 20px;">example</td>
</tr>
<tr>
<td style="font-family: arial; color: red;
font-size: 20px;">example</td>
<td style="font-family: arial; color: red;
font-size: 20px;">example</td>
<td style="font-family: arial; color: red;
font-size: 20px;">example</td>
</tr>
<tr>
<td style="font-family: arial; color: red;
font-size: 20px;">example</td>
<td style="font-family: arial; color: red;
font-size: 20px;">example</td>
<td style="font-family: arial; color: red;
font-size: 20px;">example</td>
</tr>
</table>
</body>
</html>範例 B:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
td {
font-family: arial;
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<table>
<tr>
<td>example</td>
<td>example</td>
<td>example</td>
</tr>
<tr>
<td>example</td>
<td>example</td>
<td>example</td>
</tr>
<tr>
<td>example</td>
<td>example</td>
<td>example</td>
</tr>
</table>
</body>
</html>