CSS：規則、選擇器、屬性

CSS – 層疊樣式表（Cascading Style Sheets）是一種用於設計網頁的樣式語言。它允許您將頁面內容與其表示形式分開，從而更輕鬆地使用佈局和設計。

CSS 由一組規則組成，每個規則都確定網頁上某個元素的樣式應如何設置。這些規則包括使用選擇器選擇元素並設置這些元素的屬性。讓我們看看 CSS 的主要組成部分——規則、選擇器和屬性。

規則

CSS 規則由選擇器和屬性塊組成。該規則告訴瀏覽器要設置網頁的哪些元素的樣式以及應如何設置它們的樣式。每個規則都以選擇元素的選擇器開始，以應用於所選元素的屬性塊結束。

這是一個簡單規則的示例：

這裡的 `p` 是一個選擇器，用於選擇頁面上的所有段落。在屬性塊內，設置段落樣式：藍色文本顏色和字體大小 16 像素。

選擇器

選擇器允許您選擇網頁上的一個或多個元素以應用某些樣式。選擇器可以非常簡單，也可以非常複雜，允許您根據元素的類型、類、ID、屬性，甚至它們在頁面上的位置來選擇元素。

簡單選擇器的示例：

• `p` – 選擇所有段落。
• `.header` – 選擇所有具有“header”類的元素。
• `#logo` – 選擇 ID 為“logo”的元素。

更複雜的選擇器的示例：

• `ul li` – 選擇“li”列表中作為“ul”元素子元素的所有元素。
• `input` – 選擇頁面上的所有文本字段。

屬性

屬性決定使用選擇器選擇的元素的外觀。每個屬性都有一個指定元素外觀的值。

屬性示例：

• `color` – 定義元素的文本顏色。
• `font-size` – 設置字體大小。
• `background-color` – 設置元素的背景顏色。
• `border` – 定義元素邊框的樣式、粗細和顏色。

這是使用屬性的示例：

此規則選擇所有 h1 標題，並將其文本顏色設置為紅色，字體大小為 24px，黃色背景，黑色邊框為 1px 厚。

組合器

CSS 中的組合器允許您組合選擇器並創建更具體的規則。以下是組合器的一些示例：

• `div p` – 選擇作為 `div` 元素子元素的所有 `p` 元素。
• `.menu-item > a` – 選擇屬於“.menu-item”類元素直接後代的所有“a”元素。
• `h2 + p` – 選擇直接位於 `h2` 元素之後的所有 `p` 元素。

使用組合器可以讓您微調樣式應用於頁面上的元素的方式。

偽類和偽元素

偽類和偽元素允許您選擇處於某些狀態或具有特定部分的元素。它們在主選擇器之後指定，並用冒號表示。

偽類示例：

• `:hover` – 當光標懸停在元素上時應用樣式。
• `:active` – 當元素處於活動狀態（例如單擊按鈕）時應用樣式。
• `:focus` – 當元素具有焦點時應用樣式（例如，單擊輸入字段時）。

偽元素的示例：

• `::before` – 在所選元素的內容之前添加內容。
• `::after` – 在所選元素的內容之後添加內容。
• `::first-line` – 將樣式應用於元素中的第一行文本。
• `::first-letter` – 將樣式應用於元素中文本的第一個字母。

導入 CSS 文件

為了使您的代碼更加結構化且更易於維護，CSS 允許您從其他文件導入樣式。這是通過“@import”命令實現的，該命令可以放置在 CSS 文件的頂部。

通過這種方式，您可以將樣式拆分到不同的文件中，這將使它們更易於編輯並減少每個文件的大小。

級聯和優先級

CSS基於級聯原理，這意味著可以在不同的地方和來源定義樣式，瀏覽器將根據優先級決定應用哪種樣式。級聯包括：

• 選擇器優先級：瀏覽器尊重選擇器的特殊性。選擇器越具體，其優先級就越高。
• 樣式順序：如果兩個規則具有相同的特異性，則最後一個規則將應用於該元素。
• 樣式重要性：您可以使用 `!important` 設置樣式的重要性。這使得風格優先。

謹慎使用`!important`非常重要，以避免將來出現代碼維護問題。

媒體查詢

CSS 允許樣式根據設備設置（例如屏幕寬度和分辨率）進行調整。媒體查詢允許您創建在從移動電話到台式機的各種設備上看起來都不錯的響應式設計。

媒體查詢示例：

在此示例中，當屏幕寬度不超過 768 像素時，樣式將應用於頁面元素。

CSS 是用於設計網頁樣式的強大工具，這些基礎知識將幫助您開始使用它來創建美觀且實用的設計。實踐和經驗將幫助您提高技能並成為一名經驗豐富的前端開發人員。