freeCodeCamp

4.3 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
bad87dee1348bd9aede07836	Use an id Attribute to Style an Element	0		Use un atributo de ID para diseñar un elemento

Description

Una cosa interesante acerca de los atributos de id es que, al igual que las clases, puedes aplicarles un estilo usando CSS. Sin embargo, una id no es reutilizable y solo debe aplicarse a un elemento. Una id también tiene una mayor especificidad (importancia) que una clase, por lo que si ambas se aplican al mismo elemento y tienen estilos en conflicto, se aplicarán los estilos de la id . Este es un ejemplo de cómo puede tomar su elemento con el atributo id de cat-photo-element y darle el color de fondo de verde. En su elemento de style :

# cat-photo-element {
color de fondo: verde;
}

Tenga en cuenta que dentro de su elemento de style , siempre hace referencia a las clases poniendo un . delante de sus nombres. Siempre hace referencia a los identificadores colocando un # delante de sus nombres.

Instructions

Intente darle a su formulario, que ahora tiene el atributo id de cat-photo-form , un fondo verde.

Tests

tests:
  - text: Dale a tu elemento de <code>form</code> la identificación de <code>cat-photo-form</code> .
    testString: 'assert($("form").attr("id") === "cat-photo-form", "Give your <code>form</code> element the id of <code>cat-photo-form</code>.");'
  - text: Su elemento de <code>form</code> debe tener el <code>background-color</code> de <code>background-color</code> verde.
    testString: 'assert($("#cat-photo-form").css("background-color") === "rgb(0, 128, 0)", "Your <code>form</code> element should have the <code>background-color</code> of green.");'
  - text: Asegúrese de que su elemento de <code>form</code> tenga un atributo <code>id</code> .
    testString: 'assert(code.match(/<form.*cat-photo-form.*>/gi) && code.match(/<form.*cat-photo-form.*>/gi).length > 0, "Make sure your <code>form</code> element has an <code>id</code> attribute.");'
  - text: No le dé a su <code>form</code> ningún atributo de <code>class</code> o <code>style</code> .
    testString: 'assert(!code.match(/<form.*style.*>/gi) && !code.match(/<form.*class.*>/gi), "Do not give your <code>form</code> any <code>class</code> or <code>style</code> attributes.");'

Challenge Seed

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
  .red-text {
    color: red;
  }

  h2 {
    font-family: Lobster, monospace;
  }

  p {
    font-size: 16px;
    font-family: monospace;
  }

  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
  }

  .smaller-image {
    width: 100px;
  }

  .silver-background {
    background-color: silver;
  }
</style>

<h2 class="red-text">CatPhotoApp</h2>
<main>
  <p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>

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

  <div class="silver-background">
    <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" id="cat-photo-form">
    <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.3 KiB Raw Blame History