CSS 結構

現在您已經開始瞭解 CSS 的用途和使用方法，讓我們來檢查一下 CSS 的結構。

先決條件 已安裝基本軟體，瞭解檔案操作的基礎知識以及 HTML 基礎知識（學習HTML 簡介）。
目標 詳細學習 CSS 的基本語法結構。

將 CSS 應用於 HTML

首先，讓我們檢查三種將 CSS 應用於文件的方法：使用外部樣式表、使用內部樣式表和使用內聯樣式。

外部樣式表

外部樣式表將 CSS 放在一個單獨的檔案中，該檔案具有 .css 副檔名。這是將 CSS 引入文件最常見和最有用的方法。您可以將單個 CSS 檔案連結到多個網頁，使用相同的 CSS 樣式表為所有網頁設定樣式。在CSS 入門中，我們將外部樣式錶鏈接到我們的網頁。

您可以從 HTML <link> 元素引用外部 CSS 樣式表

html
<!doctype html>
<html lang="en-GB">
  <head>
    <meta charset="utf-8" />
    <title>My CSS experiment</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>
  </body>
</html>

CSS 樣式表文件可能如下所示

css
h1 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}

p {
  color: red;
}

<link> 元素的 href 屬性需要引用檔案系統上的檔案。在上面的示例中，CSS 檔案與 HTML 文件位於同一資料夾中，但您可以將其放在其他位置並調整路徑。以下三個示例

html
<!-- Inside a subdirectory called styles inside the current directory -->
<link rel="stylesheet" href="styles/style.css" />

<!-- Inside a subdirectory called general, which is in a subdirectory called styles, inside the current directory -->
<link rel="stylesheet" href="styles/general/style.css" />

<!-- Go up one directory level, then inside a subdirectory called styles -->
<link rel="stylesheet" href="../styles/style.css" />

內部樣式表

內部樣式表位於 HTML 文件內。要建立內部樣式表，您需要將 CSS 放置在 HTML <head> 內包含的 <style> 元素中。

內部樣式表的 HTML 可能如下所示

html
<!doctype html>
<html lang="en-GB">
  <head>
    <meta charset="utf-8" />
    <title>My CSS experiment</title>
    <style>
      h1 {
        color: blue;
        background-color: yellow;
        border: 1px solid black;
      }

      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>
  </body>
</html>

在某些情況下，內部樣式表可能很有用。例如，您可能正在使用內容管理系統，而您無法修改外部 CSS 檔案。

但是對於包含多個頁面的站點，內部樣式表成為一種效率較低的工作方式。要使用內部樣式表將統一的 CSS 樣式應用於多個頁面，您必須在將使用該樣式的每個網頁中都包含一個內部樣式表。效率損失也延續到站點維護。對於內部樣式表中的 CSS，即使是一個簡單的樣式更改也可能需要對多個網頁進行編輯，從而存在風險。

內聯樣式

內聯樣式是在 style 屬性中包含的 CSS 宣告，這些宣告會影響單個 HTML 元素。在 HTML 文件中實現內聯樣式可能如下所示

html
<!doctype html>
<html lang="en-GB">
  <head>
    <meta charset="utf-8" />
    <title>My CSS experiment</title>
  </head>
  <body>
    <h1 style="color: blue;background-color: yellow;border: 1px solid black;">
      Hello World!
    </h1>
    <p style="color:red;">This is my first CSS example</p>
  </body>
</html>

儘可能避免以這種方式使用 CSS。這與最佳實踐相反。首先，對於維護而言，這是 CSS 效率最低的實現方式。一個樣式更改可能需要在單個網頁中進行多次編輯。其次，內聯 CSS 還將（CSS）表示程式碼與 HTML 和內容混合，使所有內容都更難以閱讀和理解。分離程式碼和內容使所有網站工作人員都能更輕鬆地進行維護。

在某些情況下，內聯樣式更為常見。如果您的工作環境非常嚴格，則可能必須訴諸使用內聯樣式。例如，您的 CMS 可能只允許您編輯 HTML 主體。您還可能會在 HTML 電子郵件中看到大量內聯樣式，以實現與儘可能多的電子郵件客戶端的相容性。

