【FCC前端教程】44關學習CSS與CSS3基礎「二」

時間  2020-07-20
標籤 FCC前端教程 學習 css css3 基礎 欄目 CSS 简体版
原文   原文鏈接

「前沿」

我有一段時間沒有更新FCC前端教程了，這一週就繼續寫完CSS與CSS3基礎的教程。最近工做和生活都比較繁忙因此文章更新也受到了必定的影響。不過技術文章寫做再忙也不會放棄的。我會繼續努力堅持着一週一篇文章的進度，繼續爲你們帶來我學習到的知識。讓咱們一塊兒繼續終身學習吧！css

這一篇文章是上一篇《44關學習CSS與CSS3基礎「一」》的第二部分，一共闖了44關。廢話少說，讓咱們一塊兒來闖關吧！html

「第二十三關」使用屬性選擇器改變元素屬性

關卡名：Use Attribute Selectors to Style Elements前端

知識點
  • 以前咱們使用了id和class屬性選擇器給特定的元素改變樣式；
  • 這種方式叫作ID和CLASS選擇器；
  • 除了這兩種CSS選擇器以外，還有其餘選擇讓咱們選擇一組自定義的元素來改變樣式的；
  • 咱們把CatPhotoApp拿出來練習其餘CSS選擇器；
  • 在這個關卡中咱們將使用[attr=value]（屬性=值）這種屬性選擇器來給咱們的 checkboxes （複選框）添加樣式；
  • 這個選擇器匹配特殊的屬性值，而後對這個屬性作出樣式的改變；

好比一下例子，全部type屬性值爲radio的元素加入 margin（外邊距）作出改變：面試

[type='radio'] {
  margin: 20px 0px 20px 0px;
}
複製代碼
過關目標
  • 使用屬性選擇器，選中全部type屬性爲複選框的元素；
  • 而且給與這些元素 10px 的頂部外邊距和 15px 的底部外邊距；
過關條件
  • type屬性選擇器必須用來選中全部複選框；
  • 全部複選框的頂部 margin 必須是 10px；
  • 全部複選框的底部 margin 必須是 15px；
學會了什麼？

這關卡主要教會咱們：算法

  1. 使用屬性選擇器來改變元素的樣式；

答案

「第二十四關」絕對與相對單位

關卡名：Understand Absolute versus Relative Units後端

知識點
  • 以前全部的關卡中，咱們都是給元素的 margin 和 padding 賦予「像素（pixels/px）」單位；
  • 像素是一個瀏覽器使用的長度單位，這個單位會告訴瀏覽器給予一個元素多少大小和空間；
  • 在CSS當中除了 px 單位以外，還可使用其餘可選的單位；
  • 可用單位主要分爲兩種 絕對單位（absolute） 和 相對單位（relative）
    • 絕對單位有 in（英寸） 和 mm （釐米），絕對長度單位近似於屏幕上的實際測量值，可是根據屏幕的分辨率會有一些差別；
    • 相對單位有 em 或者 rem, 二者分別都是相對單位，都會根據一個相對的元素轉換本身的大小；

那麼 em 和 rem 有什麼區別呢？瀏覽器

EM是相對長度，它是相對於當前元素的字體大小，若是當前元素沒有設置字體大小就會一直往父級找，而後相對於父級字體大小來轉換。數據結構

EM特性：框架

  1. em的值並非固定的；
  2. em會基層父級元素的字體大小；
  3. 若是父級也是使用了 em 長度單位，那當前元素的 em 換算就會使用父級 em 換算後的結果進行換算。（好比父級使用了1.2em，換算後是12px，那當前元素用的 1em 就是 12px，可是咱們想要的是 1em = 10px，這種狀況用 em 就會出現大小錯誤。）

REM是CSS3新增的一個相對單位，它是 root em 的縮寫，顧名思義就是根em。ide

REM特性：

  1. 它與EM不同的是，由於是"根"em，因此它永遠都是相對於HTML根元素的字體大小；
  2. 與EM相同的就是值並非固定的，都是相對一個元素的字體大小；
  3. 由於REM的特性是相對於HTML根元素，因此只要改變根元素的字體大小，就會對全部REM單位的元素髮生大小變化；
  4. 除了IE8及更早版本的瀏覽器內核，全部瀏覽器均支持REM；
  5. 對於不支持的瀏覽器來講，咱們就須要加入一個 px 單位的 font-size屬性，若是瀏覽器發現沒法使用 rem 即會使用 px 單位的 font-size 值；
  6. 這個單位可謂集合相對和絕對單位的優勢與一身，因此此單位引發了普遍的使用，特別是在作移動端網頁時，用於響應不一樣手機屏幕大小和分辨率大小；

