什麼是 CSS？

已發表: 2019-03-08

最後更新於 2020 年 4 月 22 日

Cascading Style Sheets for the web 在萬維網 (www) 中，CSS 是 Cascading Style Sheets 的首字母縮寫。 CSS 是一種樣式表語言，用於描述以標記語言（通常是 HTML）編寫的文檔的呈現方式。 CSS 規定網頁的佈局和內容如何在屏幕、紙張或其他媒體中顯示。 CSS 節省了大量工作，因為它一次控制多個網頁的佈局。

文檔通常是使用 HTML 等標記語言構建的文本文件。 呈現文檔意味著通過 Chrome、Firefox、Opera、Microsoft Edge 等網絡瀏覽器將其轉換為在計算機屏幕上直觀呈現的可用形式。 Web 瀏覽器將 CSS 規則應用於文檔以影響它們的顯示方式。

本博客是對層疊樣式表 (CSS) 的一般介紹，定義了它們是什麼，以及它們在 Web 上的用途。 這是一個介紹，它回答了關於它的基本問題，而不是深入到奇妙而有趣的 CSS 世界。

那！ 公司為世界各地的代理機構提供迷人而有效的網頁設計服務。 詳細了解我們的白標網頁設計服務以及我們如何幫助您和您的客戶創建或改善他們的網絡形象。 今天就開始吧！

CSS 始於 1994 年。它由 W3C 創建和維護。 W3C 的 CSS 工作組創建稱為規範的文檔。 在規範經過 W3C 成員討論和正式批准後，它們成為推薦。

級聯樣式表 1 級 (CSS1) 於 1996 年 12 月作為 W3C 的推薦標准出現。CSS2 於 1998 年 5 月成為 W3C 的推薦標準。1998 年開始的 CSS 級別 3 仍在開發中。 CSS3 是 CSS2 規範和稱為模塊的新規範的組合。 CSS 規範由一組屬性組成，這些屬性的值設置為更新 HTML 內容的顯示方式。

CSS 來簡化呈現我們的標記語言文檔的過程。 您可以控制各種屬性，例如：

  • 文字的顏色，
  • 字體風格，
  • 段落之間的間距，
  • 列的大小和佈局方式，
  • 背景圖像或顏色，
  • 佈局設計，
  • 根據屏幕尺寸（媒體查詢）顯示的變化。

我們如何應用 CSS？

Cascading Style Sheets for the web 有四種方法可以將樣式應用於我們的 HTML 文檔。 最常用的方法是嵌入在 HTML 文檔中的 <style> 元素中的外部 CSS 文件。 如果指定了不同的工作表樣式，樣式將級聯成具有以下優先級的新樣式（數字越高不重要）：

優先級 4：瀏覽器默認

瀏覽器包含一些為我們預先編寫的樣式。 有時我們不想要這些預加載的樣式，所以我們可以覆蓋它們。 有些瀏覽器不支持現代 CSS 規範，或者有自己的 CSS 屬性使用形式。 因此，我們在 HTML 文檔中編寫 CSS 時應該小心。

That! Company White Label Services

優先級 3：外部樣式表文件

<link> 元素可用於在 HTML 文檔中包含外部樣式表文件。 外部樣式表是帶有“.css”擴展名的單獨文本文件。 我們在此文本文件中定義所有樣式規則，然後使用 <link> 元素將該文件包含在 <head>...</head> 標記內的任何 HTML 文檔中。

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

優先級 2：嵌入在 HTML 文檔中

我們可以使用 <style> 元素將 CSS 規則放入 HTML 文檔中以包含規則。 <style>…</style> 標籤放置在 <head>…</head> 標籤內。

 <風格>
 選擇器 {
 適當的價值;
 }
 </style>

優先級 1：在我們的 HTML 元素中內聯

我們可以使用任何 HTML 元素的 style 屬性來定義樣式規則。 這些規則將僅應用於該元素。

 <p>世界你好！</p>

CSS 規則覆蓋

我們已經描述了將樣式表規則應用於我們的 HTML 文檔的四種方法。 這是覆蓋任何樣式表規則的規則：

任何內聯樣式表都具有最高優先級。 因此，它將覆蓋 <style>...</style> 標記中定義的任何規則或任何外部樣式表文件中定義的規則。

<style>…</style> 標籤中定義的任何規則都將覆蓋任何外部樣式表文件中定義的規則。

外部樣式表文件中定義的任何規則優先級最低，只有當上述兩個規則不適用時，才會應用此文件中定義的規則。

CSS 選擇器

CSS 規則由瀏覽器解釋，然後應用於我們 HTML 文檔中的相應元素。 樣式規則由三部分組成：

  • Selector - 用於根據元素名稱、id、類、屬性等“查找”（或選擇）HTML 元素。
  • 屬性 - 是 CSS 的一種樣式。 它可以是顏色、邊框、背景、字體、顯示、文本對齊、邊距、行距等。
  • 值 - 分配給屬性。 例如，背景顏色屬性的值可以是紅色或綠色。

CSS 規則語法

CSS 規則的語法由選擇器以及屬性和值的聲明組成：

 選擇器 { 屬性：值； }

選擇器指向要設置樣式的 HTML 元素。

聲明塊（在花括號中）包含一個或多個用分號分隔的聲明。

每個聲明都包含一個 CSS 屬性名稱和一個值，以冒號分隔。

我們可以編寫一個 CSS 規則，然後在多個 HTML 元素和文檔中重用相同的規則。 使用 CSS，我們不需要每次都編寫 HTML 內聯標籤屬性，這僅適用於樣式化的元素。 我們只需編寫一個 CSS 規則並將其應用於該標記元素的所有出現。 因此，更少的代碼意味著更快的頁面。

當我們使用外部或嵌入式樣式規則時，我們的 HTML 文檔的更改和維護很簡單。 我們只需更改樣式規則，HTML 文檔中的所有元素都會自動更新。 使用 CSS，我們可以通過媒體查詢訪問多種設備屏幕尺寸。 媒體查詢允許我們針對不止一種類型的設備優化我們的 HTML 文檔。 使用相同的 HTML 文檔，我們可以呈現不同版本的網頁。

閱讀更多

同樣，這篇文章幾乎沒有激發讀者學習 CSS 以及可用於控制我們的 HTML 文檔的各種東西的興趣。 它是網絡中非常強大且非常重要的部分。 您可以深入研究的一些主要資源是：

W3C 學校

MDN

CSS 教程