感覺CSS學習起來很難？很恐懼，消除恐懼的權威CSS學習指南來了

阿新 • • 發佈：2022-04-18

CSS 是定義網頁呈現的語言。它用於新增顏色、背景影象和紋理，以及在頁面上排列元素。然而，CSS 不僅僅是繪製漂亮的圖片。它還用於增強網站的可用性。下圖顯示了 YouTube 的首頁。左邊是頁面的常規渲染，右邊是沒有 CSS 的頁面。

右側的影象不僅不那麼有趣，而且使用起來也更加困難

在這個簡短的指南中，我們將介紹 CSS、演示 CSS 語法、解釋 CSS 的工作原理、向您展示如何將 CSS 標記新增到 HTML 文件中，併為您提供來自網路的大量資源，您可以在其中瞭解有關 CSS 的更多資訊。

什麼是 CSS？

CSS 代表層疊樣式表，它是用於設定網頁視覺呈現樣式的語言。CSS 是告訴 Web 瀏覽器如何呈現網頁的不同部分的語言。

網頁上的每個專案或元素都是以標記語言編寫的文件的一部分。在大多數情況下，HTML 是標記語言，但也有其他語言在使用，例如 XML。在本指南中，我們將使用 HTML 來演示 CSS 的實際應用，請記住，如果您使用 XML或不同的標記語言，同樣的原則和技術也適用。

CSS 與 HTML 有何不同？

談到 CSS 主題時，首先要了解的是何時使用 CSS 等樣式語言以及何時使用 HTML 等標記語言。

所有重要的網站內容都應使用 HTML 等標記語言新增到網站。
網站內容的呈現

應該由樣式語言定義，例如 CSS。

不屬於網頁演示的部落格文章、頁面標題、視訊、音訊和圖片都應使用 HTML 新增到網頁中。背景影象和顏色、邊框、字型大小、排版以及網頁上專案的位置都應該由 CSS 定義。

做出這種區分很重要，因為未能使用正確的語言可能會導致將來難以對網站進行更改，併為使用純文字瀏覽器或螢幕閱讀器的網站訪問者造成可訪問性和可用性問題。

CSS 語法

CSS 語法包括選擇器、屬性、值、宣告、宣告塊、規則集、at 規則和語句。

選擇器是一個程式碼片段，用於標識受樣式影響的網頁元素或元素。
屬性是要受影響的元素的方面。例如，顏色、內邊距、邊距和背景是一些最常用的 CSS 屬性。
值用於定義屬性

。例如，屬性顏色可能被賦予紅色值，如下所示color: red;：
屬性和值的組合稱為宣告。
在許多情況下，多個宣告應用於單個選擇器。宣告塊是用於指代應用於單個選擇器的所有宣告的術語。
單個選擇器和緊隨其後的宣告塊組合稱為規則集。
At-rules類似於規則集，但以**@符號而不是selector開頭。最常見的@media規則是通常用於建立基於檢視網頁的裝置大小應用的 CSS 規則塊的規則。
規則集和at-rules都是CSS語句。

CSS 語法示例

讓我們使用一段 CSS 來闡明這些專案是什麼。

h1 { 
    color: red; 
    font-size: 3em; 
    text-decoration: underline; 
    }

在本例中，h1是選擇器。選擇器後跟一個包含三個宣告的宣告塊。每個宣告與下一個宣告之間用分號分隔。製表符和換行符是可選的，但大多數開發人員使用它來使 CSS 程式碼更易於閱讀。

通過h1用作選擇器，我們是說網頁上的每個 1 級標題都應遵循此規則集中包含的宣告。

規則集包含三個宣告：

color:red;
font-size: 3em;
text-decoration: underline;

color、font-size 和text-decoration都是性質。您可以使用數百個 CSS 屬性，但常用的只有幾十個。

我們將值red、3em和underline應用於我們使用的屬性。每個 CSS 屬性都被定義為接受以特定方式格式化的值。

對於color屬性，我們可以使用顏色關鍵字或 Hex、RGB 或 HSL 格式的顏色公式。在這種情況下，我們使用了 color 關鍵字red。CSS3 中有幾十個顏色關鍵字可用，但其他顏色模型可以訪問數百萬種顏色。

