diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-css-selectors-to-style-elements.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-css-selectors-to-style-elements.spanish.md index 0a2d0b7a7f..7774e74013 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-css-selectors-to-style-elements.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-css-selectors-to-style-elements.spanish.md @@ -3,29 +3,29 @@ id: bad87fee1348bd9aedf08805 title: Use CSS Selectors to Style Elements challengeType: 0 videoUrl: '' -localeTitle: Usar los selectores de CSS para elementos de estilo +localeTitle: Usar los selectores CSS para dar estilo a los elementos --- ## Descripción -
Con CSS, hay cientos de properties de CSS que puedes usar para cambiar la apariencia de un elemento en tu página. Cuando ingresó <h2 style="color: red">CatPhotoApp</h2> , estaba diseñando ese elemento h2 individual con inline CSS , que significa Cascading Style Sheets . Esa es una forma de especificar el estilo de un elemento, pero hay una mejor manera de aplicar CSS . En la parte superior de tu código, crea un bloque de style como este:
<estilo>
</style>
Dentro de ese bloque de estilo, puede crear un CSS selector para todos los elementos h2 . Por ejemplo, si desea que todos los elementos h2 sean rojos, debe agregar una regla de estilo que se vea así:
<estilo>
h2 {color: rojo;}
</style>
Tenga en cuenta que es importante tener llaves de apertura y cierre ( { y } ) alrededor de las reglas de estilo de cada elemento. También debe asegurarse de que la definición de estilo de su elemento se encuentre entre las etiquetas de estilo de apertura y de cierre. Finalmente, asegúrese de agregar un punto y coma al final de cada una de las reglas de estilo de su elemento.
+
Con CSS, hay cientos de properties CSS que puedes usar para cambiar la apariencia de un elemento en tu página. Cuando ingresaste <h2 style="color: red">CatPhotoApp</h2> , estabas dando estilo a ese elemento h2 con inline CSS , que significa Cascading Style Sheets . Esa es una forma de especificar el estilo de un elemento, pero existe una mejor manera de aplicar CSS . En la parte superior de tu código, crea un bloque de style como este:
<style>
</style>
Dentro de ese bloque de estilo, puedes crear un CSS selector para todos los elementos h2 . Por ejemplo, si deseas que todos los elementos h2 sean rojos, debes agregar una regla de estilo como esta:
<style>
h2 {color: red;}
</style>
Ten en cuenta que es importante usar llaves de apertura y cierre ( { y } ) alrededor de las reglas de estilo de cada elemento. También debe asegurarse de que la definición de estilo de su elemento se encuentre entre las etiquetas de estilo de apertura y de cierre. Finalmente, asegúrese de agregar un punto y coma al final de cada una de las reglas de estilo de su elemento.
## Instrucciones -
Borre el atributo de estilo del elemento h2 y, en su lugar, cree un bloque de style CSS. Agrega el CSS necesario para convertir todos los elementos h2 azul.
+
Borra el atributo de estilo del elemento h2 y, en su lugar, crea un bloque de style CSS. Agrega el CSS necesario para dar a todos los elementos h2 color azul.
## Pruebas
```yml tests: - - text: Elimine el atributo de estilo de su elemento h2 . + - text: Elimina el atributo de estilo de tu elemento h2 . testString: 'assert(!$("h2").attr("style"), "Remove the style attribute from your h2 element.");' - - text: Crear un elemento de style . + - text: Crea un elemento style . testString: 'assert($("style") && $("style").length > 1, "Create a style element.");' - text: Tu elemento h2 debe ser azul. testString: 'assert($("h2").css("color") === "rgb(0, 0, 255)", "Your h2 element should be blue.");' - - text: Asegúrese de que la declaración h2 su hoja de estilo sea válida con un punto y coma y una llave de cierre. + - text: Asegúrate de que la declaración h2 de tu hoja de estilo sea válida con un punto y coma y una llave de cierre. testString: 'assert(code.match(/h2\s*\{\s*color\s*:.*;\s*\}/g), "Ensure that your stylesheet h2 declaration is valid with a semicolon and closing brace.");' - - text: Asegúrese de que todos sus elementos de style sean válidos y tengan una etiqueta de cierre. + - text: Asegúrate de que todos tus elementos style sean válidos y tengan una etiqueta de cierre. testString: 'assert(code.match(/<\/style>/g) && code.match(/<\/style>/g).length === (code.match(//g) || []).length, "Make sure all your style elements are valid and have a closing tag.");' ```