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>