CSS 基礎

CSS（層疊樣式表）是樣式化 Web 內容的程式碼。CSS 基礎將引導您瞭解入門所需的內容。我們將回答以下問題：如何使文字變為紅色？如何使內容在（網頁）佈局中的特定位置顯示？如何使用背景影像和顏色裝飾我的網頁？

什麼是 CSS？

與 HTML 一樣，CSS 並非程式語言。它也不是標記語言。CSS 是一種樣式表語言。CSS 用於選擇性地設定 HTML 元素的樣式。例如，此 CSS 選擇段落文字，並將顏色設定為紅色

css

p {
  color: red;
}

讓我們試一試！使用文字編輯器，將上面三行 CSS 貼上到一個新檔案中。將檔案儲存為style.css，放在名為styles的目錄中。

為了使程式碼生效，我們仍然需要將上面這段 CSS 應用到您的 HTML 文件中。否則，樣式將不會改變 HTML 的外觀。（如果您沒有一直關注我們的專案，請在此處暫停，閱讀處理檔案和HTML 基礎。）

開啟您的index.html檔案。將以下行貼上到頭部（在<head>和</head>標籤之間）
html
```
<link href="styles/style.css" rel="stylesheet" />
```
儲存index.html並在瀏覽器中載入它。您應該會看到類似以下內容

A Mozilla logo and some paragraphs. The paragraph text has been styled red by our css.

如果您的段落文字是紅色的，恭喜！您的 CSS 正確執行。

CSS 規則集的結構

讓我們剖析用於設定紅色段落文字的 CSS 程式碼，以瞭解其工作原理

CSS p declaration color red

整個結構稱為規則集。（術語規則集通常簡稱為規則。）注意各個部分的名稱

選擇器: 這是規則集開頭的 HTML 元素名稱。它定義了要設定樣式的元素（在本例中，為<p>元素）。要設定不同元素的樣式，請更改選擇器。
宣告: 這是一條單獨的規則，例如color: red;。它指定要設定樣式的元素的屬性。
屬性: 這些是您可以用來設定 HTML 元素樣式的方式。（在本例中，color是<p>元素的屬性。）在 CSS 中，您可以在規則中選擇要影響的屬性。
屬性值: 在屬性右側——冒號之後——是屬性值。這從給定屬性的許多可能外觀中選擇一個。（例如，除了red之外，還有許多color值。）

注意語法的其他重要部分

除了選擇器之外，每個規則集都必須用花括號括起來。（{}）
在每個宣告中，必須使用冒號（:）將屬性與其值或值分隔開。
在每個規則集中，必須使用分號（;）將每個宣告與下一個宣告分隔開。

要在單個規則集中修改多個屬性值，請用分號將它們分隔開，如下所示

css

p {
  color: red;
  width: 500px;
  border: 1px solid black;
}

選擇多個元素

您還可以選擇多個元素並將單個規則集應用於所有這些元素。用逗號分隔多個選擇器。例如

css

p,
li,
h1 {
  color: red;
}

不同型別的選擇器

有許多不同型別的選擇器。上面的示例使用元素選擇器，它選擇給定型別的全部元素。但是我們也可以進行更具體的選取。以下是一些更常見的選擇器型別

選擇器名稱	它選擇什麼	示例
元素選擇器（有時稱為標籤或型別選擇器）	指定型別的所有 HTML 元素。	`p` 選擇`<p>`元素
ID 選擇器	頁面上具有指定 ID 的元素。在給定的 HTML 頁面上，每個 id 值都應該唯一。	`#my-id` 選擇`<p id="my-id">`或`<a id="my-id">`
類選擇器	頁面上具有指定類的元素。同一個類可以在頁面上出現多次。	`.my-class` 選擇`<p class="my-class">`和`<a class="my-class">`
屬性選擇器	頁面上具有指定屬性的元素。	`img[src]` 選擇`<img src="myimage.png">`，但不選擇`<img>`
偽類選擇器	指定的元素，但僅在指定狀態下。（例如，當游標懸停在連結上時。）	`a:hover` 選擇`<a>`，但僅當滑鼠指標懸停在連結上時。

