4.1 用 CSS 設定樣式

  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>