b3af21d50f
* chore(i18n,curriculum): update translations * chore: Italian to italian Co-authored-by: Nicholas Carrigan <nhcarrigan@gmail.com>
3.2 KiB
id, title, challengeType, videoUrl, forumTopicId, dashedName
| id | title | challengeType | videoUrl | forumTopicId | dashedName |
|---|---|---|---|---|---|
| bad87fee1348bd9aedf08719 | Usare codici Hex abbreviati | 0 | https://scrimba.com/c/cRkpKAm | 18338 | use-abbreviated-hex-code |
--description--
Molte persone si sentono sopraffatte dalle possibilità offerte da più di 16 milioni di colori. Ed è difficile ricordare i codici esadecimali. Fortunatamente puoi abbreviarli.
Ad esempio, il codice esadecimale del rosso #FF0000 può essere abbreviato in #F00. Questa forma abbreviata fornisce una cifra per il rosso, una cifra per il verde, e una cifra per il blu.
Questo riduce il numero totale di colori possibili a circa 4.000. Ma i browser interpreteranno #FF0000 e #F00 esattamente come lo stesso colore.
--instructions--
Vai avanti, prova a usare i codici esadecimali abbreviati per colorare gli elementi corretti.
| Colore | Codice Hex breve |
|---|---|
| Ciano | #0FF |
| Verde | #0F0 |
| Rosso | #F00 |
| Fucsia | #F0F |
--hints--
Il tuo elemento h1 con il testo I am red! dovrebbe ricevere il color rosso.
assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
L'hex code abbreviato per il colore rosso dovrebbe essere utilizzato al posto del codice hex #FF0000.
assert(code.match(/\.red-text\s*?{\s*?color\s*:\s*?#F00\s*?;?\s*?}/gi));
Al tuo elemento h1 con il testo I am green! dovrebbe essere assegnato il color verde.
assert($('.green-text').css('color') === 'rgb(0, 255, 0)');
L'hex code abbreviato per il colore verde deve essere utilizzato al posto della parola #00FF00.
assert(code.match(/\.green-text\s*?{\s*?color\s*:\s*?#0F0\s*?;?\s*?}/gi));
Il tuo elemento h1 con il testo I am cyan! dovrebbe ricevere il color ciano.
assert($('.cyan-text').css('color') === 'rgb(0, 255, 255)');
L'hex code abbreviato per il colore ciano dovrebbe essere utilizzato al posto della parola #00FFFF.
assert(code.match(/\.cyan-text\s*?{\s*?color\s*:\s*?#0FF\s*?;?\s*?}/gi));
Il tuo elemento h1 con il testo I am fuchsia! dovrebbe ricevere il color fucsia.
assert($('.fuchsia-text').css('color') === 'rgb(255, 0, 255)');
L'hex code abbreviato per il colore fucsia dovrebbe essere utilizzato al posto dell'hex code #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>