這些相對單位的使用會在《響應式頁面開發》的關卡中詳細介紹使用場景。

過關目標
  • 給擁有red-box類的元素加入 padding 屬性，值爲 1.5em；
過關條件
  • red-box類元素必須含有 padding 屬性；
  • red-box類元素的padding屬性值必須爲1.5em；
學會了什麼？

這關卡主要教會咱們：

  1. 認識「像素（px）」之外的大小單位；
  2. 認識什麼是絕對與相對大小單位，而且分別擁有那些單位可使用；
  3. 如何使用em，這種相對單位；

答案

「第二十五關」HTML主體屬性樣式

關卡名：Style the HTML Body Element

知識點
  • 這一關開始，咱們從新開始一個頁面，而且一塊兒來學習CSS繼承；
  • 首先每個HTML頁面都會有一個body元素；
  • 這一關咱們用background-color屬性給body元素一個背景顏色爲black；
  • 若是這時頁面變成了黑色，證實咱們頁面中是有body元素的；

如下例子演示如何給body應用一個黑色背景的代碼：

body {
  background-color: black;
}
複製代碼
過關目標
  • 用CSS把頁面中body元素的背景色變成黑色；
  • 從而證實咱們頁面中擁有一個body元素；
過關條件
  • body元素必須擁有background-color屬性，而且值爲black；
  • CSS的格式必須合格而且遵循規範寫法；
  • CSS的規則寫法必須用分號結束；
學會了什麼？

這關卡主要教會咱們：

  1. 使用背景顏色；
  2. 證實了頁面中一定會有一個body元素；

答案

「第二十六關」從主體元素中繼承樣式

關卡名：Inherit Styles from the Body Element

知識點
  • 上一關咱們證實了每個HTML頁面中都一定會有body元素；
  • 並且body元素也是可使用CSS給它定製樣式的；

記住：body元素與其餘HTML中的元素同樣，都是可使用CSS給予樣式控制的。不一樣的就是，body元素中的樣式會被HTML中其餘元素默認繼承。意思就是說，任何在 body 中的樣式都會攜帶到其餘元素中，若是 body 中給予了背景顏色是黑色，那咱們加入一個div元素，默認也是黑色背景。

過關目標
  • 首先，建立一個h1元素，內容填入文字 「Hello World」；
  • 接下來咱們讓這個頁面下全部元素的文字顏色都改成綠色，要達到這樣的效果只須要在body元素中加入color: green便可；
  • 最後給body元素定義字體爲monospace，咱們只須要在body樣式中加入font-family: monospace屬性值便可；
過關條件
  • 建立一個h1元素；
  • h1元素內容是 Hello World；
  • h1元素有關閉標籤；
  • body元素應該有color屬性，而且值爲green；
  • body元素應該有font-family屬性，而且值爲monospace；
  • h1元素的字體應該繼承body元素的字體定義；
  • h1元素的字體顏色應該繼承body元素的字體顏色；
學會了什麼？

這關卡主要教會咱們：

  1. 學會繼承主體（body）元素的樣式；

答案

「第二十七關」CSS樣式繼承中樣式優先級

關卡名：Prioritize One Style Over Another

知識點
  • 有些時候HTML元素會同時存在多個樣式，而且產生衝突的可能性；
  • 舉例，咱們的h1元素沒法同時擁有綠色和粉紅色字體顏色的屬性；
  • 讓咱們來看看，若是咱們給一個元素一個類名，而且賦予這個類紅粉色的字體顏色；
  • 這個時候會不會覆蓋body元素中的color: greenCSS屬性；
過關目標
  • 建立一個CSS類，名爲pink-text；
  • 而後給pink-text加入字體顏色color: pink；
  • 把pink-text類賦予h1元素；
過關條件
  • h1元素必須擁有pink-text類；
  • <style>標籤中必須含有pink-text類樣式，而且含有改變字體顏色的屬性；
  • h1元素的字體應該是粉紅色（pink）；
學會了什麼？