我們將的值應用於3em屬性font-size。我們可以使用多種尺寸單位，包括畫素、百分比等。

最後，我們將值新增underline到屬性text-decoration中。我們也可以使用overlineorline-through作為的值text-decoration。此外，CSS3 允許使用純線、雙線、點線、虛線和波浪線樣式，這些都是文字裝飾顏色的規範。我們可以通過使用這樣的宣告一次應用所有三個值：

text-decoration: blue double underline;

該規則將導致h1我們最初示例中的用藍色雙線下劃線。color文字本身將保持為我們屬性中定義的紅色。

為樣式準備 HTML 標記

CSS 應該用於向網頁新增內容。該任務最好由 HTML 和 XML 等標記語言處理。相反，CSS 用於選擇網頁上已經存在的專案並定義每個專案的顯示方式。

為了儘可能容易地選擇網頁上的專案，應將識別符號新增到網頁上的元素中。這些識別符號，在 CSS 上下文中通常稱為鉤子，可以更容易地識別應該受 CSS 規則影響的專案。

類和 ID 用作 CSS 樣式的掛鉤。雖然 CSS 的呈現方式不受使用類和鉤子的影響，但它們使開發人員能夠精確定位他們希望設定樣式的 HTML 元素。

類和 ID 不可互換。知道何時使用它們很重要。

何時使用類

當單個網頁上有多個元素需要設定樣式時，請使用類。例如，假設您希望頁面頁首和頁尾中的連結以一致的方式設定樣式，但與頁面正文中的連結不同。要查明這些連結，您可以為每個連結或包含連結的容器新增一個類。然後，您可以使用該類指定樣式，並確保它們僅應用於具有該類屬性的連結。

何時使用 ID

對僅在網頁上出現一次的元素使用 ID。例如，如果您使用 HTML 無序列表進行站點導航，則可以使用nav等 ID為該列表建立唯一的掛鉤。

這是一個用於基本電子商務網站的簡單導航欄的 HTML 和 CSS 程式碼示例。

<style>
    #nav { 
         background: lightgray; 
         overflow: auto; 
         } 
     #nav li {
         float: left; 
         padding: 10px;
         } 
      #nav li:hover {
         background: gray; 
         } 
  </style> 
  <ul id="nav"> 
      <li><a href="">Home</a></li>
      <li><a href="">Shop</a></li>
      <li><a href="">About Us</a></li>
      <li><a href="">Contact Us</a></li> 
  </ul>

該程式碼將生成一個從頁面左側開始的淺灰色背景的水平導航選單。每個導航專案的四周都有 10 畫素的間距，當您將滑鼠懸停在每個專案的背景上時，它的背景會變暗。

同一網頁上的任何其他列表都不會受到該程式碼的影響。

#example-nav {
background: lightgray;
overflow: auto;
}
#example-nav li {
float: left;
padding: 10px;
}
#example-nav li:hover {
background: gray;
}

何時不使用 Hooks

您不必為 HTML 元素新增類或 ID 即可使用 CSS 對其進行樣式設定。如果您知道要為網頁上特定元素的每個例項設定樣式，則可以使用元素標籤本身。

例如，假設您要建立一致的標題樣式。與向每個標題新增類或 ID 相比，使用標題標籤簡單地設定所有標題元素的樣式會容易得多。

<style> 
   ul { 
       list-style-type: upper-roman; 
       margin-left: 50px; 
       } 
     p { 
       color: darkblue 
       } 
 </style> 
 <p>Some paragraph text here. Two short sentences.</p> 
 <ul> 
 <li>A quick list</li>
 <li>Just two items</li> 
 </ul> 
 <p>Additional paragraph text here. This time let's go for three sentences. Like this.
 </p>

該程式碼顯示的效果如下：

.code_sample ul {
list-style-type: upper-roman;
左邊距：50px；
}
.code_sample p {
顏色：深藍色
}

這裡有一些段落文字。兩個短句。

快速列表
只有兩個專案
此處附加段落文字。這次讓我們來三句話。像這樣。

另一個清單
仍然只有兩個專案

在這種情況下，即使我們只為ul和p元素編寫了一次樣式規則，但會影響多個專案。通過在網站的每個頁面上建立一致的標題、列表和段落文字樣式，使用元素選擇器是建立有吸引力、可讀性和一致的網站體驗的好方法。

