CSS簡介

CSS是定義HTML頁面在瀏覽器中的視覺外觀的語言。它發展迅速，而且由於有了最新功能，CSS從未如此簡單易用

什麼是CSS

CSS（的縮寫級聯樣式表）是我們用來設置HTML文件樣式的語言，它告訴瀏覽器它應如何呈現頁面上的元素。

它是出於對網頁進行樣式設置的需要而開發的。在引入CSS之前，人們想要一種樣式化網頁的方式，這些網頁在當時看起來都非常相似且具有“學術性”。就個性化而言，您不能做太多事情。

HTML 3.2引入了將顏色內聯定義為HTML元素屬性的選項，以及諸如center和font，但很快就升級到了遠非理想的境地😱。

CSS使我們能夠將所有與表示相關的內容從HTML移到CSS，以便HTML可以恢復為定義文檔結構的格式，而不是瀏覽器中的外觀。

CSS不斷發展，隨著新的慣用CSS技術的出現和瀏覽器的改變，您5年前使用的CSS可能已經過時了。

CSS簡史

在繼續之前，我想簡要回顧一下CSS的歷史。

CSS的產生是出於對網頁樣式的需要。在引入CSS之前，人們想要一種樣式化網頁的方式，這些網頁在當時看起來都非常相似且具有“學術性”。就個性化而言，您不能做太多事情。

HTML 3.2引入了將顏色內聯定義為HTML元素屬性的選項，以及諸如center和font，但這種情況很快就升級到了遠非理想的境地。

CSS使我們能夠將所有與表示相關的內容從HTML移到CSS，以便HTML可以恢復為定義文檔結構的格式，而不是瀏覽器中的外觀。

CSS不斷發展，隨著新的慣用CSS技術的出現和瀏覽器的改變，您5年前使用的CSS可能已經過時了。

很難想像CSS誕生的時代以及網絡的不同之處。

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

頁面使用HTML設置樣式，並帶有特殊的呈現標記，例如bold和特殊屬性，其中大多數現已棄用。

這意味著您的定制機會有限。

大部分樣式決定留給瀏覽器。

另外，您為其中一個站點專門構建了一個站點，因為每個站點都引入了不同的非標準標籤，以提供更多功能和機會。

很快，人們意識到了一種需要在所有瀏覽器上都可以使用的樣式頁面的方法。

在1994年提出最初的想法之後，CSS於1996年發布了CSS Level 1（“ CSS 1”）建議書，並首次發布。

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

從那時起，就開始了CSS級別3的工作。CSS工作組決定將每個功能分開，並分別在模塊中進行處理。

瀏覽器在實現CSS方面並不是特別快。我們必須等到2002年，才能使第一個瀏覽器實現完整的CSS規範：適用於Mac的IE，如下面的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規則集有一部分叫做選擇器，另一部分稱為宣言。聲明中包含各種規則，每個由財產和價值。

在這個例子中p是選擇器，並應用一個規則來設置值20px到font-size財產：

p {
  font-size: 20px;
}

多個規則一個接一個地堆疊：

p {
  font-size: 20px;
}
a {
color: blue;
}

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

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

而且它可以定位到HTML標籤（如上述）或包含某些class屬性且包含以下內容的HTML元素：.my-class，或具有特定id具有屬性#my-id。

使用更高級的選擇器，您可以選擇屬性與特定值匹配的項，也可以選擇對偽類進行響應的項（稍後會詳細介紹）

分號

每個CSS規則都以分號結尾。分號是不是可選，除了最後一條規則之後，但是我建議始終使用它們以保持一致性，並避免在添加其他屬性而忘記在前一行添加分號時出錯的情況。

格式和縮進

沒有固定的格式化規則。此CSS有效：

      p
      {
  font-size:           20px   ;
                      }
a{color:blue;}

但很痛苦。遵循一些約定，例如您在上面的示例中看到的約定：將選擇器和右方括號粘在左邊，每個規則縮進2個空格，將選擇符的同一行上的左方括號隔開一個空格。

正確和一致地使用間距和縮進有助於理解代碼。

如何在網頁中加載CSS

可以通過3種方式將CSS加載到頁面中：style頁面中的標籤head，帶有一個外部CSS文件，並內聯在標記中。 CSS以不同的方式附加到HTML頁面。

1：使用`link`標籤

這link標籤是包含CSS文件的方法。這是按預期使用CSS的首選方式：站點的所有頁面都包含一個CSS文件，更改該文件的一行會影響站點中所有頁面的顯示。

要使用此方法，請添加一個link用href指向要包含的CSS文件的屬性。您將其添加到head網站的代碼（不在body標籤）：

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

這rel和type屬性也是必需的，因為它們告訴瀏覽器我們要鏈接到哪種文件。

2：使用`style`標籤

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

<style>
...our CSS...
</style>

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

3：內聯樣式

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

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

例子：

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

免費下載我的CSS手冊