Style

從表格及表單的課程中，我們開始介紹style的應用，使用inline style及internal style的方式撰寫。這兩種使用方法很簡單，但是，當我們開發系統時，為了維護的方便，通常會使用external的方式撰寫。

HTML Styles
- HTML Styles - CSS

inline style的寫法:

<body style="background-color: lightblue;">

</bod>

internal style的寫法:

<head>
 <style>
   body {
     background-color: lightblue;
   }
 </style>
</head>
<body>

</bod>

後面我們會介紹external style的寫法。

Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS)是用來描述HTML的樣式，CSS的語法是一開始是selector(選取器)，例如:body，也就是要定義的對象，後面大括號中間就是不同屬性的值，例如: 將背景顏色(background)設為淡藍色(lightblue)。

body {
    background-color: lightblue;
}

<aside> 💡

CSS各種屬性會在下兩次課程中比較有系統性的介紹，以下先介紹一些常用的屬性

</aside>

以下面範例為例，background-color、color、text-align都是屬性，冒號後面的lightblue、white、center就是各自對應的值。首先，定義了body的背景顏色為淡藍。h1的文字顏色為白色並將文字置中，背景顏色為深藍。p的字體大小1.25em，也就是正常字體大小(嚴格說是「M」)的1.25倍，這樣的話，當使用者調整文字大小，就會跟著調整。(詳參:一次搞懂 CSS 字體單位：px、em、rem 和 % 、Pixels to Ems Conversion )

請新增一個檔案，檔名是my.css

body {
    background-color: lightblue;
}

h1 {
    background-color: darkblue;
    color: white;
    text-align: center;
}

p {
    font-size: 1.25em;
}

External Style Sheet

如果我們希望同樣的設定能應用在多個網頁，就應該使用External Style Sheet。使用External Style Sheet的方法是將定義儲存在一個檔案，如: my.css，將以上檔案內容存為my.css。

<aside> 💡

也可以使用@import，建議使用link，因為利用link可以平行下載。

</aside>

<link rel="stylesheet" type="text/css" href="my.css"/>