這關卡主要教會咱們：

  1. 如何在CSS樣式繼承中覆蓋body元素的樣式；

答案

「第二十八關」覆蓋後續CSS中的樣式

關卡名：Override Styles in Subsequent CSS

知識點
  • 上一關咱們用pink-text類覆蓋了body元素的CSS樣式；
  • 這裏證實了CSS類會覆蓋body元素的CSS；
  • 因此下一個問題就是，咱們是否能夠覆蓋pink-text類的樣式呢？
  • 一個HTML元素是能夠疊加多個CSS類的，給一個元素多個CSS類只須要在多個類名之間加入空格便可；
<div class="class1 class2"></div>
複製代碼

注意：元素中多個CSS類的擺放順序是不會影響CSS樣式的權重的。真正決定CSS樣式的權重的是在CSS樣式表中的順序，CSS樣式表的樣式規則會從上往下寫，越是在後面的權重越高。由於.blue-text的樣式在.pink-text的後面，因此最後.blue-text的樣式會覆蓋.pink-text。

過關目標
  • 建立一個新的CSS類名爲blue-text，而後賦予這個類藍色字體樣式；
  • blue-text類在樣式表中必須放在pink-text以後；
  • 在擁有pink-text類的h1元素上疊加blue-text類；
過關條件
  • h1元素中須要有pink-text類；
  • h1元素中須要有blue-text類；
  • blue-text和pink-text都須要賦予給h1元素；
  • h1元素中的字體應該是藍色的；
學會了什麼？

這關卡主要教會咱們：

  1. 如何覆蓋CSS樣式，和使用CSS權重；

答案

「第二十九關」經過使用ID屬性覆蓋類屬性樣式

關卡名：Override Class Declarations by Styling ID Attributes

知識點
  • 上一關咱們知道了CSS樣式表是從上到下閱讀的，越是後面的權重就越高，就會覆蓋前面聲明的樣式屬性；
  • 因此就算咱們在h1元素中，把pink-text放在blue-text的前面，blue-text類中的CSS屬性權重也是更大，會覆蓋pink-text的CSS屬性；
  • 可是CSS屬性權重並不止於此，還有比這個權重更高的；
  • 這一關咱們給h1元素添加一個ID名爲orange-text，而後在CSS樣式表中給這個ID橙色字體顏色的樣式，從而覆蓋掉blue-text類和pink-text類的樣式；

給一個元素加入ID屬性須要使用如下寫法：

<h1 id="orange-text"></h1>
複製代碼

在CSS樣式表中定義ID屬性須要使用如下寫法：

#brown-text {
  color: brown;
}
複製代碼
過關目標
  • 給h1元素一個ID屬性，值爲orange-text；
  • 保留blue-text類和pink-text類在h1元素中；
  • 建立orange-text的CSS聲明，而且給予color: orange的屬性；
過關條件
  • h1元素須要有一個pink-text類；
  • h1元素須要有一個blue-text類；
  • h1元素須要有一個orange-textID；
  • 必須只有一個h1元素；
  • orange-textID須要聲明好CSS的屬性；
  • h1元素不該該有任何style屬性；
  • h1元素中的字體應該是橙色的；
學會了什麼？

這關卡主要教會咱們：

  1. 使用ID屬性的樣式來覆蓋類樣式；

答案

「第三十關」使用行內樣式覆蓋類樣式

關卡名：Override Class Declarations with Inline Styles

知識點
  • 上一關咱們見證了ID屬性的樣式聲明在權重中是高於類屬性的樣式聲明；
  • 就算在CSS樣式表中是寫在最上面的，也會比其餘類屬性聲明的CSS屬性要大；
  • 可是還有一個大佬是被全部這些都權重更高的，還記得行內樣式嗎？就是在元素中定義的style屬性；

不記得行內樣式的寫法的同窗，能夠看看如下例子：

<h1 style="color: green"></h1>
複製代碼
過關目標
  • 使用行內樣式，讓h1元素中的字體變成白色（color: white）；
  • 保留h1元素中的blue-text類，pink-text類和orange-textID屬性；
過關條件
  • h1元素須要有一個pink-text類；
  • h1元素須要有一個blue-text類；
  • h1元素須要有一個orange-textID；
  • h1元素須要有一個style屬性；
  • h1元素中的字體是白色的；
學會了什麼？

