CSS 入門

在本文中，我們將以一個簡單的 HTML 文件為例，並應用 CSS，在此過程中學習一些有關該語言的實用知識。

先決條件 已安裝基本軟體，瞭解有關檔案操作的基本知識，以及 HTML 基礎知識（學習HTML 簡介。）
目標 瞭解將 CSS 文件連結到 HTML 檔案的基本知識，並能夠使用 CSS 進行簡單的文字格式化。

從一些 HTML 開始

我們的起點是一個 HTML 文件。如果想在自己的電腦上操作，可以複製下面的程式碼。將下面的程式碼儲存為index.html，並儲存在您機器上的某個資料夾中。

html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Getting started with CSS</title>
  </head>

  <body>
    <h1>I am a level one heading</h1>

    <p>
      This is a paragraph of text. In the text is a
      <span>span element</span> and also a
      <a href="https://example.com">link</a>.
    </p>

    <p>
      This is the second paragraph. It contains an <em>emphasized</em> element.
    </p>

    <ul>
      <li>Item <span>one</span></li>
      <li>Item two</li>
      <li>Item <em>three</em></li>
    </ul>
  </body>
</html>

注意：如果您在無法輕鬆建立檔案的裝置或環境中閱讀本文，請不要擔心——下面提供了即時程式碼編輯器，允許您直接在頁面中編寫示例程式碼。

將 CSS 新增到我們的文件中

首先，我們需要告訴 HTML 文件，我們有一些 CSS 規則要它使用。有三種常見的將 CSS 應用於 HTML 文件的方法，但現在，我們將重點介紹最常用且最有效的方法——從文件的頭部連結 CSS。

在與 HTML 文件相同的資料夾中建立一個檔案，並將其儲存為styles.css。.css 擴充套件名錶明這是一個 CSS 檔案。

要將styles.css 連結到index.html，請在 HTML 文件的 <head> 中新增以下行

html
<link rel="stylesheet" href="styles.css" />

此 <link> 元素告訴瀏覽器我們有一個樣式表，使用rel 屬性，以及樣式表的位置作為href 屬性的值。您可以透過在styles.css 中新增規則來測試 CSS 是否有效。使用您的程式碼編輯器，將以下內容新增到您的 CSS 檔案中

css
h1 {
  color: red;
}

儲存 HTML 和 CSS 檔案，並在網頁瀏覽器中重新載入頁面。文件頂部的第一級標題現在應該變成紅色。如果成功了，恭喜您——您已成功將 CSS 應用於 HTML 文件。如果沒有成功，請仔細檢查您是否正確輸入了所有內容。

您可以繼續在本地styles.css 中工作，或者可以使用下面的互動式編輯器來繼續本教程。互動式編輯器充當第一個面板中的 CSS 已連結到 HTML 文件，就像我們在上面的文件中所做的那樣。

為 HTML 元素設定樣式

透過將標題變為紅色，我們已經證明可以定位和設定 HTML 元素的樣式。我們透過定位元素選擇器來實現這一點——這是一種直接匹配 HTML 元素名稱的選擇器。要定位文件中的所有段落，可以使用選擇器p。要將所有段落變為綠色，可以使用

css
p {
  color: green;
}

您可以透過逗號分隔選擇器來同時定位多個選擇器。如果您希望所有段落和所有列表項都變為綠色，您的規則將如下所示

css
p,
li {
  color: green;
}

在下面的互動式編輯器（編輯程式碼框）或本地 CSS 文件中嘗試一下。

更改元素的預設行為

當我們檢視一個標記良好的 HTML 文件時，即使是像我們的示例這樣簡單的文件，我們也可以看到瀏覽器如何透過新增一些預設樣式使 HTML 可讀。標題很大且粗體，列表帶有專案符號。這是因為瀏覽器具有包含預設樣式的內部樣式表，它們預設情況下會應用於所有頁面；如果沒有它們，所有文字都會堆在一起，我們必須從頭開始設定所有樣式。所有現代瀏覽器都以幾乎相同的方式預設顯示 HTML 內容。

但是，您通常會想要其他東西，而不是瀏覽器選擇的東西。這可以透過選擇您要更改的 HTML 元素並使用 CSS 規則更改其外觀來實現。一個很好的例子是<ul>，無序列表。它有列表專案符號。如果您不想要這些專案符號，可以像這樣刪除它們

css
li {
  list-style-type: none;
}

現在嘗試將其新增到您的 CSS 中。

list-style-type 屬性是一個值得在 MDN 上檢視的屬性，瞭解哪些值受支援。檢視list-style-type 的頁面，您將在頁面頂部找到一個互動式示例，可以在其中嘗試一些不同的值，然後所有允許的值將在頁面下方詳細介紹。

檢視該頁面，您會發現除了刪除列表專案符號之外，您還可以更改它們——嘗試使用square 值將它們更改為方形專案符號。

新增類

到目前為止，我們已經根據 HTML 元素名稱對元素進行了樣式設定。只要您希望文件中所有此類型別的元素看起來都一樣，這就可以實現。要選擇元素的子集而不更改其他元素，可以在 HTML 元素中新增一個類，並在 CSS 中定位該類。

  1. 在您的 HTML 文件中，將 class 屬性 新增到第二個列表項。您的列表現在將如下所示
    html
    <ul>
  <li>Item one</li>
  <li class="special">Item two</li>
  <li>Item <em>three</em></li>
</ul>
  2. 在 CSS 中，可以透過建立以句點開頭的選擇器來定位special 類。將以下內容新增到您的 CSS 檔案中
    css
    .special {
  color: orange;
  font-weight: bold;
}
  3. 儲存並重新整理以檢視結果。

