freeCodeCamp/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-abbreviated-hex-code.sp...

4.3 KiB

id title challengeType videoUrl localeTitle
bad87fee1348bd9aedf08719 Use Abbreviated Hex Code 0 Use el código hexadecimal abreviado

Descripción

Muchas personas se sienten abrumadas por las posibilidades de más de 16 millones de colores. Y es difícil recordar el código hexadecimal. Afortunadamente, puedes acortarlo. Por ejemplo, el código hexadecimal de rojo #FF0000 puede #FF0000 a #F00 . Esta forma abreviada proporciona un dígito para el rojo, un dígito para el verde y un dígito para el azul. Esto reduce el número total de colores posibles a alrededor de 4.000. Pero los navegadores interpretarán #FF0000 y #F00 como exactamente del mismo color.

Instrucciones

Adelante, intente usar los códigos hexadecimales abreviados para colorear los elementos correctos.
Color Código hexadecimal corto
Cian #0FF
Verde #0F0
rojo #F00
Fucsia #F0F

Pruebas

tests:
  - text: ¡Da tu elemento <code>h1</code> con el texto <code>I am red!</code> El <code>color</code> rojo.
    testString: 'assert($(".red-text").css("color") === "rgb(255, 0, 0)", "Give your <code>h1</code> element with the text <code>I am red!</code> the <code>color</code> red.");'
  - text: 'Use el <code>hex code</code> abreviado para el color rojo en lugar del código hexadecimal <code>#FF0000</code> .'
    testString: 'assert(code.match(/\.red-text\s*?{\s*?color:\s*?#F00\s*?;\s*?}/gi), "Use the abbreviate <code>hex code</code> for the color red instead of the hex code <code>#FF0000</code>.");'
  - text: ¡Da tu elemento <code>h1</code> con el texto <code>I am green!</code> El <code>color</code> verde.
    testString: 'assert($(".green-text").css("color") === "rgb(0, 255, 0)", "Give your <code>h1</code> element with the text <code>I am green!</code> the <code>color</code> green.");'
  - text: 'Use el <code>hex code</code> abreviado para el color verde en lugar del código hexadecimal <code>#00FF00</code> .'
    testString: 'assert(code.match(/\.green-text\s*?{\s*?color:\s*?#0F0\s*?;\s*?}/gi), "Use the abbreviated <code>hex code</code> for the color green instead of the hex code <code>#00FF00</code>.");'
  - text: ¡Da tu elemento <code>h1</code> con el texto <code>I am cyan!</code> El <code>color</code> cian.
    testString: 'assert($(".cyan-text").css("color") === "rgb(0, 255, 255)", "Give your <code>h1</code> element with the text <code>I am cyan!</code> the <code>color</code> cyan.");'
  - text: 'Use el <code>hex code</code> abreviado para el color cian en lugar del código hexadecimal <code>#00FFFF</code> .'
    testString: 'assert(code.match(/\.cyan-text\s*?{\s*?color:\s*?#0FF\s*?;\s*?}/gi), "Use the abbreviated <code>hex code</code> for the color cyan instead of the hex code <code>#00FFFF</code>.");'
  - text: ¡Da tu elemento <code>h1</code> con el texto <code>I am fuchsia!</code> El <code>color</code> fucsia.
    testString: 'assert($(".fuchsia-text").css("color") === "rgb(255, 0, 255)", "Give your <code>h1</code> element with the text <code>I am fuchsia!</code> the <code>color</code> fuchsia.");'
  - text: 'Utilice el <code>hex code</code> abreviado para el color fucsia en lugar del código hexadecimal <code>#FF00FF</code> .'
    testString: 'assert(code.match(/\.fuchsia-text\s*?{\s*?color:\s*?#F0F\s*?;\s*?}/gi), "Use the abbreviated <code>hex code</code> for the color fuchsia instead of the hex code <code>#FF00FF</code>.");'

Challenge Seed

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

<h1 class="red-text">Estoy rojo!</h1>

<h1 class="fuchsia-text">Estoy fucsia!</h1>

<h1 class="cyan-text">Estoy cian!</h1>

<h1 class="green-text">Estoy verde!</h1>

Solución

// solution required