為樣式準備標記的最佳實踐

既然您知道如何將類、ID 和元素標籤用作 CSS 規則集的鉤子，那麼您如何才能最好地利用這些知識來編寫標記，以便輕鬆定位特定元素？

自由而一致地應用課程。對應該在一個方向或另一個方向對齊的專案以及在單個網頁上重複出現的任何元素使用類。
將 ID 應用於在網頁上僅出現一次的專案。例如，在div包含您的網頁內容的ul、包含導航選單的以及div包含您的網頁標題的上使用 ID。

將 CSS 規則連結到 HTML 文件的方法

向網頁新增 CSS 規則的方法有以下三種：

內聯樣式
內部樣式表
外部樣式表

在絕大多數情況下，應該使用外部樣式表。但是，在某些情況下可以使用內聯樣式或內部樣式表。

內聯樣式

內聯樣式應用於特定的 HTML 元素。HTML 屬性style用於定義僅適用於該特定元素的規則。下面看一下編寫內聯樣式的語法。

<h1 style="color:red; padding:10px; text-decoration:underline;">Example Heading</h1>

該程式碼將導致該標題以紅色下劃線文字和所有邊的 10 畫素填充呈現。在極少數情況下應該使用內聯樣式。在幾乎所有情況下，都應該避免它們並將樣式新增到樣式表中。

內部樣式表

前面的示例使用了內部樣式表。內部樣式表是新增到 HTML 文件head元素的 CSS 塊。style元素用於開始和結束標籤之間，head所有的 CSS 宣告都新增在style標籤之間。

我們可以使用這種語法在內部樣式表中複製上面程式碼中的內聯樣式。

<head> 
     <style> 
         h1 { 
              color: red; 
              padding: 10px; 
              text-decoration: underline;
             } 
      </style> 
   </head> 
<body> 
       <h1>Example Heading</h1>
</body>

該程式碼將產生與內聯樣式相同的結果。但是，使用內部樣式表而不是內聯樣式的好處是h1頁面上的所有元素都會受到樣式的影響。

外部樣式表

外部樣式表是隻包含 CSS 語句的文件。文件中定義的規則通過使用 HTML 文件元素中的link標記連結到一個或多個 HTML文件。head

要使用外部樣式表，首先要建立 CSS 文件。

/************************************************* 
Save with a name ending in .css such as styles.css 
*************************************************/
h1 { 
    color: red; 
    padding: 10px; 
    text-decoration: underline;
    }

現在我們有了一個帶有一些樣式的外部樣式表，我們可以使用該link元素將它連結到一個 HTML 文件。

<head>
     <link rel="stylesheet" type="text/css" href="styles.css">
</head> 
<body> 
    <h1>Example Heading</h1>
</body>

載入此 HTML 文件時，該link標記將導致將檔案styles.css 中*的樣式載入到網頁中。因此，所有 1 級標題元素都將顯示為紅色文字、帶下劃線，並且每邊都應用了 10 畫素的填充。

何時使用每種方法

在幾乎所有情況下，外部樣式表都是設定網頁樣式的正確方法。使用外部樣式表的主要好處是它們可以連結到任意數量的 HTML 文件。因此，可以使用單個外部樣式表來定義整個網站的呈現方式。

設計簡單的單頁網站時可以使用內部樣式表。如果網站永遠不會超出使用內部樣式表的單個初始頁面是可以接受的。

內聯樣式可以在兩種情況下使用：

編寫僅應用於單個網頁上的單個元素的 CSS 規則時。
當被整合到內容管理系統（如 WordPress）中的 tinyMCE 編輯器等所見即所得編輯器應用時。

在所有其他情況下，應避免使用內聯樣式以支援外部樣式表。

CSS 是如何工作的

在編寫 CSS 時，很多時候編寫的規則相互衝突。例如，在設定標題樣式時，以下所有規則都可能適用於h1元素。

h1在網站的所有頁面上建立一致呈現的元素級規則。
定義在特定位置呈現的元素的類級別規則h1——例如部落格文章的標題。
一個 id 級別的元素，定義了一個h1元素在一個或多個網頁上的一個地方的渲染——例如網站名稱。