這關卡主要教會咱們：

  1. 使用行內樣式覆蓋元素的樣式；

答案

「第三十一關」用 Important 覆蓋全部樣式

關卡名：Override All Other Styles by using Important

知識點
  • 在上一個關卡中發現，行內樣式是會覆蓋全部類型的樣式聲明；
  • 可是行內樣式並非最大的，還有最後一個比行內樣式權重還要高的；
  • 對那就是使用!important，顧名思義就是「重要」的意識，也是表達着這個樣式有最高優先級；
  • 在咱們使用它以前，先來了解一下爲何咱們須要強制覆蓋CSS樣式；

爲什麼要強制覆蓋CSS樣式？又有何時須要咱們這麼作呢？

在不少狀況下，咱們須要使用到CSS庫，甚至是某UI框架。由於是使用別的開發者寫好的樣式，天然就有可能咱們寫的樣式是被原有庫或者框架的樣式所覆蓋了。因此當咱們須要保證咱們編寫的CSS擁有最高優先級，而且絕對有效，這個時候咱們就可使用 !important。

  • 讓咱們回到最初的pink-text類樣式聲明，一開始咱們使用了寫在後面的blue-text類覆蓋了它的樣式；
  • 接下來是使用了orange-textID屬性覆蓋它；
  • 最後使用了行內樣式覆蓋；

因此樣式聲明的優先級順序就是：

CSS類聲明順序 < ID屬性樣式 < 行內樣式

過關目標
  • 讓咱們在pink-text類的顏色聲明後面加入!important；
  • 用這個給pink-text類的樣式聲明獲得最大優先級；

!important 的使用例子：

.brown-text {
  color: brown !important;
}
複製代碼
過關條件
  • h1元素須要有一個pink-text類；
  • h1元素須要有一個blue-text類；
  • h1元素須要有一個orange-textID；
  • h1元素中應該有行內屬性爲color: white；
  • pink-text類樣式聲明中應該有 !important結尾；
  • h1元素中的字體應該是粉紅色；
學會了什麼？

這關卡主要教會咱們：

  1. 如何使用最高優先級的!important；

答案

「第三十二關」使用Hex代碼指定特定顏色

關卡名：Use Hex Code for Specific Colors

知識點
  • 大家知道在CSS中還有其餘方式能夠用來指定顏色的嗎？
  • 其中一種方式就是使用 十六進制（Hexadecimal）或者叫Hex顏色代碼；

什麼是十六進制？

學過計算機的同窗應該都知道，一般用小數，或者以10爲底的數，那就是用數字0到9。十六進制，顧名思義就是用16爲底的數。也就是說須要使用16個不一樣的符號。符號0到9用來表明數字中的零到九，而後A，B，C，D，E，F就是第十到十五的符號。從0到9，A到F一共就有16個符號組成十六進制的代碼。

  • 在CSS中，咱們可使用6個十六進制的數值來表明顏色；
  • 每兩個都是表明着紅（R），綠（G），藍（B）三種色系。
  • 拿#000000的黑色做爲例子，若是紅，綠，藍都調到最低，天然就是沒有顏色，那就是黑色了；
  • 能夠把這三種顏色當成三個顏色的燈泡，而後十六進制是用來控制他們的亮度，數值越高就越亮，0爲最低，也就是燈會關掉，因此全部#000000就等同於三盞燈都關掉，天然是黑色了。若是三盞燈都調到最亮，那就會是白色了，也就是咱們用的#FFFFFF；

顏色碼使用例子以下：

body {
  color: #000000;
}
複製代碼
過關目標
  • 替換body元素中的black屬性值爲#000000；
過關條件
  • body元素的背景顏色應該是黑色；
  • 須要替換black，而且使用Hex顏色碼；
學會了什麼？

這關卡主要教會咱們：

  1. 什麼是Hex顏色碼；
  2. 什麼是十六進制；
  3. 如何使用Hex顏色碼；

答案

「第三十三關」使用十六進制代碼來混合顏色

關卡名：Use Hex Code to Mix Colors

