fix(spanish-md): Address some formatting issues for Spanish md
This commit is contained in:
Bouncey
committed by
mrugesh mohapatra
mrugesh mohapatra
parent
ee9f6b2d72
commit
c2a45b58be
@@ -8,14 +8,14 @@ videoUrl: ''
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Tu foto de gato tiene actualmente esquinas afiladas. Podemos redondear esas esquinas con una propiedad CSS llamada <code>border-radius</code> .
|
||||
<section id='description'>
|
||||
Tu foto de gato tiene actualmente esquinas afiladas. Podemos redondear esas esquinas con una propiedad CSS llamada <code>border-radius</code> .
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Puede especificar un <code>border-radius</code> con píxeles. Dale a tu foto de gato un <code>border-radius</code> de <code>10px</code> de <code>10px</code> .
|
||||
Nota: este desafío permite múltiples soluciones posibles. Por ejemplo, puede agregar <code>border-radius</code> <code>.thick-green-border</code> clase <code>.thick-green-border</code> o a la clase <code>.smaller-image</code> .
|
||||
<section id='instructions'>
|
||||
Puede especificar un <code>border-radius</code> con píxeles. Dale a tu foto de gato un <code>border-radius</code> de <code>10px</code> de <code>10px</code> .
|
||||
Nota: este desafío permite múltiples soluciones posibles. Por ejemplo, puede agregar <code>border-radius</code> <code>.thick-green-border</code> clase <code>.thick-green-border</code> o a la clase <code>.smaller-image</code> .
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
@@ -23,7 +23,7 @@ Nota: este desafío permite múltiples soluciones posibles. Por ejemplo, puede a
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: El elemento de su imagen debe tener la clase "borde verde grueso".
|
||||
- text: El elemento de su imagen debe tener la clase "borde verde grueso."
|
||||
testString: 'assert($("img").hasClass("thick-green-border"), "Your image element should have the class "thick-green-border".");'
|
||||
- text: Su imagen debe tener un radio de borde de <code clase = "notranslate"> 10px </code>
|
||||
testString: 'assert(parseInt($("img").css("border-top-left-radius")) > 8, "Your image should have a border radius of <code>10px</code>");'
|
||||
|
||||
@@ -7,15 +7,15 @@ videoUrl: ''
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Cuando crea una variable, queda disponible para que la use dentro del elemento en el que la creó. También está disponible dentro de cualquier elemento anidado dentro de él. Este efecto se conoce como <dfn>cascada</dfn> .
|
||||
Debido a la cascada, las variables CSS a menudo se definen en el elemento <dfn>: raíz</dfn> .
|
||||
<code>:root</code> es un selector de <dfn>pseudo-clase</dfn> que coincide con el elemento raíz del documento, generalmente el <html> elemento. Al crear sus variables en <code>:root</code> , estarán disponibles globalmente y se podrá acceder a ellas desde cualquier otro selector más adelante en la hoja de estilo.
|
||||
<section id='description'>
|
||||
Cuando crea una variable, queda disponible para que la use dentro del elemento en el que la creó. También está disponible dentro de cualquier elemento anidado dentro de él. Este efecto se conoce como <dfn>cascada</dfn> .
|
||||
Debido a la cascada, las variables CSS a menudo se definen en el elemento <dfn>: raíz</dfn> .
|
||||
<code>:root</code> es un selector de <dfn>pseudo-clase</dfn> que coincide con el elemento raíz del documento, generalmente el <html> elemento. Al crear sus variables en <code>:root</code> , estarán disponibles globalmente y se podrá acceder a ellas desde cualquier otro selector más adelante en la hoja de estilo.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Defina una variable llamada <code>--penguin-belly</code> en el selector de <code>:root</code> y déle el valor de <code>pink</code> . Luego puede ver cómo el valor caerá en cascada para cambiar el valor a rosa, en cualquier lugar donde se use esa variable.
|
||||
<section id='instructions'>
|
||||
Defina una variable llamada <code>--penguin-belly</code> en el selector de <code>:root</code> y déle el valor de <code>pink</code> . Luego puede ver cómo el valor caerá en cascada para cambiar el valor a rosa, en cualquier lugar donde se use esa variable.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
@@ -23,7 +23,7 @@ Defina una variable llamada <code>--penguin-belly</code> en el selector de <code
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'declara la variable <code>--penguin-belly</code> en la <code>:root</code> y <code>--penguin-belly</code> a <code>pink</code> '.
|
||||
- text: 'declara la variable <code>--penguin-belly</code> en la <code>:root</code> y <code>--penguin-belly</code> a <code>pink</code> '
|
||||
testString: 'assert(code.match(/:root\s*?{[\s\S]*--penguin-belly\s*?:\s*?pink\s*?;[\s\S]*}/gi), "declare the <code>--penguin-belly</code> variable in the <code>:root</code> and assign it to <code>pink</code>.");'
|
||||
|
||||
```
|
||||
|
||||
@@ -7,14 +7,14 @@ videoUrl: ''
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
El tamaño de fuente se controla mediante la propiedad CSS de <code>font-size</code> , como esta:
|
||||
<blockquote>h1 {<br> font-size: 30px;<br>}</blockquote>
|
||||
<section id='description'>
|
||||
El tamaño de fuente se controla mediante la propiedad CSS de <code>font-size</code> , como esta:
|
||||
<blockquote>h1 {<br> font-size: 30px;<br>}</blockquote>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Dentro de la misma etiqueta <code><style></code> que contiene su clase de <code>red-text</code> , cree una entrada para los elementos <code>p</code> y establezca el <code>font-size</code> en 16 píxeles ( <code>16px</code> ).
|
||||
<section id='instructions'>
|
||||
Dentro de la misma etiqueta <code><style></code> que contiene su clase de <code>red-text</code> , cree una entrada para los elementos <code>p</code> y establezca el <code>font-size</code> en 16 píxeles ( <code>16px</code> ).
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
@@ -22,7 +22,7 @@ Dentro de la misma etiqueta <code><style></code> que contiene su clase de
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'Entre las etiquetas de <code>style</code> , <code>16px</code> elementos <code>p</code> <code>font-size</code> de <code>font-size</code> de <code>16px</code> . El navegador y el zoom de texto deben estar al 100% ".
|
||||
- text: 'Entre las etiquetas de <code>style</code> , <code>16px</code> elementos <code>p</code> <code>font-size</code> de <code>font-size</code> de <code>16px</code> . El navegador y el zoom de texto deben estar al 100% ".
|
||||
testString: 'assert(code.match(/p\s*{\s*font-size\s*:\s*16\s*px\s*;\s*}/i), "Between the <code>style</code> tags, give the <code>p</code> elements <code>font-size</code> of <code>16px</code>. Browser and Text zoom should be at 100%.");'
|
||||
|
||||
```
|
||||
|
||||
@@ -7,18 +7,18 @@ videoUrl: ''
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Yay! Acabamos de demostrar que los estilos en línea anularán todas las declaraciones de CSS en su elemento de <code>style</code> .
|
||||
Pero espera. Hay una última forma de anular CSS. Este es el método más poderoso de todos. Pero antes de hacerlo, hablemos de por qué querría anular CSS.
|
||||
En muchas situaciones, usarás bibliotecas CSS. Estos pueden anular accidentalmente su propio CSS. Entonces, cuando necesite estar absolutamente seguro de que un elemento tiene un CSS específico, puede usar <code>!important</code>
|
||||
Volvamos a nuestra declaración de clase de <code>pink-text</code> . Recuerde que nuestra clase de <code>pink-text</code> fue anulada por las siguientes declaraciones de clase, declaraciones de id y estilos en línea.
|
||||
<section id='description'>
|
||||
Yay! Acabamos de demostrar que los estilos en línea anularán todas las declaraciones de CSS en su elemento de <code>style</code> .
|
||||
Pero espera. Hay una última forma de anular CSS. Este es el método más poderoso de todos. Pero antes de hacerlo, hablemos de por qué querría anular CSS.
|
||||
En muchas situaciones, usarás bibliotecas CSS. Estos pueden anular accidentalmente su propio CSS. Entonces, cuando necesite estar absolutamente seguro de que un elemento tiene un CSS específico, puede usar <code>!important</code>
|
||||
Volvamos a nuestra declaración de clase de <code>pink-text</code> . Recuerde que nuestra clase de <code>pink-text</code> fue anulada por las siguientes declaraciones de clase, declaraciones de id y estilos en línea.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
¡Agreguemos la palabra clave <code>!important</code> para la declaración de color de su elemento de texto rosado para asegurarnos al 100% de que su elemento <code>h1</code> será rosa.
|
||||
Un ejemplo de cómo hacer esto es:
|
||||
<code>color: red !important;</code>
|
||||
<section id='instructions'>
|
||||
¡Agreguemos la palabra clave <code>!important</code> para la declaración de color de su elemento de texto rosado para asegurarnos al 100% de que su elemento <code>h1</code> será rosa.
|
||||
Un ejemplo de cómo hacer esto es:
|
||||
<code>color: red !important;</code>
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
@@ -32,7 +32,7 @@ tests:
|
||||
testString: 'assert($("h1").hasClass("blue-text"), "Your <code>h1</code> element should have the class <code>blue-text</code>.");'
|
||||
- text: Su elemento <code>h1</code> debe tener el ID de <code>orange-text</code> .
|
||||
testString: 'assert($("h1").attr("id") === "orange-text", "Your <code>h1</code> element should have the id of <code>orange-text</code>.");'
|
||||
- text: 'Su elemento <code>h1</code> debe tener el estilo de <code>color: white</code> '.
|
||||
- text: 'Su elemento <code>h1</code> debe tener el estilo de <code>color: white</code> '
|
||||
testString: 'assert(code.match(/<h1.*style/gi) && code.match(/<h1.*style.*color\s*?:/gi), "Your <code>h1</code> element should have the inline style of <code>color: white</code>.");'
|
||||
- text: Su declaración de clase de <code>pink-text</code> debe tener la palabra clave <code>!important</code> para anular todas las demás declaraciones.
|
||||
testString: 'assert(code.match(/\.pink-text\s*?\{[\s\S]*?color:.*pink.*!important\s*;?[^\.]*\}/g), "Your <code>pink-text</code> class declaration should have the <code>!important</code> keyword to override all other declarations.");'
|
||||
|
||||
@@ -7,16 +7,16 @@ videoUrl: ''
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
A veces, sus elementos HTML recibirán múltiples estilos que entren en conflicto entre sí.
|
||||
Por ejemplo, su elemento <code>h1</code> no puede ser verde y rosa al mismo tiempo.
|
||||
Veamos qué sucede cuando creamos una clase que hace que el texto sea rosa, luego lo aplicamos a un elemento. ¿Nuestra clase <em>anulará</em> el <code>color: green;</code> del elemento del <code>body</code> <code>color: green;</code> Propiedad CSS?
|
||||
<section id='description'>
|
||||
A veces, sus elementos HTML recibirán múltiples estilos que entren en conflicto entre sí.
|
||||
Por ejemplo, su elemento <code>h1</code> no puede ser verde y rosa al mismo tiempo.
|
||||
Veamos qué sucede cuando creamos una clase que hace que el texto sea rosa, luego lo aplicamos a un elemento. ¿Nuestra clase <em>anulará</em> el <code>color: green;</code> del elemento del <code>body</code> <code>color: green;</code> Propiedad CSS?
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Crea una clase CSS llamada <code>pink-text</code> que le da a un elemento el color rosa.
|
||||
Dale a tu elemento <code>h1</code> la clase de <code>pink-text</code> .
|
||||
<section id='instructions'>
|
||||
Crea una clase CSS llamada <code>pink-text</code> que le da a un elemento el color rosa.
|
||||
Dale a tu elemento <code>h1</code> la clase de <code>pink-text</code> .
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
@@ -26,7 +26,7 @@ Dale a tu elemento <code>h1</code> la clase de <code>pink-text</code> .
|
||||
tests:
|
||||
- text: Su elemento <code>h1</code> debe tener la clase <code>pink-text</code> .
|
||||
testString: 'assert($("h1").hasClass("pink-text"), "Your <code>h1</code> element should have the class <code>pink-text</code>.");'
|
||||
- text: 'Tu <code><style></code> debe tener una clase de CSS de <code>pink-text</code> que cambie el <code>color</code> .'
|
||||
- text: 'Tu <code><style></code> debe tener una clase de CSS de <code>pink-text</code> que cambie el <code>color</code> .'
|
||||
testString: 'assert(code.match(/\.pink-text\s*\{\s*color\s*:\s*.+\s*;\s*\}/g), "Your <code><style></code> should have a <code>pink-text</code> CSS class that changes the <code>color</code>.");'
|
||||
- text: Tu elemento <code>h1</code> debe ser rosa.
|
||||
testString: 'assert($("h1").css("color") === "rgb(255, 192, 203)", "Your <code>h1</code> element should be pink.");'
|
||||
|
||||
@@ -7,19 +7,19 @@ videoUrl: ''
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Hay varias fuentes predeterminadas que están disponibles en todos los navegadores. Estas familias de fuentes genéricas incluyen <code>monospace</code> , <code>serif</code> y <code>sans-serif</code>
|
||||
Cuando una fuente no está disponible, puede indicar al navegador que se "degrade" a otra fuente.
|
||||
Por ejemplo, si deseaba que un elemento usara la fuente <code>Helvetica</code> , pero se degradara a la <code>sans-serif</code> cuando <code>Helvetica</code> no estaba disponible, la especificará de la siguiente manera:
|
||||
<blockquote>p {<br> font-family: Helvetica, sans-serif;<br>}</blockquote>
|
||||
Los nombres genéricos de familia de fuentes no distinguen entre mayúsculas y minúsculas. Además, no necesitan comillas porque son palabras clave CSS.
|
||||
<section id='description'>
|
||||
Hay varias fuentes predeterminadas que están disponibles en todos los navegadores. Estas familias de fuentes genéricas incluyen <code>monospace</code> , <code>serif</code> y <code>sans-serif</code>
|
||||
Cuando una fuente no está disponible, puede indicar al navegador que se "degrade" a otra fuente.
|
||||
Por ejemplo, si deseaba que un elemento usara la fuente <code>Helvetica</code> , pero se degradara a la <code>sans-serif</code> cuando <code>Helvetica</code> no estaba disponible, la especificará de la siguiente manera:
|
||||
<blockquote>p {<br> font-family: Helvetica, sans-serif;<br>}</blockquote>
|
||||
Los nombres genéricos de familia de fuentes no distinguen entre mayúsculas y minúsculas. Además, no necesitan comillas porque son palabras clave CSS.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Para empezar, aplique la fuente <code>monospace</code> al elemento <code>h2</code> , de modo que ahora tenga dos fuentes: <code>Lobster</code> y <code>monospace</code> .
|
||||
En el último desafío, importó la fuente <code>Lobster</code> usando la etiqueta de <code>link</code> . Ahora comente la importación de la fuente <code>Lobster</code> (utilizando los comentarios HTML que aprendió anteriormente) de Google Fonts para que ya no esté disponible. Observe cómo su elemento <code>h2</code> se degrada a la fuente <code>monospace</code> .
|
||||
<strong>Nota</strong> <br> Si tiene la fuente Lobster instalada en su computadora, no verá la degradación porque su navegador puede encontrar la fuente.
|
||||
<section id='instructions'>
|
||||
Para empezar, aplique la fuente <code>monospace</code> al elemento <code>h2</code> , de modo que ahora tenga dos fuentes: <code>Lobster</code> y <code>monospace</code> .
|
||||
En el último desafío, importó la fuente <code>Lobster</code> usando la etiqueta de <code>link</code> . Ahora comente la importación de la fuente <code>Lobster</code> (utilizando los comentarios HTML que aprendió anteriormente) de Google Fonts para que ya no esté disponible. Observe cómo su elemento <code>h2</code> se degrada a la fuente <code>monospace</code> .
|
||||
<strong>Nota</strong> <br> Si tiene la fuente Lobster instalada en su computadora, no verá la degradación porque su navegador puede encontrar la fuente.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
@@ -31,9 +31,9 @@ tests:
|
||||
testString: 'assert($("h2").css("font-family").match(/^"?lobster/i), "Your h2 element should use the font <code>Lobster</code>.");'
|
||||
- text: Su elemento h2 debería degradarse a la fuente <code>monospace</code> cuando <code>Lobster</code> no está disponible.
|
||||
testString: 'assert(/\s*h2\s*\{\s*font-family\:\s*(\"|")?Lobster(\"|")?,\s*monospace\s*;\s*\}/gi.test(code), "Your h2 element should degrade to the font <code>monospace</code> when <code>Lobster</code> is not available.");'
|
||||
- text: Comente su llamada a Google para la fuente <code>Lobster</code> colocando <code><!--</code> delante de ella. '
|
||||
- text: Comente su llamada a Google para la fuente <code>Lobster</code> colocando <code><!--</code> delante de ella. '
|
||||
testString: 'assert(new RegExp("<!--[^fc]", "gi").test(code), "Comment out your call to Google for the <code>Lobster</code> font by putting <code><!--</code> in front of it.");'
|
||||
- text: 'Asegúrate de cerrar tu comentario agregando <code>--></code> .'
|
||||
- text: 'Asegúrate de cerrar tu comentario agregando <code>--></code> .'
|
||||
testString: 'assert(new RegExp("[^fc]-->", "gi").test(code), "Be sure to close your comment by adding <code>--></code>.");'
|
||||
|
||||
```
|
||||
|
||||
@@ -7,20 +7,20 @@ videoUrl: ''
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Las clases son estilos reutilizables que se pueden agregar a elementos HTML.
|
||||
Aquí hay un ejemplo de declaración de clase CSS:
|
||||
<blockquote><style><br> .blue-text {<br> color: blue;<br> }<br></style></blockquote>
|
||||
Puede ver que hemos creado una clase CSS llamada <code>blue-text</code> dentro de la etiqueta <code><style></code> .
|
||||
Puede aplicar una clase a un elemento HTML como este:
|
||||
<code><h2 class="blue-text">CatPhotoApp</h2></code>
|
||||
Tenga en cuenta que en su elemento de <code>style</code> CSS, los nombres de clase comienzan con un punto. En el atributo de clase de los elementos HTML, el nombre de la clase no incluye el período.
|
||||
<section id='description'>
|
||||
Las clases son estilos reutilizables que se pueden agregar a elementos HTML.
|
||||
Aquí hay un ejemplo de declaración de clase CSS:
|
||||
<blockquote><style><br> .blue-text {<br> color: blue;<br> }<br></style></blockquote>
|
||||
Puede ver que hemos creado una clase CSS llamada <code>blue-text</code> dentro de la etiqueta <code><style></code> .
|
||||
Puede aplicar una clase a un elemento HTML como este:
|
||||
<code><h2 class="blue-text">CatPhotoApp</h2></code>
|
||||
Tenga en cuenta que en su elemento de <code>style</code> CSS, los nombres de clase comienzan con un punto. En el atributo de clase de los elementos HTML, el nombre de la clase no incluye el período.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Dentro de su elemento de <code>style</code> , cambie el selector <code>h2</code> a <code>.red-text</code> y actualice el valor del <code>blue</code> de <code>blue</code> a <code>red</code> .
|
||||
Asigne a su elemento <code>h2</code> el atributo de <code>class</code> con un valor de <code>'red-text'</code> .
|
||||
<section id='instructions'>
|
||||
Dentro de su elemento de <code>style</code> , cambie el selector <code>h2</code> a <code>.red-text</code> y actualice el valor del <code>blue</code> de <code>blue</code> a <code>red</code> .
|
||||
Asigne a su elemento <code>h2</code> el atributo de <code>class</code> con un valor de <code>'red-text'</code> .
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
@@ -34,7 +34,7 @@ tests:
|
||||
testString: 'assert($("h2").hasClass("red-text"), "Your <code>h2</code> element should have the class <code>red-text</code>.");'
|
||||
- text: Su hoja de estilo debe declarar una clase de <code>red-text</code> y tener su color establecido en rojo.
|
||||
testString: 'assert(code.match(/\.red-text\s*\{\s*color\s*:\s*red;\s*\}/g), "Your stylesheet should declare a <code>red-text</code> class and have its color set to red.");'
|
||||
- text: 'No utilice declaraciones de estilo en línea como <code>style="color: red"</code> en su elemento <code>h2</code> .'
|
||||
- text: 'No utilice declaraciones de estilo en línea como <code>style="color: red"</code> en su elemento <code>h2</code> .'
|
||||
testString: 'assert($("h2").attr("style") === undefined, "Do not use inline style declarations like <code>style="color: red"</code> in your <code>h2</code> element.");'
|
||||
|
||||
```
|
||||
|
||||
@@ -7,14 +7,14 @@ videoUrl: ''
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Las variables CSS pueden simplificar la forma en que utiliza las consultas de medios.
|
||||
Por ejemplo, cuando su pantalla es más pequeña o más grande que el punto de interrupción de su consulta de medios, puede cambiar el valor de una variable y aplicará su estilo donde sea que se use.
|
||||
<section id='description'>
|
||||
Las variables CSS pueden simplificar la forma en que utiliza las consultas de medios.
|
||||
Por ejemplo, cuando su pantalla es más pequeña o más grande que el punto de interrupción de su consulta de medios, puede cambiar el valor de una variable y aplicará su estilo donde sea que se use.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
En el <code>:root</code> selector de <code>:root</code> de la <code>media query</code> , cámbielo para que <code>--penguin-size</code> se redefina y se le dé un valor de <code>200px</code> . Además, redefine <code>--penguin-skin</code> y dale un valor de <code>black</code> . Luego cambie el tamaño de la vista previa para ver este cambio en acción.
|
||||
<section id='instructions'>
|
||||
En el <code>:root</code> selector de <code>:root</code> de la <code>media query</code> , cámbielo para que <code>--penguin-size</code> se redefina y se le dé un valor de <code>200px</code> . Además, redefine <code>--penguin-skin</code> y dale un valor de <code>black</code> . Luego cambie el tamaño de la vista previa para ver este cambio en acción.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
@@ -22,9 +22,9 @@ En el <code>:root</code> selector de <code>:root</code> de la <code>media query<
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: ' <code>:root</code> debe reasignar la variable <code>--penguin-size</code> a <code>200px</code> .'
|
||||
- text: ' <code>:root</code> debe reasignar la variable <code>--penguin-size</code> a <code>200px</code> .'
|
||||
testString: 'assert(code.match(/media\s*?\(\s*?max-width\s*?:\s*?350px\s*?\)\s*?{[\s\S]*:root\s*?{[\s\S]*--penguin-size\s*?:\s*?200px\s*?;[\s\S]*}[\s\S]*}/gi), "<code>:root</code> should reassign the <code>--penguin-size</code> variable to <code>200px</code>.");'
|
||||
- text: ' <code>:root</code> debería reasignar la variable <code>--penguin-skin</code> a <code>black</code> '.
|
||||
- text: ' <code>:root</code> debería reasignar la variable <code>--penguin-skin</code> a <code>black</code> '
|
||||
testString: 'assert(code.match(/media\s*?\(\s*?max-width\s*?:\s*?350px\s*?\)\s*?{[\s\S]*:root\s*?{[\s\S]*--penguin-skin\s*?:\s*?black\s*?;[\s\S]*}[\s\S]*}/gi), "<code>:root</code> should reassign the <code>--penguin-skin</code> variable to <code>black</code>.");'
|
||||
|
||||
```
|
||||
|
||||
@@ -7,16 +7,16 @@ videoUrl: ''
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
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 <code>#FF0000</code> se puede acortar a <code>#F00</code> . 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 <code>#FF0000</code> y <code>#F00</code> como exactamente del mismo color.
|
||||
<section id='description'>
|
||||
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 <code>#FF0000</code> se puede acortar a <code>#F00</code> . 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 <code>#FF0000</code> y <code>#F00</code> como exactamente del mismo color.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Adelante, intente usar los códigos hexadecimales abreviados para colorear los elementos correctos.
|
||||
<table class='table table-striped'><tr><th> Color </th><th> Código hexadecimal corto </th></tr><tr><td> Cian </td><td> <code>#0FF</code> </td> </tr><tr><td> Verde </td><td> <code>#0F0</code> </td> </tr><tr><td> rojo </td><td> <code>#F00</code> </td> </tr><tr><td> Fucsia </td><td> <code>#F0F</code> </td> </tr></table>
|
||||
<section id='instructions'>
|
||||
Adelante, intente usar los códigos hexadecimales abreviados para colorear los elementos correctos.
|
||||
<table class='table table-striped'><tr><th> Color </th><th> Código hexadecimal corto </th></tr><tr><td> Cian </td><td> <code>#0FF</code> </td> </tr><tr><td> Verde </td><td> <code>#0F0</code> </td> </tr><tr><td> rojo </td><td> <code>#F00</code> </td> </tr><tr><td> Fucsia </td><td> <code>#F0F</code> </td> </tr></table>
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
@@ -26,19 +26,19 @@ Adelante, intente usar los códigos hexadecimales abreviados para colorear los e
|
||||
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> .'
|
||||
- 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> .'
|
||||
- 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> '.
|
||||
- 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: 'Use el <code>hex code</code> abreviado para el color fucsia en lugar del código hexadecimal <code>#FF00FF</code> '.
|
||||
- text: 'Use 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>.");'
|
||||
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user