Cascading Style Sheets (CSS)

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

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 )

CSS Colors

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

Untitled

在Files選單旁，點選「New File」icon，就會產生一個空白的檔案，複製並貼上下面的內容:

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。

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

並再修改html如下:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    **<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;
}