Cascading Style Sheets (CSS)

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

body {
    background-color: lightblue;
}

以下面範例為例，background-color、color、text-align都是屬性，冒號後面的lightblue、white、center就是各自對應的值。首先，定義了body的背景顏色為淡藍。h1的文字顏色為白色並將文字置中，背景顏色為深藍。p的字體大小1.25em，也就是正常字體大小的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。使用External Style Sheet的好處及缺點是瀏覽器會進行快取(cache)動作，好處是顯示會更快，缺點是有時候更改的內容不會馬上反應。

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

並再修改html如下:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" type="text/css" href="my.css" />
    <title>CSS</title>
  </head>
  <body>
    <h1>吳濟聰</h1>
    <p>輔大資管系助理教授</p>
    <p>印地安那大學博士</p>
  </body>
</html>

Untitled

Selector

selector可以是 1.html的基本元素(element)，如:body、h1等等。上面的範例就是針對基本元素定義樣式。 2.當我們希望只針對某一群元件定義樣式，我們可以利用在html中所定義的class定義樣式。 3.當我們希望只針對某一個特定元件定義樣式，我們可以利用在html中所定義的id定義樣式。

要針對id定義樣式的話，在selector前加「#」:

#primaryHeading {
  background-color: black;
}

因為在同一個網頁中id是不能重複，如果有多個元件要套同一個樣式，那就要使用class，要針對class定義樣式的話，在selector前加「.」，注意，如果有同樣的屬性，class定義會覆蓋基本元素定義的。

.importantHeadings {
  background-color: brown;
  color: yellow;
}

my.css