您可以將special 類應用於頁面上任何您希望具有與該列表項相同外觀的元素。例如，您可能希望段落中的<span> 也變為橙色和粗體。嘗試將special 類新增到它，然後重新載入頁面並檢視發生了什麼。

有時您會看到帶有選擇器的規則，該選擇器列出了 HTML 元素選擇器以及類

css
li.special {
  color: orange;
  font-weight: bold;
}

此語法表示“定位任何具有 special 類的li 元素”。如果您要這樣做，那麼您將無法透過將類新增到它來將類應用於<span> 或其他元素；您必須將該元素新增到選擇器列表中

css
li.special,
span.special {
  color: orange;
  font-weight: bold;
}

您可以想象，一些類可能會應用於許多元素，您不想每次需要新增新樣式時都必須編輯 CSS。因此，有時最好繞過元素並引用類，除非您知道要為某個元素建立一些特殊規則，並且可能希望確保它們不應用於其他元素。

根據元素在文件中的位置設定樣式

有時您希望根據元素在文件中的位置進行不同的樣式設定。有一些選擇器可以幫助您完成此操作，但現在我們只關注其中幾個。在我們的文件中，有兩個<em> 元素——一個在段落內，另一個在列表項內。要僅選擇巢狀在<li> 元素內的<em>，可以使用稱為後代組合器的選擇器，其形式是兩個其他選擇器之間的空格。

將以下規則新增到您的樣式表中

css
li em {
  color: rebeccapurple;
}

此選擇器將選擇任何位於（後代）<li> 內部的<em> 元素。因此，在您的示例文件中，您應該發現第三個列表項中的<em> 現在是紫色，但段落內的<em> 則保持不變。

您可能還想嘗試在段落直接位於 HTML 中相同層次結構級別的標題之後時對其進行樣式設定。為此，請在選擇器之間放置一個+（下一個兄弟組合器）。

嘗試將此規則也新增到您的樣式表中

css
h1 + p {
  font-size: 200%;
}

下面的即時示例包含上面的兩個規則。嘗試新增一條規則，如果跨度位於段落內，則將其變為紅色。您將知道是否正確，因為第一個段落中的跨度將變為紅色，但第一個列表項中的跨度不會改變顏色。

注意：正如您所見，CSS 為我們提供了多種定位元素的方法，而我們目前只是觸及了皮毛！我們將在本課程的後面部分的選擇器 文章中詳細介紹所有這些選擇器以及更多選擇器。

根據狀態設定樣式

在本教程中，我們要介紹的最後一種樣式型別是根據元素狀態對其進行樣式設定的能力。一個簡單的例子是連結的樣式設定。當我們設定連結的樣式時，我們需要定位 <a>（錨）元素。它具有不同的狀態，具體取決於它是未訪問、已訪問、懸停、鍵盤聚焦還是正在被點選（啟用）的過程中。您可以使用 CSS 來定位這些不同的狀態——下面的 CSS 將未訪問的連結設定為粉紅色，已訪問的連結設定為綠色。

css
a:link {
  color: pink;
}

a:visited {
  color: green;
}

您可以更改使用者懸停時連結的外觀，例如透過刪除下劃線，這可以透過下一條規則實現

css
a:hover {
  text-decoration: none;
}

在下面的即時示例中，您可以玩弄連結各種狀態的不同值。我們已經為它添加了上面的規則，現在意識到粉紅色太淡了，難以閱讀——為什麼不將其更改為更好的顏色？您可以使連結變為粗體嗎？

我們已在懸停時從連結中刪除了下劃線。您可以從連結的所有狀態中刪除下劃線。但是，值得記住的是，在實際站點中，您需要確保訪問者知道連結是連結。保留下劃線對於讓人們意識到段落中的某些文字可以點選非常重要——這是他們習慣的行為。與 CSS 中的所有內容一樣，有可能會透過更改使文件的可訪問性降低——我們將努力在適當的地方突出潛在的陷阱。

注意：在這些課程以及整個 MDN 中，您會經常看到提到無障礙性。當我們談論無障礙性時，我們指的是網頁必須讓每個人都能理解和使用的要求。

您的訪問者可能使用帶有滑鼠或觸控板的電腦，也可能使用帶有觸控式螢幕的手機。或者他們可能使用螢幕閱讀器，它會朗讀文件內容，或者他們可能需要使用更大的文字，或者僅使用鍵盤瀏覽網站。

一個普通的 HTML 文件通常對每個人來說都是無障礙的——當您開始設定該文件的樣式時，重要的是不要降低其可訪問性。

組合選擇器和組合符

值得注意的是，您可以將多個選擇器和組合器組合在一起。例如

css
/* selects any <span> that is inside a <p>, which is inside an <article>  */
article p span {
}

/* selects any <p> that comes directly after a <ul>, which comes directly after an <h1>  */
h1 + ul + p {
}

您也可以將多種型別組合在一起。嘗試將以下內容新增到您的程式碼中

css
body h1 + p .special {
  color: yellow;
  background-color: black;
  padding: 5px;
}

這將為任何具有 special 類且位於 <h1> 之後、位於 <body> 內的 <p> 內的元素設定樣式。呼！

在我們提供的原始 HTML 中，唯一設定樣式的元素是 <span class="special">。

如果您現在覺得這很複雜，請不要擔心 - 隨著您編寫更多 CSS，您將很快開始上手。

總結

在本文中，我們已經介紹了使用 CSS 為文件設定樣式的幾種方法。在接下來的課程中，我們將繼續學習這些知識。但是，您現在已經瞭解了足夠的內容來設定文字樣式、根據不同的元素定位方法應用 CSS，以及在 MDN 文件中查詢屬性和值。

在下一課中，我們將瞭解 CSS 的結構。