知識點
  • 咱們來回顧一下上一關的知識，Hex顏色代碼中有6位十六進制的數值，每兩位都是分別表明着紅（R），綠（G），藍（B）三種色系；
  • 咱們能夠隨意調配這三種純顏色的亮度來混合出超過1600萬種顏色；
  • 好比說橙色，就是純紅色，加一點綠色，而後沒有藍色，對應Hex顏色碼就是#FFA500；
  • 數值0在Hex碼中是最低的數值，等同於把這個顏色調到沒有爲止；
  • 數值F就是Hex碼中最大值，等同於把這個顏色調到最亮值；
過關目標
  • 轉換一下顏色成Hex顏色碼：
顏色 Hex 碼
Dodger Blue #1E90FF
Green #00FF00
Orange #FFA500
Red #FF0000
過關條件
  • h1元素的字體I am red!須要是紅色；
  • 紅色（Red）字體顏色屬性應該使用hex 碼替換顏色值red;
  • h1元素的字體I am green!須要是綠色；
  • 綠色（Green）字體顏色屬性應該使用hex 碼替換顏色值green;
  • h1元素的字體I am dodger blue!須要是寶藍色；
  • 寶藍色（Dodger Blue）字體顏色屬性應該使用hex 碼替換顏色值dodgerblue;
  • h1元素的字體I am orange!須要是橙色；
  • 橙色（Orange）字體顏色屬性應該使用hex 碼替換顏色值orange;
學會了什麼？

這關卡主要教會咱們：

  1. 使用Hex顏色碼替換顏色名詞的屬性值；

答案

「第三十四關」使用Hex顏色碼縮寫

關卡名：Use Abbreviated Hex Code

知識點
  • 超過1600萬種顏色碼的可能性，讓許多人感到不知所措；
  • 並且很難記住十六進制代碼，幸運的是你能夠用他們的縮寫版；
  • 好比紅色的Hex顏色碼爲 #FF0000 能夠被縮寫爲 #F00，這個縮寫版只給紅色一個數值，綠色一個數值和藍色一個數值；
  • 可是這樣的縮寫版，就會讓咱們的顏色總可能數降到4000種；
  • 就算使用這種縮寫版，瀏覽器會識別 #F00 和 #FF0000 爲同一個顏色；
過關目標
  • 用如下縮寫版的Hex顏色碼來更換對應的CSS類中的顏色值：
顏色 縮寫Hex碼
Cyan #0FF
Green #0F0
Red #F00
Fuchsia #F0F
過關條件
  • h1元素的字體I am red!須要是紅色；
  • 紅色（Red）字體顏色屬性應該使用縮寫hex 碼替換顏色值#FF0000;
  • h1元素的字體I am green!須要是綠色；
  • 綠色（Green）字體顏色屬性應該使用縮寫hex 碼替換顏色值#00FF00;
  • h1元素的字體I am cyan!須要是寶青色；
  • 青色（Cyan）字體顏色屬性應該使用縮寫hex 碼替換顏色值#00FFFF;
  • h1元素的字體I am fuchsia!須要是櫻紅色；
  • 櫻紅色（Fuchsia）字體顏色屬性應該使用縮寫hex 碼替換顏色值#FF00FF;
學會了什麼？

這關卡主要教會咱們：

  1. 使用縮寫版的Hex顏色碼；

答案

「第三十五關」使用RGB值改變元素顏色

關卡名：Use RGB values to Color Elements

知識點
  • 除了Hex顏色碼，還有其餘方法能夠用來給元素賦予顏色，那就是使用RGB值；
  • 黑色的RGB值是：rgb(0, 0, 0)；
  • 白色的RGB值是：rgb(255, 255, 255)；
  • 與十六進制同樣的原理，都是使用調整紅（R），綠（G），藍（B）三種色系的亮度來混合出1600萬種顏色；
  • 十六進制使用的是0-9和A-F，而RGB使用的是0到255，若是咱們計算一下，其實16 x 16 就是256，而計算機都是從0開始，因此 256-1=255 ；
  • 因此RGB和十六進制都是擁有同樣的顏色種數，而且都是調整三種色系來變換顏色的；

如下是把背景顏色換成橙色的CSS代碼：

body {
  background-color: rgb(255, 165, 0);
}
複製代碼
過關目標
  • 把body元素的背景顏色換成RGB中的黑色值：rgb(0, 0, 0)；