還有更多選擇器等待探索。要了解更多資訊，請參閱 MDN 的選擇器指南。

字型和文字

現在我們已經探索了一些 CSS 基礎知識，讓我們透過向style.css檔案新增更多規則和資訊來改進示例的外觀。

首先，找到您之前從您的網站會是什麼樣子？中儲存的Google Fonts 輸出。將<link>元素新增到index.html的頭部（在<head>和</head>標籤之間）。它看起來像這樣
html
```
<link
  href="https://fonts.googleapis.com/css?family=Open+Sans"
  rel="stylesheet" />
```
此程式碼將您的頁面連結到一個樣式表，該樣式表會與您的網頁一起載入 Open Sans 字體系列。
接下來，刪除style.css檔案中現有的規則。這是一個很好的測試，但我們不想繼續使用大量的紅色文字。
新增以下幾行（如下所示），用您從您的網站會是什麼樣子？中選擇的font-family替換font-family賦值。屬性font-family指的是您想要用於文字的字型。此規則為整個頁面定義了一個全域性基本字型和字型大小。由於<html>是整個頁面的父元素，因此其內部的所有元素都繼承相同的font-size和font-family。
css
```
html {
  font-size: 10px; /* px means "pixels": the base font size is now 10 pixels high */
  font-family: "Open Sans", sans-serif; /* this should be the rest of the output you got from Google Fonts */
}
```
注意：CSS 中 /* 和 */ 之間的所有內容都是CSS 註釋。瀏覽器在渲染程式碼時會忽略註釋。CSS 註釋是您編寫關於程式碼或邏輯的有用註釋的一種方式。
現在讓我們為 HTML body 內部的元素設定字型大小（<h1>、<li>和<p>）。我們還將標題居中。最後，讓我們擴充套件第二個規則集（如下所示），新增行高和字母間距設定，使正文內容更易讀。
css
```
h1 {
  font-size: 60px;
  text-align: center;
}

p,
li {
  font-size: 16px;
  line-height: 2;
  letter-spacing: 1px;
}
```

根據您的喜好調整px值。您的工作進度應該類似於此

A Mozilla logo and some paragraphs. A sans-serif font has been set, the font sizes, line height and letter spacing are adjusted, and the main page heading has been centered

CSS：關於盒模型

您會注意到編寫 CSS 的一些情況：很多都是關於框的。這包括設定大小、顏色和位置。頁面上的大多數 HTML 元素都可以認為是疊加在其他框上的框。

A big stack of boxes or crates sat on top of one another

CSS 佈局主要基於盒模型。頁面上佔據空間的每個框都具有以下屬性：

padding，內容周圍的空間。在下面的示例中，它是段落文本週圍的空間。
border，位於填充物正外面的實線。
margin，邊框外部周圍的空間。

Three boxes sat inside one another. From outside to in they are labelled margin, border and padding

在本節中，我們還使用

width（元素的寬度）。
background-color，元素內容和填充物後面的顏色。
color，元素內容（通常是文字）的顏色。
text-shadow在元素內的文字上設定投影。
display設定元素的顯示模式。（繼續閱讀以瞭解更多資訊）

要繼續，讓我們新增更多 CSS。繼續將這些新規則新增到style.css的底部。嘗試更改值以檢視會發生什麼。

更改頁面顏色

css

html {
  background-color: #00539f;
}

此規則為整個頁面設定背景顏色。將顏色程式碼更改為您在“我的網站會是什麼樣子？”中選擇的顏色。

設定 body 樣式

css

body {
  width: 600px;
  margin: 0 auto;
  background-color: #ff9500;
  padding: 0 20px 20px 20px;
  border: 5px solid black;
}

<body>元素有幾個宣告。讓我們逐行了解一下。

