attribut de classe

6.1 L'attribut class et la balise style

Mais ce n'est pas tout. Après que des centaines de "styles" aient été inventés, la question s'est posée : comment les utiliser ? Et puis ils ont eu l'idée de les regrouper en "classes". Ce ne sont bien sûr pas les mêmes classes qu'en Java. Juste des groupes de style spéciaux.

Et si avant d'utiliser "classes" vous aviez une photo :

<img src="logo.png" style="width=100px;height=100px;opacity=0.5">

Maintenant, cela pourrait s'écrire :

<img src="logo.png" class="picture">

<style>
    img.picture {
        width=100px;
        height=100px;
        opacity=0.5
    }
</style>

Nous en avons créé un spécial «style» pictureet transféré les valeurs de style du fichier style. Et puis nous avons lié le <img> et l'image "style" avec la balise class.

6.2 Sélecteur, types de sélecteurs

Ces styles, rendus séparément, sont devenus connus sous le nom de classesou selectors. Ils ont plusieurs caractéristiques importantes.

On html-elementpeut avoir plusieurs sélecteurs. Leurs noms sont indiqués par un espace. Exemple:

<img src="logo.png" class="picture main">

L'une des raisons pour lesquelles nous avons abordé les sélecteurs ici est qu'ils peuvent être appliqués automatiquement. Et cette propriété utile sera utilisée très souvent à l'avenir. Y compris les développeurs Java.

En voici une courte liste :

* {
  margin: 0;
  padding: 0;
}

#img123 {
   width:100px;
   height 100px;
}

table {
   color: black;
}

table.important {
   color: red;
}

.picture {
  opacity: 0.5
}

main article {
  color: blue;
}

a:link {
color: blue;
}

a:visited {
color: red;
}

input[type=radio]:checked {
 border: 1px solid black;
}

div:hover {
  background: red;
}

ul li:first-child {
 border-top: none;
}

Vous n'avez pas à tout mémoriser. Mais ce serait bien si vous étudiiez ce tableau plusieurs fois et que tout cela soit déposé dans votre tête. Sans le Web dans la vie moderne, nulle part, et sur le Web - nulle part sans sélecteurs.