過關條件
  • h1元素的字體I am red!須要是紅色；
  • 紅色（Red）字體顏色屬性應該使用RGB值替換Hex顏色值;
  • h1元素的字體I am orchid!須要是淡紫色；
  • 淡紫色（Orchid）字體顏色屬性應該使用RGB值替換Hex顏色值;
  • h1元素的字體I am blue!須要是藍色；
  • 藍色（Blue）字體顏色屬性應該使用RGB替換Hex顏色值;
  • h1元素的字體I am sienna!須要是赭色；
  • 赭色（Sienna）字體顏色屬性應該使用RGB替換Hex顏色值;
學會了什麼？

這關卡主要教會咱們：

  1. 使用RGB值改變元素顏色；

答案

「第三十六關」用RGB來混合顏色

關卡名：Change the Color of Text

知識點
  • 與Hex顏色代碼同樣，咱們能夠用不一樣的RGB值來混合出各類顏色；
過關目標
  • 使用如下RGB值來替換CSS中的Hex顏色代碼：
顏色 RGB值
Blue rgba(0, 0, 255)
Red rgb(255, 0 , 0)
Orchid rgb(218, 112, 214)
Sienna rgb(160, 82, 45)
過關條件
  • h2元素中須要有style屬性；
  • h2元素的color樣式屬性應該賦予red這個值；
  • style屬性值裏的樣式屬性應該以;符號結束；
學會了什麼？

這關卡主要教會咱們：

  1. 如何使用RGB混合顏色;

答案

「第三十七關」使用CSS變量同時改變多個元素樣式

關卡名：Use CSS Variables to change several elements at once

知識點
  • CSS變量是一種經過只改變一個值來一次性改變多個CSS樣式屬性的強大方法；
  • 遵循下面的目標，看看僅改變三個值來改變多個元素的樣式；
過關目標
  • 在penguin類中，改變一下內容：
    1. 改變--penguin-skin的black爲gray；
    2. 改變--penguin-belly的gray爲white；
    3. 改變--penguin-beak的yellow爲orange；
  • 必須在/* Only change code below this line */ 和 /* Only change code above this line */ 這兩個備註之間修改代碼；
過關條件
  • penguin類中的--penguin-skinCSS變量的值改成gray；
  • penguin類中的--penguin-bellyCSS變量的值改成white；
  • penguin類中的--penguin-beakCSS變量的值改成orange；
學會了什麼？

這關卡主要教會咱們：

  1. 如何使用CSS變量批量改變多個元素樣式；

答案

「第三十八關」建立自定義CSS變量

關卡名：Create a custom CSS Variable

知識點
  • 建立一個CSS變量，咱們只須要在變量名前面加上兩個「橫槓（-）」便可；
  • 編寫語法以下：
--penguin-skin： gray;
複製代碼
  • 以上代碼會建立一個變量，名爲--penguin-skin，而且賦予了這個變量的值爲gray；
  • 如今咱們就能夠在CSS樣式表中任何的地方使用這個變量；
過關目標
  • 在penguin類中，建立一個變量名--penguin-skin；
  • 而且給予這個變量一個值爲gray；
  • 必須在/* Only change code below this line */ 和 /* Only change code above this line */ 這兩個備註之間編寫代碼；
過關條件
  • penguin類中須要含有一個--penguin-skin變量，而且變量值爲gray；
學會了什麼？

這關卡主要教會咱們：

  1. 如何編寫CSS變量；

答案

「第三十九關」使用自定義CSS變量

關卡名：Use a custom CSS Variable

知識點
  • 上一關咱們建立了一個自定義的CSS變量，這一關咱們來看看是怎麼使用的；
  • 建立了一個CSS變量後，這個變量的名字能夠在CSS樣式屬性中使用，只要咱們關聯這個變量名便可；
  • 在代碼中的關聯寫法以下：
background： var(--penguin-skin);
複製代碼
  • 以上代碼改變了background屬性的值，這個值咱們用了CSS變量；
  • CSS的變量的值，就是咱們上一關定義的gray，這個值會被關聯過來；

注意：使用的變量名字必須是和定義的變量名徹底一致，要不就不會生效！

過關目標
  • 把如下幾個CSS類中的background屬性的值都替換成--penguin-skinCSS變量：
    1. penguin-top;
    2. penguin-bottom;
    3. right-hand;
    4. left-hand;
過關條件
  • penguin-topCSS類中的background屬性值須要改成使用--penguin-skinCSS變量；
  • penguin-bottomCSS類中的background屬性值須要改成使用--penguin-skinCSS變量；
  • right-handCSS類中的background屬性值須要改成使用--penguin-skinCSS變量；
  • left-handCSS類中的background屬性值須要改成使用--penguin-skinCSS變量；
