3.5 KiB
3.5 KiB
id | title | challengeType | videoUrl | localeTitle |
---|---|---|---|---|
bad87fee1348bd9aecf08806 | Use a CSS Class to Style an Element | 0 | Usa una clase CSS para diseñar un elemento |
Descripción
<style>Puede ver que hemos creado una clase CSS llamada
.blue-text {
color: blue;
}
</style>
blue-text
dentro de la etiqueta <style>
. Puede aplicar una clase a un elemento HTML como este: <h2 class="blue-text">CatPhotoApp</h2>
Tenga en cuenta que en su elemento de class
CSS en la etiqueta <style>
, 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 punto. Instrucciones
style
, cambie el selector h2
a .red-text
y actualice el valor blue
a red
. Déle a su elemento h2
el atributo de class
con un valor de 'red-text'
. Pruebas
tests:
- text: Tu elemento <code>h2</code> debería ser rojo.
testString: 'assert($("h2").css("color") === "rgb(255, 0, 0)", "Your <code>h2</code> element should be red.");'
- text: Tu elemento <code>h2</code> debería tener la clase <code>red-text</code> .
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 establecido el color 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 use 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.");'
Challenge Seed
<style>
h2 {
color: blue;
}
</style>
<h2>CatPhotoApp</h2>
<main>
<p>Haga clic aquí para ver más <a href="#">fotos de gatos</a>.</p>
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<div>
<p>Cosas que los gatos aman:</p>
<ul>
<li>pellizco de gato</li>
<li>punteros laser</li>
<li>lasaña</li>
</ul>
<p>3 cosas que odian los gatos:</p>
<ol>
<li>tratamiento de pulgas</li>
<li>trueno</li>
<li>otros gatos</li>
</ol>
</div>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor" checked> Interior</label>
<label><input type="radio" name="indoor-outdoor"> Exterior</label><br>
<label><input type="checkbox" name="personality" checked> Amoroso</label>
<label><input type="checkbox" name="personality"> Perezoso</label>
<label><input type="checkbox" name="personality"> Energético</label><br>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Enviar</button>
</form>
</main>
Solución
// solution required