筆記來源：尚硅谷Web前端HTML5&CSS3初學者零基礎入門全套完整版

文章目錄

• 樣式繼承與其他概念
• • 1. 繼承
  • 2. 選擇器的權重
  • 3. 長度單位
  • • 像素
    • • 屏幕分辨率
      • 圖像分辨率
    • 百分比
    • em
    • rem
  • 4. 顏色單位
  • • RGB值
    • RGBA
    • 十六進制的RGB值

樣式繼承與其他概念

1. 繼承

樣式的繼承，我們為一個元素設置的樣式，同時也會應用到它的后代元素上

繼承是發生在祖先后后代之間的，繼承的設計是為了方便我們的開發

利用繼承，我們可以將一些通用的樣式，統一設置到共同的祖先元素上。這樣只需設置一次即可讓所有的元素都具有該樣式

注意，并不是所有的樣式都會被繼承：

• 比如背景相關的，布局相關等的這些樣式都不會被繼承。

我們可以再Zeal手冊中，搜索background-color屬性，可以看到一個定義的表格。其中就說明了其不可被繼承性

2. 選擇器的權重

當我們通過不同的選擇器，選中相同的元素，并且為相同的樣式設置不同的值時，此時就發生了樣式的沖突。

發生樣式沖突時，應用哪個樣式由選擇器的權重（優先級）決定選擇器的權重

選擇器權重

內聯樣式	1, 0, 0, 0
ID選擇器	0, 1, 0, 0
類和偽類選擇器	0, 0, 1, 0
元素選擇器	0, 0, 0, 1
通配選擇器	0, 0, 0, 0
繼承的樣式	沒有優先級

比較優先級時，需要將所有的選擇器的優先級進行相加計算，最后優先級越高，則越優先顯示（分組選擇器是單獨計算的）

選擇器的累加不會超過其最大的數量級，類選擇器再高也不會超過ID選擇器

如果優先級計算后相同，此時則優先使用靠下的樣式

可以在某一個樣式的后邊添加!important，則此時該樣式會獲取到最高的優先級，甚至超過內聯樣式，注意：在開發中一定要慎用！

<style>#box1{background-color: orange;}div{background-color: yellow;}.red{background-color: red;} </style><div id="box1" class="red" style="background-color: skyblue;">選擇器的權重</div>

3. 長度單位

像素

我們先來看下某度上關于像素（pixel,縮寫px）的介紹

像素是指由圖像的小方格組成的，這些小方塊都有一個明確的位置和被分配的色彩數值，小方格顏色和位置就決定該圖像所呈現出來的樣子。

可以將像素視為整個圖像中不可分割的單位或者是元素。不可分割的意思是它不能夠再切割成更小單位抑或是元素，它是以一個單一顏色的小格存在 [1] 。每一個點陣圖像包含了一定量的像素，這些像素決定圖像在屏幕上所呈現的大小。

也就是說，顯示器屏幕實際上是由一個一個的小點（單位色塊，即像素）構成的

問題1：像素和分辨率有什么關系呢？

分辨率 = 水平方向像素 * 垂直方向像素

屏幕分辨率

例如，屏幕分辨率是1920×1080，則該屏幕水平方向有1920個像素，垂直方向有1080個像素

• 不同屏幕的像素大小是不同的，也就是說像素大小不像我們現行的長度單位（如米/m）那樣有著固定的國際標準
• 所以同樣的像素大小在不同的設備上顯示效果是不一樣的，像素越小的屏幕顯示的效果越清晰

圖像分辨率

例如，一張圖片分辨率是300x200，則該圖片在屏幕上按1:1縮放時，水平方向有300個像素，垂直方向有200個像素點

• 圖片分辨率越高，1:1縮放時面積越大
• 圖片分辨率越低，1:1縮放時面積越小

同一臺設備像素大小是不變的，那把圖片放大超過100%時占的像素點就多了，但是圖像也會變得模糊

問題2：屏幕實現圖片放大或縮小的原理是什么呢？

• 其實是設備通過算法對圖像進行了像素補足；
• 同理，把圖片按小于100%縮放時，也是通過算法將圖片像素減少

百分比

也可以將屬性值設置為相對于其父元素屬性的百分比，可以使子元素跟隨父元素（暫且先理解成父元素，后面會詳細說）的改變而改變

em

em是相對于元素的字體大小來計算的，1em = <self>.font-size，也就說em值會根據元素本身的字體大小的改變而改變

rem

rem是相對于根元素的字體大小來計算，1em = <root>.font-size，也就說em值會根據根元素的字體大小的改變而改變