學會了什麼？

這關卡主要教會咱們：

  1. 如何使用自定義CSS變量；

答案

「第四十關」給CSS變量加上回退值

關卡名：Attach a Fallback value to a CSS Variable

知識點
  • 當咱們使用CSS變量作爲屬性的值，咱們能夠賦予這個變量一個回退值；
  • 所謂的回退值，就是當這個變量無效或者沒法取得值時，就會使用回退的值；

注意：這個回退值並非用來提升瀏覽器兼容的，在IE瀏覽器下回退值也不會生效的。因此這個回退值只是用於當變量沒法獲取到值時，瀏覽器有一個可回退的值可用，而且能夠保證有效顯示。

以下是如何設置回退值的例子：

background: var(--penguin-skin, black);
複製代碼
  • 上面的例子中，若是--penguin-skin變量沒法獲取到值，就會自動回退使用black作爲背景顏色屬性的值；
過關目標
  • 同窗們應該都注意到，右邊的企鵝的身體部分的顏色不見了；
  • 這個是由於.penguin-top類和.penguin-bottom類中的背景顏色屬性的值中的變量名拼寫錯誤了，因此致使變量沒法取到變量所定義的值；
  • 在不修正這個變量名拼寫錯誤的狀況下，咱們給.penguin-top類和.penguin-bottom類中的background屬性的變量值加上回退顏色：black；
過關條件
  • 在penguin-top類中的background屬性的變量值加入回退值black；
  • 在penguin-bottom類中的background屬性的變量值加入回退值black；
學會了什麼？

這關卡主要教會咱們：

  1. 如何給CSS變量加上可回退的值；

答案

「第四十一關」CSS變量的瀏覽器兼容

關卡名：Improve Compatibility with Browser Fallbacks

知識點
  • 當咱們使用CSS時，頗有可能咱們會遇到瀏覽器兼容問題；
  • 若是遇到須要兼容不支持CSS變量的瀏覽器時，咱們要提供一個回退的屬性給瀏覽器讀取；
  • 當瀏覽器解析頁面上的CSS時，它會忽略沒法識別的CSS屬性；
  • 好比此時咱們有一個背景顏色屬性值使用了CSS變量，Internet Explore（簡稱IE）會忽略這個IE不支持的背景顏色，由於IE不支持使用CSS變量。這種狀況下IE瀏覽器只會尋找其餘它認識的背景屬性，若是它找不到就會回退到瀏覽器默認的背景顏色，固然這樣不是咱們想要的，而且可能默認的顏色和咱們理想的效果有很大的出入；
  • 按照以上的邏輯，若是咱們須要給某一個屬性一個兼容的回退值，咱們只須要在不兼容的屬性上面添加一個可兼容的屬性便可；
  • 這樣當瀏覽器遇到一個屬性它沒法識別，就會往上找可用的屬性，這樣就能夠作到瀏覽器兼容了；
過關目標
  • 在代碼中咱們能夠看到，在.red-box類樣式中的background屬性值使用了--red-colorCSS變量；
  • 咱們在這個屬性的上方加入background: red，從而兼容其餘不支持CSS變量的瀏覽器；
過關條件
  • .red-box類中的background屬性上面添加一個background: red的兼容屬性；
學會了什麼？

這關卡主要教會咱們：

  1. 若是作到瀏覽器兼容；

答案

「第四十二關」繼承CSS變量

關卡名：Inherit CSS Variables

知識點
  • 當咱們建立一個CSS變量，咱們是能夠在建立的CSS選擇器中使用；
  • 若是我如今把--penguin-skin變量下載.penguin類選擇器中，那就能.penguin中能夠調用這個CSS變量；
  • 同時也能夠在.penguin的全部子節點中使用，除外都是沒法調用的；

那些纔是子節點呢？

好比如今咱們有一段這樣的HTML： <div class="foo"><span class="bar"/></div>

這段HTML中bar就是foo的子節點，他們彼此有繼承關係。

  • 爲了能夠良好利用繼承關係，CSS變量通常都會放入:root元素；
  • :root是一個僞類（pseudo-class）選擇器，它會直接匹配HTML文檔（document）中的根元素，那就是html元素；
  • 在:root僞類中添加咱們的CSS變量，遵循繼承關係這些變量全局均可以使用了；
