Initiation à la création de site Web

Classes (suite)

Comment appliquer un style à certaines instances d'un élément ?

Code CSS :

.col_cyan { background-color:cyan }

Code HTML :

<p>Les trois couleurs secondaires dans le système additif sont cyan, magenta et jaune.</p>
<p class="col_cyan">Le cyan est une couleur pure de la lumière de longueur d'onde 500 nm.</p>
<p class="col_cyan">Le cyan est souvent appelé bleu clair ou bleu ciel. C'est un mélange de lumières bleue et verte.</p>

Dans le navigateur :

Les trois couleurs secondaires dans le système additif sont cyan, magenta et jaune.

Le cyan est une couleur pure de la lumière de longueur d'onde 500 nm.

Le cyan est souvent appelé bleu clair ou bleu ciel. C'est un mélange de lumières bleue et verte.

Comment appliquer un style à un ensemble d'éléments successifs ?

Code CSS :

.col_jaune { color:yellow; background:cadetblue; padding:1px }

Code HTML :

<div class="col_jaune">
  <!-- Le style col_jaune s'appliquera aux éléments bornés par l'élément div -->
  <h3>Cinq définitions du jaune</h3>
  <ol>
    <li>la couleur du citron</li>
    <li>la couleur de la lumière dont la longueur d'onde
        est comprise entre 565 et 590 nm</li>
    <li>le mélange des lumières rouge et verte</li>
    <li>le complément du violet</li>
    <li>avec le noir, c'est la base de l'impression en
        couleur que l'on appelle quadrichromie</li>
  </ol>
</div>

Dans le navigateur :

Cinq définitions du jaune

  1. la couleur du citron
  2. la couleur de la lumière dont la longueur d'onde est comprise entre 565 et 590 nm
  3. le mélange des lumières rouge et verte
  4. le complément du violet
  5. avec le noir, c'est la base de l'impression en couleur que l'on appelle quadrichromie

Comment appliquer un style à une instance unique d'un élément ?

Code CSS :

p { color:blue }
#par_magenta { color:magenta }

Code HTML :

<p>Bleu est une des trois couleurs primaires.</p>

<p id="par_magenta">Le magenta est ainsi nommé car c'est la teinte de l'un des premiers colorants à base d'aniline, découvert juste après la bataille de Magenta.</p>

Dans le navigateur :

Bleu est une des trois couleurs primaires.

Le magenta est ainsi nommé car c'est la teinte de l'un des premiers colorants à base d'aniline, découvert juste après la bataille de Magenta.

Comment appliquer un style à un élément directement ou indirectement contenu dans un autre élément ?

Code CSS :

div.couleurs li li { font-size:80% }
div.couleurs li { list-style-type:disc }
div.couleurs ol li { list-style-type: upper-roman}
#x5 span { color:lime }

Code HTML :

  <div class="couleurs">
    <ul>
      <li>couleurs neutres
        <ol>
          <li>black</li>
          <li>gray</li>
          <li>white</li>
        </ol>
      </li>
      <li>couleurs de base
        <ul>
          <li>aqua</li>
          <li>olive</li>
          <li id="x5"><span>lime</span></li>
          <li>red</li>
        </ul>
      </li>
    </ul>
  </div>

Dans le navigateur :

Si nous voulons que le style soit appliqué à un élément directement contenu dans autre élément, les deux éléments sont séparés par le caractère '>'.

Code CSS :

div > ol > li { font-size:140% }

Code HTML :

<div> 
  <ol>
    <li>abc
      <ul>
        <li>def</li>
        <li>klm</li>
      </ul>
    </li>
    <li>xyz</li>
  </ol>
</div>

Dans le navigateur :

  1. abc
    • def
    • klm
  2. xyz

Le changement de taille est appliqué uniquement aux éléments de premier niveau.