Files
2022-03-23 15:22:04 +01:00

3.1 KiB
Raw Permalink Blame History

id, title, challengeType, videoUrl, forumTopicId, dashedName
id title challengeType videoUrl forumTopicId dashedName
bad87fee1348bd9aedf08719 使用縮寫的十六進制編碼 0 https://scrimba.com/c/cRkpKAm 18338 use-abbreviated-hex-code

--description--

許多人對超過 1600 萬種顏色感到不知所措, 並且很難記住十六進制編碼。 幸運的是,你可以使用縮寫形式。

例如,紅色的 #FF0000 十六進制編碼可以縮寫成 #F00。 在這種縮寫形式裏三個數字分別代表着紅R、綠G、藍B三原色。

這樣,顏色的數量減少到了大約 4000 種。 且在瀏覽器裏 #FF0000#F00 是完全相同的顏色。

--instructions--

接下來,使用縮寫的十六進制編碼給元素設置正確的顏色。

顏色十六進制編碼縮寫形式
藍綠色#0FF
綠色#0F0
紅色#F00
紫紅色#F0F

--hints--

文本內容爲 I am red!h1 元素的字體顏色 color 應該爲紅色。

assert($('.red-text').css('color') === 'rgb(255, 0, 0)');

應使用紅色的縮寫十六進制代碼,而不是十六進制代碼 #FF0000

assert(code.match(/\.red-text\s*?{\s*?color\s*:\s*?#F00\s*?;?\s*?}/gi));

文本內容爲 I am green!h1 元素的字體顏色 color 應該爲綠色。

assert($('.green-text').css('color') === 'rgb(0, 255, 0)');

應使用綠色的縮寫十六進制代碼,而不是十六進制代碼 #00FF00

assert(code.match(/\.green-text\s*?{\s*?color\s*:\s*?#0F0\s*?;?\s*?}/gi));

文本內容爲 I am cyan!h1 元素的字體顏色 color 應該爲藍綠色。

assert($('.cyan-text').css('color') === 'rgb(0, 255, 255)');

應使用青色的簡寫十六進制代碼,而不是十六進制代碼 #00FFFF

assert(code.match(/\.cyan-text\s*?{\s*?color\s*:\s*?#0FF\s*?;?\s*?}/gi));

文本內容爲 I am fuchsia!h1 元素的字體顏色 color 應該爲紫紅色。

assert($('.fuchsia-text').css('color') === 'rgb(255, 0, 255)');

應使用紫紅色的簡寫十六進制代碼,而不是十六進制代碼 #FF00FF

assert(code.match(/\.fuchsia-text\s*?{\s*?color\s*:\s*?#F0F\s*?;?\s*?}/gi));

--seed--

--seed-contents--

<style>
  .red-text {
    color: #000000;
  }
  .fuchsia-text {
    color: #000000;
  }
  .cyan-text {
    color: #000000;
  }
  .green-text {
    color: #000000;
  }
</style>

<h1 class="red-text">I am red!</h1>

<h1 class="fuchsia-text">I am fuchsia!</h1>

<h1 class="cyan-text">I am cyan!</h1>

<h1 class="green-text">I am green!</h1>

--solutions--

<style>
  .red-text {
    color: #F00;
  }
  .fuchsia-text {
    color: #F0F;
  }
  .cyan-text {
    color: #0FF;
  }
  .green-text {
    color: #0F0;
  }
</style>

<h1 class="red-text">I am red!</h1>

<h1 class="fuchsia-text">I am fuchsia!</h1>

<h1 class="cyan-text">I am cyan!</h1>

<h1 class="green-text">I am green!</h1>