CSS基礎

一、CSS繼承

1.給 HTML 的 body 元素添加樣式

每一個 HTML 頁面都有一個 body 元素。
我們可以通過設置 background-color 的屬性值為黑色，來證明 body 元素的存在。

<style>body {background-color: black;//將整個body設置為黑色 } </style>

2.從 body 元素繼承樣式

設置 body 元素樣式的方法跟設置其他 HTML 元素樣式的方式一樣，并且其他元素也會繼承 body 中所設置的樣式。

<style>body {background-color: black;color:green;font-family: monospace;} </style> <h1>Hello World</h1> //h1元素繼承了body元素中設置的樣式

3.樣式中的優先級

HTML 元素的樣式會跟其他樣式發生沖突。
就像 h1 元素不能同時設置綠色和粉色兩種顏色。

<style>body {background-color: black;font-family: monospace;color: green;}.pink-text{color:pink;} </style> <h1 class="pink-text">Hello World!</h1> //pink-text class覆蓋了body元素的CSS樣式

4.Class 選擇器的優先級高于繼承樣式

剛剛證明了 class 會覆蓋 body 的 CSS 樣式,那么要怎么樣才能覆蓋 pink-text class 中所定義的樣式？
HTML 同時應用多個 class 屬性需以空格來間隔。

class="class1 class2" //HTML元素里應用的class的先后順序無關緊要.

但是，在<style> 標簽里面聲明的class順序十分重要，之后的聲明會覆蓋之前的聲明。第二個聲明的優先級始終高于第一個聲明。由于 .blue-text 是在后面聲明的，所以它的樣式會覆蓋.pink-text里的樣式。

5.ID 選擇器優先級高于 Class 選擇器

剛剛證明了瀏覽器讀取 CSS 是由上到下的。 這就意味著，如果發生沖突，瀏覽器將會應用最后聲明的樣式。
注意：如果我們在 h1 元素的類中，將 blue-text 放置在 pink-text 之前，它仍然會檢查聲明順序，而不是使用順序！

#orange-text{color:orange; } //在style中設置#orange-text ID選擇器 <h1 id="orange-text">ID選擇器</h1>

注意：無論在 pink-text class 之前或者之后聲明，id 選擇器的優先級總是高于 class 選擇器.

6.內聯樣式的優先級高于 ID 選擇器

id 選擇器無論在 style 標簽的任何位置聲明，都會覆蓋 class 聲明的樣式。

<h1 id="orange-text" class="pink-text blue-text" style="color:white;">Hello World!</h1> //內聯樣式高于ID選擇器

7.Important 的優先級最高

很多時候，會使用 CSS 庫， CSS 庫中的樣式會意外覆蓋你的 CSS 樣式。 如果想保證你的 CSS 樣式不受影響，你可以使用 !important。

(1)#orange-text {color: orange !important; } (2).pink-text {color: pink !important; } //!important可以放在class或者id后面

二、顏色

1.使用十六進制編碼獲得指定顏色

日常生活中，我們使用的計數方法一般是decimals，或十進制，即使用數字0到9來表示。 而Hexadecimals（或hex）基于16位數字，它包括16種不同字符。像十進制一樣，0-9的符號代表0到9的值。然后，A、B、C、D、E、F代表10至15的值。總的來說，0到F在十六進制里代表數字，總共有16個值。
在 CSS 里面，我們可以使用6個十六進制的數字來代表顏色，每兩個數字控制一種顏色，分別是紅（R）、綠（G）、藍（B）。例如，#000000代表黑色，同時也是最小的值。

body {color: #000000; }

2.使用十六進制編碼混合顏色

通過三原色（紅、綠、藍），我們可以創建 1600 萬種不同顏色。
例如，橘色是純紅色混合一些綠色而成，其中沒有藍色。 在十六進制編碼里面，它可以寫成 #FFA500。
0 是十六進制里面最小的數字，表示沒有顏色。
F 是十六進制里面最大的數字，有最高的亮度。

顏色十六進制

道奇藍	#1E90FF
綠色	#00FF00
橙色	#FFA500
紅色	#FF0000

3.使用縮寫的十六進制編碼

許多人對超過 1600 萬種顏色感到不知所措， 并且很難記住十六進制編碼。 幸運的是，你可以使用縮寫形式。
例如，紅色的 #FF0000 十六進制編碼可以縮寫成 #F00。 在這種縮寫形式里，三個數字分別代表著紅（R）、綠（G）、藍（B）三原色。
這樣，顏色的數量減少到了大約 4000 種。 且在瀏覽器里 #FF0000 和 #F00 是完全相同的顏色。

顏色十六進制編碼縮寫形式

藍綠色	#0FF
綠色	#0F0
紅色	#F00
紫紅色	#F0F

4.使用 RGB 值為元素上色

RGB 值是在 CSS 中表示顏色的另一種方法。
黑色的 RGB 值：

rgb(0, 0, 0)

白色的 RGB 值：

rgb(255, 255, 255)

RGB 值與我們之前學到的十六進制編碼不同。RGB 值不需要用到 6 位十六進制數字，而只需要指定每種顏色的亮度大小，數值范圍從 0 到 255。
如果我們稍微計算一下，就不難發現這兩種表示方式本質上是等價的。在十六進制編碼中，我們用兩個十六進制數表示一個顏色；這樣，每種顏色都有 16 * 16（即 256）種可能。 所以，RGB 從零開始計算，與十六進制代碼的值的數量完全相同。

body {background-color: rgb(255, 165, 0); }

5.使用 RGB 混合顏色

就像使用十六進制編碼一樣，你可以通過不同值的組合，來混合得到不同的 RGB 顏色。

顏色RGB

藍色	rgb(0, 0, 255)
紅色	rgb(255, 0, 0)
淡紫色	rgb(218, 112, 214)
赭黃色	rgb(160, 82, 45)

三、CSS變量

1.使用 CSS 變量一次更改多個元素

CSS 變量可以實現僅需要更新一個值，就可以將更改應用到多個 CSS 樣式屬性的強大方法。

.penguin {/* 只修改這一行下面的代碼 */--penguin-skin: gray;--penguin-belly: white;--penguin-beak: orange;/* 只修改這一行上面的代碼 *///自定義}

2.創建一個自定義的 CSS 變量

為創建一個 CSS 變量，你只需要在變量名前添加兩個連字符號，并為其賦值即可，例子如下：

--penguin-skin: gray; //這樣就會創建一個 --penguin-skin 變量，它的值為 gray。 現在，其他元素可通過該變量來使元素變成灰色。

3.使用一個自定義的 CSS 變量

創建變量后，CSS 屬性可以通過調用變量名來使用它對應的值。

background: var(--penguin-skin); //因為引用了 --penguin-skin 變量的值，使用了這個樣式的元素背景顏色會是灰色。 //請注意，除非變量名稱完全匹配，否則將不會應用樣式。

4.給 CSS 變量設置備用值

使用變量來作為 CSS 屬性值的時候，可以設置一個備用值來防止由于某些原因導致變量不生效的情況。
注意：備用值不是用于增強瀏覽器的兼容性，它也不適用于 IE 瀏覽器。 相反，它是用來讓瀏覽器在找不到你的變量時可以顯示一種顏色。

background: var(--penguin-skin, black);

5.通過瀏覽器降級提高兼容性

使用 CSS 時可能會遇到瀏覽器兼容性問題。 提供瀏覽器降級方案來避免潛在的問題會顯得很重要。
當瀏覽器解析頁面的 CSS 時，會自動忽視不能識別或者不支持的屬性。 舉個例子，如果使用 CSS 變量來指定站點的背景色，IE 瀏覽器由于不支持 CSS 變量而會忽略背景色。 此時，瀏覽器會嘗試使用其它值。 但如果沒有找到其它值，則會使用默認值，也就是沒有背景色。
這意味著如果想提供瀏覽器降級方案，在聲明之前提供另一個更寬泛的值即可。 這樣老舊的瀏覽器會降級使用這個方案，新的瀏覽器會在后面的聲明里覆蓋降級方案。

.red-box {background: red;//備用屬性background: var(--red-color);}

6.繼承 CSS 變量

當創建一個變量時，變量會在創建變量的選擇器里可用。 同時，在這個選擇器的后代選擇器里也是可用的。 這是因為 CSS 變量是可繼承的，和普通的屬性一樣。
CSS 變量經常會定義在 :root 元素內，這樣就可被所有選擇器繼承。
:root 是一個偽類選擇器，它是一個能夠匹配文檔根元素的選擇器，通常指的是 html 元素。 我們在 :root 里創建變量在全局都可用，即在任何選擇器里都生效。

7.更改特定區域的變量

當你在 :root 里創建變量時，這些變量的作用域是整個頁面。
如果在元素里創建相同的變量，會重寫作用于整個頁面的變量的值。

:root {--penguin-belly:pink;}@media (max-width: 350px) {:root {--penguin-belly:white;}//media query（媒體查詢）聲明的 :root 選擇器里,重寫了--penguin-belly的值}

8.使用媒體查詢更改變量

CSS 變量可以簡化媒體查詢的定義方式。
例如，當屏幕小于或大于媒體查詢所設置的值，只要我們更新變量的值，那么使用了此變量的元素樣式就都會更改。

:root {--penguin-size: 300px;--penguin-skin: gray;}@media (max-width: 350px) {:root {--penguin-size:200px;--penguin-skin:black;//在 media query（媒體查詢）聲明的 :root 選擇器里，重定義 --penguin-size 的值為 200px。 //同時，重新定義 --penguin-skin 的值為 black}

謝謝你的堅持閱讀ovo喲，讓我們一起加油吖

總結

以上是生活随笔為你收集整理的CSS基础_Day04的全部內容，希望文章能夠幫你解決所遇到的問題。

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