使用本文中的 CSS 進行練習

對於接下來的練習，請在您的計算機上建立一個資料夾。您可以隨意命名該資料夾。在資料夾中，複製下面的文字以建立兩個檔案

index.html

html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>My CSS experiments</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <p>Create your test HTML here</p>
  </body>
</html>

styles.css

css
/* Create your test CSS here */

p {
  color: red;
}

當您找到要嘗試的 CSS 時，請用一些要設定樣式的 HTML 替換 HTML <body> 內容，然後將您的測試 CSS 程式碼新增到 CSS 檔案中。

或者，您也可以使用下面的互動式編輯器。

繼續閱讀並享受樂趣！

選擇器

選擇器會定位 HTML 以將樣式應用於內容。我們已經在CSS 入門教程中發現了各種選擇器。如果 CSS 未按預期應用於內容，則您的選擇器可能與您認為它應該匹配的方式不匹配。

每個 CSS 規則都以選擇器（或選擇器列表）開頭，以便告訴瀏覽器應將規則應用於哪個元素或元素。以下所有示例都是有效的選擇器或選擇器列表。

css
h1
a:link
.manythings
#onething
*
.box p
.box p:first-child
h1, h2, .intro

嘗試建立一些使用上述選擇器的 CSS 規則。新增 HTML 以供選擇器設定樣式。如果上述任何語法不熟悉，請嘗試搜尋 MDN。

注意：您將在下一個模組中學習更多關於選擇器的知識：CSS 選擇器。

特異性

您可能會遇到兩個選擇器選擇相同 HTML 元素的情況。考慮以下樣式表，其中 p 選擇器將段落文字設定為藍色。但是，還有一個類將所選元素的文字設定為紅色。

css
.special {
  color: red;
}

p {
  color: blue;
}

假設在我們的 HTML 文件中，我們有一個類為 special 的段落。兩條規則都適用。哪個選擇器優先？您是否希望看到藍色或紅色的段落文字？

html
<p class="special">What color am I?</p>

CSS 語言有規則來控制在發生衝突時哪個選擇器更強大。這些規則稱為級聯和特異性。在下面的程式碼塊中，我們為 p 選擇器定義了兩個規則，但段落文字將為藍色。這是因為將段落文字設定為藍色的宣告出現在樣式表中較晚的位置。樣式表中較後的樣式會替換樣式表中較早出現的衝突樣式。這是級聯規則。

css
p {
  color: red;
}

p {
  color: blue;
}

但是，在我們之前類選擇器和元素選擇器衝突的示例中，類優先，將段落文字呈現為紅色。即使樣式表中稍後出現衝突的樣式，為什麼會發生這種情況？類被評為更具體，即比元素選擇器具有更高的特異性，因此它會取消其他衝突的樣式宣告。

自己嘗試一下這個實驗！新增 HTML，然後將兩個 p { } 規則新增到您的樣式表中。接下來，將第一個 p 選擇器更改為 .special 以檢視它如何更改樣式。

特異性和級聯規則一開始可能看起來很複雜。隨著您對 CSS 的熟悉，這些規則更容易理解。下一個模組中的級聯和繼承部分將詳細解釋這一點，包括如何計算特異性。

現在，請記住存在特異性。有時，CSS 可能會無法按預期應用，因為樣式表中的其他內容具有更高的特異性。認識到可能有多個規則適用於一個元素是解決此類問題的第一步。

屬性和值

在最基本的層面上，CSS 由兩個元件組成

  • 屬性：這些是人類可讀的識別符號，指示您要修改哪些樣式特徵。例如，font-size、width、background-color。
  • 值：每個屬性都分配一個值。此值指示如何設定屬性的樣式。

下面的示例突出顯示了一個屬性和值。屬性名稱為 color，值為 blue。

A declaration highlighted in the CSS

當屬性與值配對時，此配對稱為CSS 宣告。CSS 宣告位於CSS 宣告塊中。在下面的示例中，突出顯示標識了 CSS 宣告塊。

A highlighted declaration block

