/

CSS 簡介

CSS 簡介

CSS 是一種語言，用於定義網頁在瀏覽器中的視覺外觀。由於最新的功能，CSS 的使用變得更加簡單。

什麼是 CSS

CSS（層疊樣式表的縮寫）是用於為 HTML 文件添加樣式的語言，它告訴瀏覽器如何渲染頁面上的元素。

在 CSS 出現之前，人們希望能夠為他們的網頁添加樣式，因為當時的網頁看起來都很相似和“學術”。在個性化方面，你不能做許多事情。

HTML 3.2 引入了內聯定義顏色的選項，以及像 center 和 font 這樣的呈現標籤，但它很快變成了一個不理想的情況。

CSS 讓我們將所有與展示相關的內容從 HTML 移動到 CSS 中，這樣 HTML 就可以恢復為定義文檔結構而不是在瀏覽器中的外觀的格式。

CSS 不斷演進，5年前使用的 CSS 可能已經過時了，因為新的慣用 CSS 技術和瀏覽器的變化。

很難想象 CSS 誕生時的情況以及網頁有多麼不同。

當時，我們有幾個競爭的瀏覽器，主要有 Internet Explorer 和 Netscape Navigator。

通過使用 HTML，頁面被樣式化，使用特殊的呈現標籤（例如 bold）和特殊的屬性，其中大部分現在已被棄用。

這意味著你只能有有限的自定義機會。

大部分的樣式決策都由瀏覽器決定。

此外，你要為它們之一構建一個網站，因為每個瀏覽器都引入了不同的非標準標籤以提供更多的功能和機會。

不久後，人們意識到需要一種方法來跨瀏覽器樣式化頁面。

1994 年提出了最初的想法，1996 年，CSS 發布了第一個版本，即 CSS Level 1（“CSS 1”）。

1998 年發布了 CSS Level 2（“CSS 2”）。

此後，CSS Level 3 開始進行了預覽。CSS 工作組決定將每個功能拆分並獨立工作，以模塊方式進行。

瀏覽器在實現 CSS 方面並不快速。直到 2002 年，我們才有第一個完全實現 CSS 規範的瀏覽器：IE for Mac，詳細描述請參閱此 CSS Tricks 文章：https://css-tricks.com/look-back-history-css/

從一開始，Internet Explorer 就不正確地實現了框模型，這導致多年來在不同瀏覽器上應用相同樣式變得困難。我們必須使用各種技巧和黑客來實現我們希望瀏覽器渲染的效果。

如今情況好得多。大多數情況下，我們只需要使用 CSS 標準，而無需考慮怪異的問題，而且 CSS 的功能也從未如此強大。

現在 CSS 已經沒有官方版本號，但 CSS 工作組會釋出一個包含目前認為穩定並可以在瀏覽器中使用的模塊的“快照”。這是 2018 年的最新快照：https://www.w3.org/TR/css-2018/

CSS Level 2 仍然是我們今天編寫的 CSS 的基礎，我們還有更多功能在其之上構建。

CSS 的外觀

CSS 的 規則集 由選擇器（selector）和聲明（declaration）兩個部分組成。聲明包含多個規則，每個規則由屬性（property）和值（value）組成。

在下面的示例中，p 是選擇器，並應用一個規則，將 font-size 屬性的值設置為 20px：

1
2
3
p {
 font-size: 20px;
}

多個規則堆疊在一起：

1
2
3
4
5
6
7
p {
 font-size: 20px;
}

a {
 color: blue;
}

選擇器可以定位一個或多個項目：

1
2
3
p, a {
 font-size: 20px;
}

它可以選擇 HTML 標籤（如上面的示例），或具有特定類屬性的 HTML 元素類（使用 .my-class），或具有特定 id 屬性的 HTML 元素（使用 #my-id）。

更高級的選擇器允許你選擇屬性與特定值匹配的項目，或選擇符合偽類的項目（稍後解釋更多）。

分號

每個 CSS 規則以分號結束。分號不可選，除了最後一個規則之後。為了一致性和避免錯誤，建議始終使用分號，即使在之前的行上添加另一個屬性而忘記添加分號。

格式和縮排

CSS 的格式化沒有固定的規則。下面的 CSS 是有效的：

1
2
3
4
5
6
p
{
 font-size: 20px ;
 }

a{color:blue;}

但是很難閱讀。遵循一些約定，如上面的示例中所見：選擇器和閉合括號靠左對齊，每個規則縮進 2 個空格，將開始括號放在與選擇器同一行上，用一個空格分隔。

正確且一致地使用空格和縮排可以幫助我們更好地理解代碼。

如何在網頁中加載 CSS

CSS 可以以 3 種方式加載到網頁：使用頁面 head 中的 style 標記，使用外部 CSS 文件，以及內聯在標籤中。
CSS 以不同的方式附加到 HTML 頁面。

使用 link 標籤是引入 CSS 文件的方式。這是使用 CSS 的首選方式，一個 CSS 文件被網站的所有頁面使用，修改該文件中的一行將影響整個網站的呈現。

要使用此方法，您需要添加具有 href 屬性指向要引入的 CSS 文件的 link 標籤。將其添加到網站的 head 標籤中（而不是 body 標籤中）：

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

rel 和 type 屬性也是必需的，因為它們告訴瀏覽器我們要連接的文件類型。

2：使用 style 標籤

不使用 link 標籤指向包含 CSS 的單獨樣式表，我們可以直接在 style 標籤中添加 CSS。以下是語法：

1
2
3
<style>
...我們的 CSS...
</style>

使用這種方法，我們可以避免創建單獨的 CSS 文件。我發現這是在將 CSS “正式化”為獨立文件之前實驗的好方法，或者只向文件添加一行特殊的 CSS。

3：內聯樣式

內聯樣式是將 CSS 添加到頁面的第三種方法。我們可以向任何 HTML 標籤添加 style 屬性，並在其中添加 CSS。

1
<div style="">...</div>

示例：

1
<div style="background-color: yellow">...</div>

tags: [“CSS”, “introduction”, “history”, “web development”]