深入理解 CSS：基礎概念、註釋、選擇器及優先順序

云端源想發表於2024-03-21
CSS

在構建網頁的過程中，我們不僅需要HTML來搭建骨架，還需要CSS來裝扮我們的網頁。那麼，什麼是CSS呢？本文將帶大家瞭解css的基礎概念，註釋、選擇器及優先順序。

一、CSS簡介

1.1 什麼是CSS

CSS，全稱為Cascading Style Sheets（層疊樣式表），是一種用於描述網頁上的資訊格式化和顯示方式的語言。它的主要功能是控制網頁的視覺表現，包括字型、顏色、佈局等樣式結構。

透過CSS，開發者可以將文件的內容與其表現形式分離，這樣不僅提高了網頁的可維護性，還使得樣式更加靈活和多樣化。

CSS的應用非常廣泛，它可以用來控制網頁中幾乎所有可見元素的樣式，包括但不限於文字的字型、大小、顏色，元素的位置、大小、背景色，以及各種互動效果等。

CSS樣式可以直接寫在HTML文件中，也可以單獨儲存在樣式單檔案中，這樣可以被多個頁面共享使用。無論是哪種方式，樣式單都包含了將樣式應用到指定型別的元素的規則。

1.2 CSS 語法規範

所有的樣式，都包含在

<head>
 <style>
 h4 {
 color: blue;
 font-size: 100px;
 }
 </style>
</head>

1.3 CSS 的三大特性

Css有三個非常重要的特性：層疊性、繼承性、優先順序。

層疊性

相同選擇器給設定相同的樣式，此時一個樣式就會覆蓋（層疊）另一個衝突的樣式。層疊性主要解決樣式衝突的問題。

層疊性原則：

  • 樣式衝突，遵循的原則是就近原則，哪個樣式離結構近，就執行哪個樣式
  • 樣式不衝突，不會層疊

繼承性

CSS中的繼承：子標籤會繼承父標籤的某些樣式，如文字顏色和字號。恰當地使用繼承可以簡化程式碼，降低 CSS 樣式的複雜性子元素可以繼承父元素的樣式（text-，font-，line-這些元素開頭的可以繼承，以及color屬性）。

行高的繼承性：

body {
 font:12px/1.5 Microsoft YaHei；
}
  • 行高可以跟單位也可以不跟單位
  • 如果子元素沒有設定行高，則會繼承父元素的行高為 1.5
  • 此時子元素的行高是：當前子元素的文字大小 * 1.5
  • body 行高 1.5 這樣寫法最大的優勢就是裡面子元素可以根據自己文字大小自動調整行高

優先順序

當同一個元素指定多個選擇器，就會有優先順序的產生。選擇器相同，則執行層疊性，選擇器不同，則根據選擇器權重執行。

  • 權重是有4組數字組成，但是不會有進位。
  • 可以理解為類選擇器永遠大於元素選擇器， id選擇器永遠大於類選擇器，以此類推…
  • 等級判斷從左向右，如果某一位數值相同，則判斷下一位數值。
  • 可以簡單記憶法：萬用字元和繼承權重為0， 標籤選擇器為1，類(偽類)選擇器 為 10，id選擇器 100， 行內樣式表為1000，!important 無窮大。
  • 繼承的權重是0， 如果該元素沒有直接選中，不管- 父元素權重多高，子元素得到的權重都是 0。

權重疊加：如果是複合選擇器，則會有權重疊加，需要計算權重。

1.4 Css註釋的使用

在CSS中，註釋是非常重要的一部分，它們可以幫助你記錄程式碼的意圖，提供有關程式碼功能的資訊。CSS註釋以/開始，以/結束，註釋內容在這兩個標記之間。例如：

/* 這是一個註釋 */
body {
    background-color: #f0f0f0; /* 背景顏色設定為淺灰色 */
}

在上面的例子中，"/* 這是一個註釋 */"是註釋內容，它不會影響網頁的顯示效果。

二、CSS選擇器

在CSS中，選擇器是核心組成部分，它定義了哪些HTML元素將會被應用對應的樣式規則。以下是一些常用的CSS選擇器型別：

2.1 基礎選擇器

基礎選擇器是由單個選擇器組成的，包括：標籤選擇器、類選擇器、id 選擇器和萬用字元選擇器。

2.1.1 標籤選擇器

標籤選擇器（元素選擇器）是指用 HTML 標籤名稱作為選擇器，按標籤名稱分類，為頁面中某一類標籤指定統一的 CSS 樣式。

標籤名{
 屬性1: 屬性值1;
 屬性2: 屬性值2;
 ...
}