最後，CSS 宣告塊與選擇器配對以生成CSS 規則集（或CSS 規則）。下面的示例包含兩條規則：一條用於 h1 選擇器，另一條用於 p 選擇器。彩色突出顯示標識了 h1 規則。

The rule for h1 highlighted

將 CSS 屬性設定為特定值是定義文件佈局和樣式的主要方式。CSS 引擎會計算哪些宣告適用於頁面的每個元素。

CSS 屬性和值不區分大小寫。屬性值對中的屬性和值之間用冒號 (:) 分隔。

查詢下面列出的屬性的不同值。編寫將樣式應用於不同 HTML 元素的 CSS 規則

警告：如果屬性未知，或者如果值對於給定屬性無效，則宣告將被處理為無效。瀏覽器 CSS 引擎會完全忽略它。

警告：在 CSS（和其他 Web 標準）中，已同意使用美式拼寫作為標準，在存在語言差異或不確定性時。例如，colour 應拼寫為 color，因為 colour 將不起作用。

函式

雖然大多數值都是相對簡單的關鍵字或數值，但有些值採用函式的形式。

calc() 函式

例如，calc() 函式可以在 CSS 中進行簡單的數學運算

html
<div class="outer"><div class="box">The inner box is 90% - 30px.</div></div>
css
.outer {
  border: 5px solid black;
}

.box {
  padding: 10px;
  width: calc(90% - 30px);
  background-color: rebeccapurple;
  color: white;
}

呈現為

函式由函式名和括號組成，括號用於括起函式的值。在上面的 calc() 示例中，這些值將此框的寬度定義為包含塊寬度的 90%，減去 30 畫素。計算結果不是可以預先計算並作為靜態值輸入的內容。

轉換函式

另一個示例是 transform 的各種值，例如 rotate()。

html
<div class="box"></div>
css
.box {
  margin: 30px;
  width: 100px;
  height: 100px;
  background-color: rebeccapurple;
  transform: rotate(0.8turn);
}

上述程式碼的輸出如下所示

查詢下面列出的屬性的不同值。編寫將樣式應用於不同 HTML 元素的 CSS 規則

@規則

CSS @規則（發音為“at-rules”）提供了有關 CSS 應執行的操作或其行為方式的說明。一些 @規則很簡單，只需一個關鍵字和一個值即可。例如，@import 將樣式表匯入到另一個 CSS 樣式表中

css
@import "styles2.css";

您可能會遇到的一個常見 @規則是 @media，它用於建立媒體查詢。媒體查詢使用條件邏輯來應用 CSS 樣式。

在下面的示例中，樣式表為 <body> 元素定義了預設的粉紅色背景。但是，之後有一個媒體查詢定義瞭如果瀏覽器視口寬度超過 30em，則背景為藍色。

css
body {
  background-color: pink;
}

@media (min-width: 30em) {
  body {
    background-color: blue;
  }
}

您將在這些教程中遇到其他 @規則。

看看您是否可以新增一個根據視口寬度更改樣式的媒體查詢。更改瀏覽器視窗的寬度以檢視結果。

簡寫

一些屬性，如 font、background、padding、border 和 margin 被稱為簡寫屬性。這是因為簡寫屬性在一行中設定多個值。

例如，這行程式碼

css
/* In 4-value shorthands like padding and margin, the values are applied
   in the order top, right, bottom, left (clockwise from the top). There are also other
   shorthand types, for example 2-value shorthands, which set padding/margin
   for top/bottom, then left/right */
padding: 10px 15px 15px 5px;

等價於以下四行程式碼

css
padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 5px;

這行程式碼

css
background: red url(bg-graphic.png) 10px 10px repeat-x fixed;

等價於以下五行程式碼

css
background-color: red;
background-image: url(bg-graphic.png);
background-position: 10px 10px;
background-repeat: repeat-x;
background-attachment: fixed;

在課程的後面，您會遇到許多其他簡寫屬性的例子。MDN 的CSS 參考是關於任何簡寫屬性的更多資訊的良好資源。

嘗試在您自己的 CSS 練習中使用這些宣告（上面），以便更加熟悉它的工作原理。您還可以嘗試不同的值。