開發人員如何編寫足夠通用的規則以涵蓋每一個h1又足夠具體的規則，以定義只應出現在給定元素的特定例項上的樣式？

CSS 樣式遵循兩個規則，您需要了解這些規則才能編寫有效的 CSS。瞭解這些規則將幫助您編寫在需要時可以廣泛使用的 CSS，但在需要時卻可以非常具體。

控制 CSS 行為方式的兩個規則是繼承和特異性。

級聯繼承

為什麼 CSS 樣式被稱為級聯？當編寫多個相互衝突的規則時，將執行最後編寫的規則。通過這種方式，樣式向下級聯並應用最後寫入的規則。

讓我們看一個例子。讓我們在一個內部樣式表中編寫兩個直接相互矛盾的 CSS 規則。

<head>
     <style> 
         p {color: red;} 
         p {color: blue;} 
      </style> 
</head> 
<body> 
<p>What color will the text of this paragraph be?</p> 
</body>

瀏覽器將級聯樣式並應用遇到的最後一個樣式，推翻所有以前的樣式。結果，標題是藍色的。

.code_sample_p {顏色：紅色；}
.code_sample_p {顏色：藍色；}

這一段的文字是什麼顏色的？

當使用外部樣式表時，同樣的級聯效應也會發揮作用。使用多個外部樣式表是很常見的。head發生這種情況時，樣式表會按照它們在 HTML 文件元素中出現的順序載入。如果樣式表規則之間發生衝突，則每個樣式表中包含的 CSS 規則將覆蓋先前載入的樣式表中包含的那些規則。以下面的程式碼為例：

<head>
<link rel="stylesheet" type="text/css" href="styles_1.css">
<link rel="stylesheet" type="text/css" href="styles_2.css">
</head>

如果這兩個樣式表中包含的樣式之間存在衝突，則將應用styles_2.css中的規則。

樣式的繼承是 CSS 樣式級聯行為的另一個例子。

當您為父元素定義樣式時，子元素會收到相同的樣式。例如，如果我們將顏色樣式應用於無序列表，則子列表項將顯示相同的樣式。

<head>
    <style>
        ul {color: red;} 
    </style>
 </head> 
 <body> 
   <ul> 
 <li>Item 1</li> 
 <li>Item 2</li>
   </ul> 
 </body>

以下是該程式碼的呈現方式。

.code-sample-ul {顏色：紅色；}
專案 1
第 2 項

並非每個屬性都從父元素傳遞到其子元素。瀏覽器將某些屬性視為非繼承屬性。邊距是不從父元素傳遞到子元素的屬性的一個示例。

特異性

確定對每個 HTML 元素應用哪些規則的第二個規則是[特異性規則。

具有更多特定選擇器的CSS 規則將覆蓋具有較少特定選擇器的 CSS 規則，無論哪個先出現。正如我們所討論的，三個最常見的選擇器是元素標籤、類和 ID。

最不具體的選擇器型別是元素級別選擇器。
當一個類被用作選擇器時，它會否決使用元素標籤作為選擇器編寫的 CSS 規則。
當一個 ID 用作選擇器時，它會否決使用元素或類選擇器編寫的 CSS 規則。

影響特異性的另一個因素是編寫 CSS 樣式的位置。與屬性內聯style編寫的樣式會覆蓋在內部或外部樣式表中編寫的樣式。

增加選擇器特異性的另一種方法是使用一系列元素、類和 ID 來精確定位您要處理的元素。例如，如果您想精確定位列表上的無序列表專案，其中包含divid 為“example-div”的類“example-list”，您可以使用以下選擇器來建立具有高度特異性的選擇器。

div#example-div > ul.example-list > li {styles here}

雖然這是建立非常具體的選擇器的一種方法，但建議限制使用這些型別的選擇器，因為它們比簡單的選擇器需要更多的時間來處理。

一旦您瞭解了繼承和特異性的工作原理，您將能夠高度準確地定位網頁上的元素。

CSS 能做什麼？

一個更好的問題可能是：“CSS 不能做什麼？”

CSS 可用於將 HTML 文件轉換為專業、精美的設計。下面是一些你可以通過 CSS 完成的事情：

建立一個靈活的網格，用於設計在任何裝置上都能呈現精美的完全響應式網站。
從排版到表格，再到表格等，應有盡有。
float使用諸如、position、overflow、flex和等屬性將網頁上的元素相對於彼此定位box-sizing。
將背景影象新增到任何元素。
建立形狀、互動和動畫。

這些概念和技術超出了本入門指南的範圍，但以下資源將幫助您解決這些更高階的主題。

盒子模型

如果您打算使用 CSS 來構建網頁佈局，那麼首先要掌握的主題之一就是盒子模型。盒子模型是一種視覺化和理解網頁上每個專案如何組合內容、填充、邊框和邊距的方法。

瞭解這四個部分如何組合在一起是一個基本概念，在繼續討論其他 CSS 佈局主題之前必須掌握它。

瞭解盒子模型的兩個好地方包括：

來自全球資訊網聯盟的盒子模型的解釋。
來自 Mozilla 開發者網路的CSS 盒子模型介紹。

建立佈局

有許多技術和策略用於使用 CSS 建立佈局，理解盒子模型是每個策略的先決條件。掌握了盒子模型後，您將準備好學習如何操作網頁上的內容盒子。

Mozilla 開發者網路對 CSS 佈局進行了很好的介紹]。這篇簡短的閱讀涵蓋了 CSS 佈局背後的基本概念，並快速介紹了諸如text-align、float和position.