標籤選擇器可以把某一類標籤全部選擇出來，比如所有的 <div> 標籤和所有的 <span> 標籤。

優點：能快速為頁面中同型別的標籤統一設定樣式。
缺點：不能設計差異化樣式，只能選擇全部的當前標籤。

2.1.2 類選擇器

想要差異化選擇不同的標籤，單獨選一個或者某幾個標籤，可以使用類選擇器，類選擇器在 HTML 中以 class 屬性表示，在 CSS 中，類選擇器以一個點“.”號顯示。

.類名 {
 屬性1: 屬性值1;
 ...
}

在標籤class 屬性中可以寫多個類名，多個類名中間必須用空格分開。

2.1.3 id選擇器

id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式。
HTML 元素以 id 屬性來設定 id 選擇器，CSS 中 id 選擇器以“#" 來定義。

#id名 {
 屬性1: 屬性值1;
 ...
}

注意：id 屬性只能在每個 HTML 文件中出現一次。

2.1.4 萬用字元選擇器

在 CSS 中，萬用字元選擇器使用“*”定義，它表示選取頁面中所有元素（標籤）。

* {
 屬性1: 屬性值1;
 ...
}

2.1.5 基礎選擇器小結

2.2 複合選擇器

常用的複合選擇器包括：後代選擇器、子選擇器、並集選擇器、偽類選擇器等等。

2.2.1 後代選擇器

後代選擇器又稱為包含選擇器，可以選擇父元素裡面子元素。其寫法就是把外層標籤寫在前面，內層標籤寫在後面，中間用空格分隔。當標籤發生巢狀時，內層標籤就成為外層標籤的後代。

元素1 元素2 { 樣式宣告 }
  • 元素1 和 元素2 中間用空格隔開
  • 元素1 是父級，元素2 是子級，最終選擇的是元素2
  • 元素2 可以是兒子，也可以是孫子等，只要是元素1 的後代即可
  • 元素1 和 元素2 可以是任意基礎選擇器

2.2.2 子選擇器

子元素選擇器（子選擇器）只能選擇作為某元素的最近一級子元素。簡單理解就是選親兒子元素。

元素1 > 元素2 { 樣式宣告 }
  • 元素1 和 元素2 中間用 大於號 隔開
  • 元素1 是父級，元素2 是子級，最終選擇的是元素2
  • 元素2 必須是親兒子，其孫子、重孫之類都不歸他管，也可以叫他親兒子選擇器

2.2.3 並集選擇器

並集選擇器是各選擇器透過英文逗號（,）連線而成，任何形式的選擇器都可以作為並集選擇器的一部分。

元素1,元素2 { 樣式宣告 }

想要快速入門前端開發嗎？推薦一個前端開發基礎課程，這個老師講的特別好，零基礎學習無壓力，知識點結合程式碼，邊學邊練，可以免費試看試學，還有各種輔助工具和資料，非常適合新手！點這裡前往學習哦！

2.2.4 偽類選擇器

偽類選擇器用於向某些選擇器新增特殊的效果，比如給連結新增特殊效果，或選擇第1個，第n個元素。偽類選擇器書寫最大的特點是用冒號（:）表示，比如 :hover 、 :first-child 。

2.2.4.1 連結偽類選擇器

為了確保生效，請按照 LVHA 的循順序宣告 :link－:visited－:hover－:active。因為 a 連結在瀏覽器中具有預設樣式，所以我們實際工作中都需要給連結單獨指定樣式。

 /* a 是標籤選擇器 所有的連結 */ 
a {
 color: gray; 
} 
/* :hover 是連結偽類選擇器 滑鼠經過 */
 a:hover {
 color: red; /* 滑鼠經過的時候，由原來的 灰色 變成了紅色 */
 }
2.2.4.2 :focus 偽類選擇器

:focus 偽類選擇器用於選取獲得焦點的表單元素。焦點就是游標，一般情況 類表單元素才能獲取，因此這個選擇器也主要針對於表單元素來說。

input:focus {
 background-color:yellow;
}

2.2.5 複合選擇器小結

以上就是常用的css選擇器的相關知識了，正確並靈活地運用各種選擇器，可以精準地對頁面中的任何元素進行樣式設定。

透過這篇文章，相信你現在已經對CSS有了基礎的瞭解，它是如何作為網頁設計的基礎，以及如何使用註釋、選擇器和優先順序來精確控制你的網頁樣式。記住，CSS是一門藝術，也是一種科學，掌握它，你就能創造出無限可能的網頁體驗。

相關文章