測試你的技能：值和單位

此技能測試的目的是評估您是否理解不同型別的CSS 屬性中使用的值和單位。

注意：您可以在此頁面上的互動式編輯器或線上編輯器（例如 CodePen、JSFiddle 或 Glitch）中嘗試解決方案。

如果您遇到困難，可以透過我們的 溝通渠道之一聯絡我們。

任務 1

在此任務中，第一個列表項已使用十六進位制顏色程式碼設定了背景顏色。您的任務是使用相同顏色在不同的格式中完成 CSS，並在最後一個列表項中使背景半透明。

  • 第二個列表項應使用 RGB 顏色。
  • 第三個應使用 HSL 顏色。
  • 第四個應使用 RGB 顏色，但將 alpha 通道設定為 0.6。

您可以在 此連結 中找到十六進位制顏色的轉換。您需要弄清楚如何在 CSS 中使用這些值。最終結果應如下面的圖片所示

Four list items. The first three with the same background color and the last with a lighter background.

嘗試更新下面的即時程式碼以重新建立完成的示例

下載此任務的起始點，以便在您自己的編輯器或線上編輯器中進行操作。

任務 2

在此任務中，我們希望您設定各種文字專案的尺寸，如下所述

  • <h1> 元素應為 50 畫素。
  • <h2> 元素應為 2em。
  • 所有 <p> 元素應為 16 畫素。
  • 緊跟在 <h1> 之後的 <p> 元素應為 120%。

最終結果應如下面的圖片所示

Some text at varying sizes.

嘗試更新下面的即時程式碼以重新建立完成的示例

下載此任務的起始點，以便在您自己的編輯器或線上編輯器中進行操作。

任務 3

在此任務中，我們希望您移動背景影像，使其水平居中，並距離盒子頂部 20%。

最終結果應如下面的圖片所示

A stat centered horizontally in a box and a short distance from the top of the box.

嘗試更新下面的即時程式碼以重新建立完成的示例

下載此任務的起始點，以便在您自己的編輯器或線上編輯器中進行操作。