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 |
Description
<estilo>Puede ver que hemos creado una clase CSS llamada
.blue-text {
color azul;
}
</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 style
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. Instructions
style
, cambie el selector h2
a .red-text
y actualice el valor del blue
de blue
a red
. Déle a su elemento h2
el atributo de class
con un valor de 'red-text'
. Tests
tests:
- text: Tu elemento <code>h2</code> debe 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> debe 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 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 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>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