<style>* {font-size: 24px;}.box1{width: 200px; height: 200px;background-color: orange;}.box2{width: 50%; height: 50%; background-color: aqua;}.box3{font-size: 20px;width: 10em;height: 10em;background-color: greenyellow;}.box4 {font-size: 20px;width: 10rem; /*當時用rem時，不管怎么改本元素的font-size都是不會變的。需要定義root元素的font-size才可以 */height: 10rem;background-color: red;} </style><div class="box1"><div class="box2"></div> </div><div class="box3"></div><div class="box4"></div>

4. 顏色單位

人眼能夠識別多少種顏色？

正常人有三種視椎細胞，是三色視覺者（紅綠藍），總共能看到大約100萬種顏色

男的大約130萬 女的大約180萬

大概有經驗的油漆工人辨別1000種左右，再高就難以分辨了。

比如紅色，可以分為50個等級，鄰近的兩個等級能夠別出來，說明他的眼睛辨別能力就很不錯了。

過去的老工人，憑肉眼可辨別50種黑色，當然都要有特定的樣板色做對比。

我引用了網上的一些答案，也是眾說紛紜。不過我的理解是

• 人眼能至少接收100多萬種顏色，因人而異
• 但最多只能夠對1000多種顏色做出識別，因人而異

css中的顏色名稱

我們生活中會使用各種顏色名稱去描述看到的各種顏色，在css中當然也可以直接使用顏色名來設置顏色，比如：red、orange、yellow、blue、green等等

其中有140 種顏色名稱是所有瀏覽器都支持的，但是有個問題，就是在css中直接使用顏色名非常不方便

而且世界上有無數種顏色，人眼也不能分辨出所有顏色，更不可能對每一種顏色都進行命名

而且就算能夠有辦法對那么多種顏色進行命名，我們也不可能一個一個的去記或去查這種對應關系。試問下，有多少人看一眼某個顏色，就能夠在調色板上快速準確的定位那個顏色或者直接叫出那種顏色的名稱？這顯然不現實，至少現在如此

另外，那么css中還可以怎么調和出更多的顏色呢？

在介紹css的顏色單位之前，我們首先來了解下光的三原色，因為css的顏色單位就是按照光的三原色來調和的

發現光的色散奧妙之后，牛頓開始推論：既然白光能被分解及合成，那么這七種色光是否也可以被分解或合成。于是，紛繁的實驗和不停的計算充斥著他日后的生活。

一段時間后，牛頓通過計算，得出了一個結論：七種色光中只有紅、綠、藍三種色光無法被分解，于是也就談不到合成了。

而其他四種色光均可由這三種色光以不同比例相合而成。于是紅、綠、藍則被稱為“三原色光”或“光的三原色”（注意，這有別于我們熟知的三原色“紅黃藍”）。

牛頓通過計算得出上述結論后，未能完成實驗，便與世長辭。

這里再科普下光的三原色和顏料的三原色的區別

顏料三原色（CMYK）：品紅、黃、青(天藍)。色彩三原色可以混合出所有顏料的顏色，同時相加為黑色，黑白灰屬于無色系。

光學三原色（RGB）：紅、綠、藍(靛藍)。光學三原色混合后，組成顯示屏顯示顏色，三原色同時相加為白色，白色屬于無色系（黑白灰）中的一種。

那看到這里有人會問了，css為什么不按照顏料的三原色來調和呢？

因為道理很簡單，聰明的小伙伴應該已經知道答案了。上面我們也說過，屏幕是由像素組成的，每個像素就是一個單位色塊。而這個單位色塊之所以能顯示顏色，就是靠發光來實現的

既然光是由三種色光組成的，任何一種顏色均可以由這三種顏色調和出來的，那么為什么我們不能用三原色來表示一種顏色呢？

RGB值

RGB通過三原色的不同濃度來調配出不同的顏色

• 語法：RGB(red, green, blue)
• 范圍：每一種顏色的范圍在0 ~ 255（0% ~ 100%）之間

RGBA

就是在rgb的基礎上增加了一個a表示不透明度

• 1表示完全不透明
• 0表示完全透明
• .5半透明

十六進制的RGB值

就是RGB值的十六進制寫法

• 語法：#RRGGBB
• 范圍：每一種顏色的范圍在00 ~ ff 之間

如果顏色兩位兩位重復可以進行簡寫，如#aabbcc => #abc

在vscode中，我們可以看到其會對顏色進行預覽展示。并且將鼠標移至color處懸浮，會智能的彈出一個rgb調色板，方便我們進行調色

如果我們看到某種顏色，非常喜歡，那么在哪里才能買得到呢？ 怎么知道這個顏色的rgb值呢？

我們可以直接搜索黃色，哦不是，取色器！有些錄制軟件也會自帶取色功能，如FastStone Capture

下載地址：FastStone Capture - Download

總結

以上是生活随笔為你收集整理的【Web前端HTML5CSS3】05-样式继承与其他概念的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。