警告：使用 CSS 簡寫的一個不太明顯的方面是如何重置省略的值。在 CSS 簡寫中未指定的屬性值將恢復為其初始值。這意味著 CSS 簡寫中的省略可以覆蓋先前設定的值。

註釋

與任何編碼工作一樣，最好在 CSS 旁邊編寫註釋。這有助於您在以後返回修復或增強程式碼時記住程式碼的工作原理。它還有助於其他人理解程式碼。

CSS 註釋以/*開頭，以*/結束。在下面的示例中，註釋標記了程式碼不同部分的開始。這有助於在程式碼庫變得越來越大的時候進行導航。有了這種註釋，在程式碼編輯器中搜索註釋就成為了一種有效查詢程式碼段的方法。

css
/* Handle basic element styling */
/* ---------------------------- */
body {
  font:
    1em/150% Helvetica,
    Arial,
    sans-serif;
  padding: 1em;
  margin: 0 auto;
  max-width: 33em;
}

@media (min-width: 70em) {
  /* Increase the global font size on larger screens or windows
     for better readability */
  body {
    font-size: 130%;
  }
}

h1 {
  font-size: 1.5em;
}

/* Handle specific elements nested in the DOM */
div p,
#id:first-line {
  background-color: red;
  border-radius: 3px;
}

div p {
  margin: 0;
  padding: 1em;
}

div p + p {
  padding-top: 0;
}

“註釋掉”程式碼對於臨時停用程式碼段以進行測試也很有用。在下面的示例中，.special 的規則透過“註釋掉”程式碼而被停用。

css
/*.special {
  color: red;
}*/

p {
  color: blue;
}

嘗試在您的 CSS 中添加註釋。

空白字元

空白字元指的是實際的空格、製表符和換行符。就像瀏覽器忽略 HTML 中的空白字元一樣，瀏覽器也會忽略 CSS 中的空白字元。空白字元的價值在於它可以提高可讀性。

在下面的示例中，每個宣告（以及規則的開始/結束）都獨佔一行。這可能是一種編寫 CSS 的好方法。它使維護和理解 CSS 變得更容易。

css
body {
  font:
    1em/150% Helvetica,
    Arial,
    sans-serif;
  padding: 1em;
  margin: 0 auto;
  max-width: 33em;
}

@media (min-width: 70em) {
  body {
    font-size: 130%;
  }
}

h1 {
  font-size: 1.5em;
}

div p,
#id:first-line {
  background-color: red;
  border-radius: 3px;
}

div p {
  margin: 0;
  padding: 1em;
}

div p + p {
  padding-top: 0;
}

下一個示例顯示了以更壓縮格式編寫的等效 CSS。儘管這兩個示例的工作原理相同，但下面的示例更難以閱讀。

css
body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;}
@media (min-width: 70em) { body { font-size: 130%;}}

h1 {font-size: 1.5em;}

div p, #id:first-line {background-color: red; border-radius: 3px;}
div p {margin: 0; padding: 1em;}
div p + p {padding-top: 0;}

對於您自己的專案，您將根據個人喜好格式化程式碼。對於團隊專案，您可能會發現團隊或專案有自己的樣式指南。

警告：雖然空白字元在 CSS 宣告中分隔值，但屬性名稱永遠不能包含空白字元。

例如，這些宣告是有效的 CSS

css
margin: 0 auto;
padding-left: 10px;

但這些宣告是無效的

css
margin: 0auto;
padding- left: 10px;

您看到空格錯誤了嗎？首先，0auto不被識別為margin屬性的有效值。0auto條目旨在表示兩個單獨的值：0和auto。其次，瀏覽器不識別padding-作為有效屬性。正確的屬性名稱（padding-left）被一個錯誤的空格隔開。

您應該始終確保用至少一個空格將不同的值彼此分隔開。將屬性名稱和屬性值保持為單個不間斷的字串。

要了解空格如何破壞 CSS，請嘗試在測試 CSS 中使用空格進行操作。

總結

至此，您應該對 CSS 的結構有了更好的瞭解。瞭解瀏覽器如何使用 HTML 和 CSS 來顯示網頁也很有用。下一篇文章CSS 的工作原理解釋了這個過程。