width: 600px;這強制 body 始終為 600 畫素寬。
margin: 0 auto;當您在一個屬性（如margin或padding）上設定兩個值時，第一個值會影響元素的頂部和底部（在本例中將其設定為0）；第二個值會影響左側和右側。（這裡，auto是一個特殊值，它將可用水平空間平均分配到左右兩側）。您還可以使用一個、兩個、三個或四個值，如邊距語法中所述。
background-color: #FF9500;這設定元素的背景顏色。此專案對 body 背景顏色使用帶紅色的橙色，而不是對<html>元素使用深藍色。（隨意嘗試。）
padding: 0 20px 20px 20px;這設定了四個填充值。目標是在內容周圍留出一些空間。在此示例中，body 頂部沒有填充，右側、底部和左側有 20 畫素。這些值按順序設定頂部、右側、底部、左側。與margin一樣，您可以使用一個、兩個、三個或四個值，如填充語法中所述。
border: 5px solid black;這設定了邊框的寬度、樣式和顏色值。在本例中，它是在 body 的所有側面的 5 畫素寬的黑色實線邊框。

定位和設定主頁面標題的樣式

css

h1 {
  margin: 0;
  padding: 20px 0;
  color: #00539f;
  text-shadow: 3px 3px 1px black;
}

您可能已經注意到 body 頂部有一個難看的間隙。發生這種情況是因為瀏覽器會對h1元素（以及其他元素）應用預設樣式。這似乎不是一個好主意，但其目的是為未設定樣式的頁面提供基本的可讀性。要消除間隙，我們使用設定margin: 0;覆蓋瀏覽器的預設樣式。

接下來，我們將標題的頂部和底部填充設定為 20 畫素。

然後，我們將標題文字設定為與 HTML 背景顏色相同。

最後，text-shadow將陰影應用於元素的文字內容。它的四個值是

第一個畫素值設定陰影相對於文字的水平偏移量：它向水平方向移動的距離。
第二個畫素值設定陰影相對於文字的垂直偏移量：它向下移動的距離。
第三個畫素值設定陰影的模糊半徑。較大的值會產生更模糊的陰影。
第四個值設定陰影的基本顏色。

嘗試使用不同的值來檢視它如何改變外觀。

居中影像

css

img {
  display: block;
  margin: 0 auto;
}

接下來，我們將影像居中以使其看起來更好。我們可以再次使用margin: 0 auto技巧，就像我們對 body 所做的那樣。但是，存在一些差異，需要額外的設定才能使 CSS 起作用。

<body>是一個塊級元素，這意味著它在頁面上佔據空間。應用於塊級元素的邊距將受頁面上其他元素的尊重。相比之下，影像為內聯元素，為了使自動邊距技巧在此影像上起作用，我們必須使用display: block;賦予它塊級行為。

注意：以上說明假設您使用的是小於 body 上設定的寬度（600 畫素）的影像。如果您的影像較大，它將溢位 body，擴充套件到頁面的其餘部分。要解決此問題，您可以：1）使用圖形編輯器減小影像寬度，或 2）使用 CSS 透過在<img>元素上設定width屬性並使用較小的值來調整影像大小。

注意：如果您不完全理解display: block;或塊級元素和內聯元素之間的區別，也不要太擔心。隨著您繼續學習 CSS，它將變得更有意義。您可以在 MDN 的顯示參考頁面上找到有關不同顯示值的更多資訊。

結論

如果您按照本文中的所有說明進行操作，您應該會看到一個類似於此頁面的頁面

A Mozilla logo, centered, and a header and paragraphs. It now looks nicely styled, with a blue background for the whole page and orange background for the centered main content strip.

（您可以在這裡檢視我們的版本。）如果您遇到困難，您始終可以將您的工作與我們在GitHub 上完成的示例程式碼進行比較。

在本練習中，我們只是觸及了 CSS 的表面。要更深入地瞭解，請參閱學習使用 CSS 設定 HTML 樣式。