W3C 提供了更廣泛、更深入的 CSS 佈局指南：CSS 佈局模型。本文件是面向專業開發人員的資源，因此如果您是 CSS 新手，請花點時間檢視它。這不是快速閱讀。但是，您需要了解的有關建立 CSS 佈局的所有資訊都包含在本文件中。

多年來，網格佈局一直是設計響應式佈局的首選策略。CSS 網格已經從零開始建立多年，市場上有許多不同的網格生成網站和開發框架。然而，在幾年內，對網格佈局的支援將成為 CSS3 規範的一部分。您可以通過閱讀 W3C 網站上的主題來了解很多關於網格的知識。有關網格佈局的更輕鬆、更簡短的介紹。

幾年之內，CSS3 靈活框或flexbox有望成為設計網站佈局的主導模型。flexbox 規範還沒有完全完成和最終確定，並且瀏覽器之間對 flexbox 的支援並不一致。然而，每個初露頭角的 CSS 開發者都需要熟悉flexbox並準備在不久的將來實現它。

網頁字型和排版

可以做很多事情來增加個性並提高網站內容的可讀性。在我們的字型和網頁排版指南中瞭解有關為網路選擇字型和排版的更多資訊。

建立一致的跨瀏覽器體驗

每個瀏覽器對 HTML 規範的解釋略有不同。因此，當在兩個不同的瀏覽器中呈現相同的程式碼時，呈現程式碼的方式通常會存在細微差別。

以這段簡短的程式碼為例。

<h1>Heading 1</h1> 
<p>A short paragraph of text. Just four sentences. Most of the sentences are quite short. Especially this one.</p> 
<h2>Heading 2</h2>
<ul>
   <li>Just a short list</li>
   <li>Three items on this list</li> 
   <li>We'll make it an unordered list</li>
 </ul>
  <h3>Heading 3</h3>
  <p>One final short paragraph of text. Just four sentences. Most of the sentences are quite short. Especially this one.</p>

如果我們在兩個不同的瀏覽器中渲染該程式碼，我們會看到細微的差別。以下是 Mozilla Firebox 和 Microsoft Edge 呈現該程式碼的方式。

你能看出細微的差別嗎？左邊的 Firefox 在每個標題元素周圍增加了一點邊距。此外，在 Edge 中渲染時，專案符號點會小一些。雖然這些差異不是必然的，但在某些情況下，瀏覽器之間的這些微小差異可能會產生問題。

CSS 可用於解決這些跨瀏覽器相容性問題。一種流行的方法是實現一個名為normalize.css的樣板 CSS 文件。這個免費提供的 CSS 檔案可以連結到任何 HTML 文件，以幫助最小化跨瀏覽器的呈現差異。

在您的設計工作中包含normalize.css的最簡單方法是連結到Google 託管的副本。為此，只需將這行程式碼放入HTML 文件的元素中。head

<link rel="stylesheet" src="//normalize-css.googlecode.com/svn/trunk/normalize.css" />