網頁程式設計/CSS

目標

使用基本的 CSS 規則來設定 HTML 元素的常用屬性
識別 CSS 規則應用的順序
解決規則衝突
透過跟蹤 HTML 和 CSS 原始碼來繪製網頁

資源

第三章幻燈片
w3schools 上的教程
w3schools 上的 CSS 參考
198.209.19.99/~blu/book_examples/ch03-css-files/index.html

CSS 語法

CSS 代表層疊樣式表。CSS 檔案是附加到 HTML 檔案的外部/附加檔案，用於對網頁進行樣式設定。請注意，CSS 檔案的語法不同於 HTML 語法。CSS 檔案包含一組規則，應用這些規則將影響它所關聯的頁面的外觀。每個規則都以一個選擇器開頭，該選擇器將在頁面上選擇多個元素，而規則的主體指定哪個屬性應具有什麼值。CSS 規則的通用格式如下

selector {
  property: value;
  property: value;
  ...
  property: value;
}

以下示例規則選擇所有段落元素，並將文字顏色設定為紅色，並將段落中的文字居中對齊。

p {
     color: red;
     text-align: center;
}

您可以在 [1] 中看到執行的示例。

如示例所示，規則的主體可以包含多個以“;”結尾的語句/宣告。每個語句都是一個屬性名稱和值對（以“:”分隔）。

有三種方法可以將樣式表附加到檔案

外部樣式表文件（由 <head> 中的 <link> 元素指向）
內部樣式表（作為 <head> 中的 <style> 元素）
內聯樣式（作為元素的屬性）

以下示例顯示瞭如何將外部 CSS 檔案連結到 HTML。有關其他示例，請訪問 CSS 操作指南。

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

常用屬性

color

檢視此示例中設定字型顏色的不同方法。

font

您可以使用此站點來查詢瀏覽器中所有支援的字體系列。

樣式文字

font

position

裝飾和轉換

CSS3 陰影

text-shadow

浮動影像

float

層疊規則

CSS 規則也可以嵌入到 HTML 程式碼中，作為標籤的“style”屬性（內聯樣式）或作為 head 元素中的指令碼元素。如果我們在不同的位置指定了多個規則，但它們都影響頁面上的同一個元素，會發生什麼？這就是層疊（優先順序）規則發揮作用的地方。以下是 CSS 位置按優先順序降序排列

標籤的 style 屬性中的規則
head 中的指令碼元素中的規則
外部 CSS 檔案中的規則
從父元素繼承的規則
瀏覽器預設知道的規則

例如，內聯樣式將始終優先於其他樣式。如果元素沒有設定內聯樣式，瀏覽器將嘗試使用指令碼元素中的 CSS 規則。

當來自同一位置的兩個規則將相同的屬性設定為不同的值時，就會發生衝突，可以透過讓更具體的（緊密匹配的）規則覆蓋更通用的（或繼承的）規則來解決衝突，如果兩個規則匹配程度相同，則最後出現的規則生效。

由 id 選擇器設定的規則最具體。
由類選擇器、屬性選擇器或偽類選擇器設定的規則不太具體。
由標籤選擇器或偽元素選擇器設定的規則最不具體。

CSS 偽類

偽類允許我們對處於特定狀態的元素應用樣式，例如，以下規則僅在滑鼠懸停在選定元素上時才會生效。檢視此參考以獲取詳細資訊。

a:hover {
  background-color: red;
}

CSS 偽元素

CSS 偽元素用於為元素的指定部分設定樣式。以下兩個示例分別使用 CSS2 和 CSS3 語法。檢視此參考以獲取詳細資訊。

p:first-line {
    color: #ff0000;
}

p::first-line {
    color: #ff0000;
}

CSS3

CSS2 添加了新的選擇器，例如 nth-child、inline-block、:not、+，以及在頁面中嵌入字型的能力。它還提供對多列布局、透明度/不透明度、顏色漸變、陰影、圓角/邊框、邊框半徑、動畫/過渡和仿射變換（縮放、旋轉、透視）的內建支援。

CSS3 顏色

CSS3 提供了三種新的顏色指定方法。檢視此參考以獲取詳細資訊。

rgba(red%, green%, blue%, opacity-value)
hsl(hue-degrees, saturation%, lightness%)
hsla(hue-degrees, saturation%, lightness%, opacity-value)