freeCodeCamp

4.2 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
bad87fee1348bd9aedf08805	Use CSS Selectors to Style Elements	0		Usar los selectores de CSS para elementos de estilo

Description

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.

Instructions

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.

Tests

tests:
  - text: Elimine el atributo de estilo de su elemento <code>h2</code> .
    testString: 'assert(!$("h2").attr("style"), "Remove the style attribute from your <code>h2</code> element.");'
  - text: Crear un elemento de <code>style</code> .
    testString: 'assert($("style") && $("style").length > 1, "Create a <code>style</code> element.");'
  - text: Tu elemento <code>h2</code> debe ser azul.
    testString: 'assert($("h2").css("color") === "rgb(0, 0, 255)", "Your <code>h2</code> element should be blue.");'
  - text: Asegúrese de que la declaración <code>h2</code> su 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 <code>h2</code> declaration is valid with a semicolon and closing brace.");'
  - text: Asegúrese de que todos sus elementos de <code>style</code> sean válidos y tengan una etiqueta de cierre.
    testString: 'assert(code.match(/<\/style>/g) && code.match(/<\/style>/g).length === (code.match(/<style((\s)*((type|media|scoped|title|disabled)="[^"]*")?(\s)*)*>/g) || []).length, "Make sure all your <code>style</code> elements are valid and have a closing tag.");'

Challenge Seed

<h2 style="color: red">CatPhotoApp</h2>
<main>
  <p>Click here to view more <a href="#">cat photos</a>.</p>

  <a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>

  <div>
    <p>Things cats love:</p>
    <ul>
      <li>cat nip</li>
      <li>laser pointers</li>
      <li>lasagna</li>
    </ul>
    <p>Top 3 things cats hate:</p>
    <ol>
      <li>flea treatment</li>
      <li>thunder</li>
      <li>other cats</li>
    </ol>
  </div>

  <form action="/submit-cat-photo">
    <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
    <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
    <label><input type="checkbox" name="personality" checked> Loving</label>
    <label><input type="checkbox" name="personality"> Lazy</label>
    <label><input type="checkbox" name="personality"> Energetic</label><br>
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
  </form>
</main>

Solution

// solution required

4.2 KiB Raw Blame History