CSS 瞭解一下_ZenDei技術網路在線

CSS 認識一下 1、CSS 的那些事 CSS（Cascading Style Sheets）譯「層疊樣式表」，我的理解是：各種樣式疊加的表。一個網頁，如果沒有 CSS，就是穿著“國王的新衣”，在裸奔！CSS 的重要性不言而喻！作為 HTML 的衣服，CSS 為 HTML 元素提供了一種 ...

CSS 認識一下

1、CSS 的那些事

CSS（Cascading Style Sheets）譯「層疊樣式表」，我的理解是：各種樣式疊加的表。

一個網頁，如果沒有 CSS，就是穿著“國王的新衣”，在裸奔！CSS 的重要性不言而喻！

作為 HTML 的衣服，CSS 為 HTML 元素提供了一種樣式描述，定義其顯示方式，TA 能夠對網頁中元素進行像素級精確控制。

CSS 的歷史不做過多贅述，先瞭解幾種引入方式以及其區別。

2、外部樣式

外部樣式是指單獨建立一個擴展名為 .css 的樣式表，在 head 標簽中採用 link 方式引入，也可以使用 import 方式引入：

// link 引入
<link rel="stylesheet" type="text/css" href="css/style.css" /> 
// @import 引入
<style type="text/css">
  @import url("css/style.css");
</style>

引入外部樣式的好處就是，一個樣式表可以在多個頁面中復用，牆裂建議使用 link 方式引入，import 新手慎用。

3、內嵌樣式

內嵌樣式主要通過 <style> 標簽在頁面中編輯樣式：

<style>
  .title {
      color: red      
  }
</style>

該方法編寫的樣式僅在當前頁面有效，無法用於其他頁面，<style>標簽可以放在任意位置，建議放在 head 中。

4、行內樣式

行內樣式是在 HTML 頁面中的某個元素上直接對其直接定義，以 p 元素為例：

<p style="color: red"></p>

行內樣式只對其所在的標簽生效，實際上寫頁面時建議少用或者不用。

引用樣式最好是採用第一種 link 方式引入，分離 HTML 頁面代碼與 CSS 樣式，方便項目的維護管理，以及提高 CSS 樣式的復用性。

其他兩種方法少用或者不用，儘量降低頁面的的複雜性。

5、CSS 選擇器

HTML 頁面中的元素樣式大多是通過 CSS 選擇器進行控制的。

要想用 CSS 對 HTML 頁面中的元素實現一對一，一對多或者多對一的控制，離不開 CSS 選擇器。

CSS 的選擇器大概有這些：

通用選擇器
標簽選擇器
class 選擇器（類選擇器）
id 選擇器
後代選擇器
子代選擇器
組合選擇器
相鄰兄弟選擇器
偽類選擇器
媒體查詢（姑且也算吧）

還有一些可能漏掉了，歡迎留言補充，先復盤一些常見選擇器。

5.1 通用選擇器

通用選擇器用 * 開頭，後面直接跟上樣式，作用於所有標簽，表示通用定義。

就好比定義所有正常人：一個頭、兩隻手、兩條腿。

例：

* {
   font-size: 18px;
   color: red
}

這裡表示所有標簽中的字體大小為 18px，顏色為紅色。

5.2 標簽選擇器

標簽選擇器可以選中所有的同類標簽元素，標簽後面直接跟上樣式。

好比規定學生穿校服，不同工廠的工人有對應的工服。

例：

p {
    font-size: 16px;
    color: blue
}

這裡表示所有 p 標簽中的字體大小為 16px，顏色為藍色。

5.3 class 選擇器（類選擇器）

class 選擇器可以選中帶有特定類名的標簽進行樣式定義，也就是一對多，書寫時以 . 開頭，跟上 class 名稱，然後編寫樣式，在對應的標簽中用 class="" 引用。

好比分配一個班級的班幹部，給予他們同一類屬性。

例：

// css 樣式
.title{
  background-color: red
}
// html 頁面
<div class="title">語文課代表</div>
<div class="title">數學課代表</div>

這裡就能把兩個課代表的背景顏色都設置成紅色，一對多設置。

5.4 id 選擇器

id 選擇器以 # 開頭，後面跟上 id 名，然後書寫樣式。在對應的標簽中使用 id="" 引用，其 id 名具有唯一性。

以一個學校為例，定義校長的屬性，一個學校只有一個校長。

例：

// css 樣式
#title{
  background-color: black
}
// html 頁面
<div id="title">校長</div>

這裡是定義校長的背景顏色為黑色，雖然說 id 選擇器具有唯一性，如果把幾個元素都命名成相同的 id 名字，CSS 選擇器還是會把被標記的元素都選中應用樣式（和 class 選擇器一樣）。

乍一看，id 選擇器的唯一性似乎不存在。然而，在 javascript 中只會選擇具有相同 id 名字元素中的第一個。所以，養成一個好習慣，同一 id 不要在同一頁面中出現第二次。