過關目標
  • 在:root僞類選擇器中聲明一個--penguin-belly變量，而且給予pink屬性值；
  • 而後咱們就能夠看到全部使用到這個變量的地方，都會能夠繼承而且生效；
過關條件
  • --penguin-belly變量須要在:root僞類選擇器中聲明，而且屬性值是pink；
學會了什麼？

這關卡主要教會咱們：

  1. 如何使用CSS繼承關係來使用CSS變量；

答案

「第四十三關」在特定地方改變CSS變量

關卡名：Change a variable for a specific area

知識點
  • 當咱們在:root僞類選擇器中定義CSS變量，整個頁面使用到這個變量的地方都會被影響；
  • 可是若是咱們想在某一元素中從新定義這個變量，咱們只須要在這個選擇器中從新定義便可；
過關目標
  • 在penguin類中改變--penguin-belly屬性值爲white；
過關條件
  • penguin類中加入--penguin-belly屬性，而且值賦予white；
學會了什麼？

這關卡主要教會咱們：

  1. 如何在特定地方改變CSS變量值；

答案

「第四十四關」使用媒體查詢來修改變量值

關卡名：Use a media query to change a variable

知識點
  • CSS變量能夠簡化媒體查詢的使用方式；
  • 好比當咱們屏幕小於或大於媒體查詢的範圍時，咱們能夠改變CSS變量的值；
  • 這時候全部使用了這個變量的屬性就會跟着改變；
過關目標
  • 在:root選擇器中的media query內，從新定義--penguin-size的值爲200px；
  • 同時也從新定義--penguin-skin變量的值爲black;
  • 最後改變預覽區域的寬度，看看有什麼變化；
過關條件
  • :root中須要從新定義--penguin-size的值爲200px；
  • :root中須要從新定義--penguin-skin的值爲black；
學會了什麼？

這關卡主要教會咱們：

  1. 在媒體查詢中使用CSS變量重定義，從而達到在特定屏幕大小時，變量值發生變化；

答案

「總結」

這一期咱們終於完成了CSS與CSS3基礎的全部關卡，我的以爲這個FCC集訓營的關卡中的CSS知識仍是比較全面的。在編寫這些關卡的過程當中確實重溫了很多前端基礎，也是收益匪淺。在跟着個人教程一塊兒闖關的同窗們，也但願大家也有所收穫。

我是三鑽，一個在技術銀河中等大家一塊兒來終身漂泊學習。 點贊是力量，關注是承認，評論是關愛！下期再見 👋！

系列閱讀

  1. 《勇闖28個關卡學會HTML與HTML5基礎》 —— 這周咱們一塊兒闖過了22關，下一期咱們會一塊兒把剩餘的22關完成。學習是一種像登山同樣的過程，要經歷過漫長的上坡路，一步一個腳印。「路漫漫其修遠兮，吾將上下而求索。」， 在追尋知識的道路上，前方的道路還很漫長，但咱們將百折不撓，竭盡全力地，上天下地的去追求和探索。讓咱們繼續堅持學習，終身學習成長。在大前端的時代爬到技術的巔峯，作一個有深度的技術人員。
  2. 《44關學習CSS與CSS3基礎「一」》 —— 這一期咱們一塊兒攻破前端第二大知識點《CSS基礎入門》。由於這一課一共有44關，我把文章分紅兩期更新。

推薦系列

小夥伴們能夠查看或者訂閱相關的專欄，從而集中閱讀相關知識的文章哦。

  • 《數據結構與算法》 --- 到了現在，若是想成爲一個高級開發工程師或者進入大廠，不論崗位是前端、後端仍是AI，算法都是重中之重。也不管咱們須要進入的公司的崗位是否最後是作算法工程師，前提面試就須要考算法。

  • 《FCC前端集訓營》 --- 根據FreeCodeCamp的學習課程，一塊兒深刻淺出學習前端。穩固前端知識，一塊兒在FreeCodeCamp得到證書

  • 《前端星球》 --- 以實戰爲線索，深刻淺出前端多維度的知識點。內含有多方面的前端知識文章，帶領不懂前端的童鞋一塊兒學習前端，在前端開發路上童鞋一塊兒燃起心中那團火

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程