註意，由於 CSS 的解釋是自上而下的，對於一個元素的相同屬性賦值，下麵的屬性描述會把上面的覆蓋掉，因此在一定要註意屬性的書寫順序。

5.5 後代選擇器

後代選擇器也稱為包含選擇器，用來選擇特定元素的後代，將父元素放在前面，子元素放在後面，中間加一個空格分開。

這個應該比較好理解吧，打個比方，我是中國人，我所有的後代都留著中國人的血液。

例：

// css 樣式
.china p {
    background-color: yellow
}
// html 頁面
<div class="china">
    <p>兒子</p>
    <p>女兒</p>
</div>

這裡的兒子和女兒的背景顏色都會是黃色。

後代選擇器中的元素不限制兩個，也可適用於多層後代關係，用多個空格加以分開最大嵌套層數不超過 256 層。

5.6 子代選擇器

與後代選擇器的不同的是，子代選擇器僅是指 TA 的第一代，後代選擇器通過空格來選擇，子代選擇器通過 > 選擇。

好比我只給我的子女們發紅衣服，其他後代，例如孫輩，曾孫輩都不發。

例：

// css 樣式
div > strong {
  color:red
}
// html 頁面
<div>
  <strong>兒子</strong>
  <span>
    <strong>孫子</strong>
  </span>
</div>

子女的字體顏色是紅色的，而孫輩是預設的顏色。

5.7 組合選擇器

對多個不同元素做相同的操作的情況下，可以共同使用同一樣式代碼，元素之間用英文逗號分隔，這就是組合選擇器。

好比給不同身份的人發一個“感動玖柒十大青年獎”，可以把他們全部叫到一起來頒獎。

例：

// css 樣式
div, p, span, h1 {
  color: red
}
// html 頁面
<div>小明</div>
<p>小紅</p>
<span>小剛</span>
<h1>小利</h1>

這裡小明、小紅、小剛和小利的顏色都是紅色的，採用組合選擇器最大的好處就是：簡化 CSS 代碼，提高了編碼效率。

5.8 相鄰兄弟選擇器 & 通用兄弟選擇器

相鄰兄弟選擇器還是挺好理解的，MDN 的介紹是：介於兩個選擇器之間，當第二個元素緊跟在第一個元素之後，並且兩個元素都是屬於同一個父元素的子元素，則第二個元素將被選中。

好比皇帝說下一個生的是兒子就當太子，那就是以當前的最後一個子女為參照物，下一個兒子就是太子，如果先生了個女兒，則不算。

例：

// css 樣式
div + p {
  color: red
}
// html 頁面
<div>大兒子</div>
<span>二女兒</span>
<p>二兒子</p>
<p>三兒子</p>

這裡都是預設顏色，因為中間相隔了一個二女兒，所以二兒子不能當太子了。

相鄰兄弟選擇器總結起來就兩個關鍵點：

緊接在另一元素後的第一個
二者有相同父元素

通用兄弟選擇器類似於相鄰兄弟選擇器，但肯定是不一樣的，首先不同的是通用兄弟選擇器是用 ~ 連接後面的元素。

繼續拿皇帝兒子舉例，皇帝說大兒子之後所有的兒子都封王，那就是以大兒子為參照，之後所有的兒子就是王，如果生了個女兒，則略過。

例：

// css 樣式
div ~ p {
  color: red
}
// html 頁面
<div>大兒子</div>
<span>二女兒</span>
<p>二兒子</p>
<p>三兒子</p>

這裡都是你猜一下會是神馬樣子？

5.9 偽類選擇器

偽類選擇器通常是用來描述元素在一些特定狀態下的樣式，最常見的就是用在 a 元素（超鏈接）中了，當然其他元素也可以，只不過相對來說少一些。

就好比拿人來說，不開心的時候會皺眉，開心的時候會笑，發火的時候可能會摔東西，主要是對不同的狀態定義。

例：

// 沒有被訪問過a標簽的樣式
a:link {
  color: black
}
// 訪問過後a標簽的樣式
a:visited {
  color: yellow
}
// 滑鼠懸浮時a標簽的樣式
a:hover {
  color: red
}
// 滑鼠摁住的時候a標簽的樣式
a:active {
  color: blue
}

偽類選擇器我覺得應該是最有趣的選擇器了，試試就知道了。

5.10 媒體查詢

媒體查詢應該算是選擇器吧，不管那麼多我先把 TA 拉進來。

TA 能在不同的條件下使用不同的樣式，使頁面在不同在設備下達到不同的渲染效果。

好比一個人在不同的場景下做不同的事，為父親的時候教育子女，為丈夫的時候保護妻子，為人子的時候照顧父母。

例：

@media screen and (max-width: 300px) {
    body {
        background-color: red
    }
}

這裡的樣式表示如果頁面寬度小於 300px 則修改背景顏色為紅色，簡單易理解吧。

6、最後

CSS 的簡單復盤就到這裡了，所有的實例都沒有用截圖展示，還是希望各位能自己去試一試，看看效果，多敲才是正道。

如果有一些地方寫的不對，也歡迎指正，分享即學習。
file

CSS 瞭解一下