Identification en CSS3

Identification en CSS3

Même si je n'ai pas les compétences techniques et même si je sais que beaucoup préfèrent les codes montages "clef en main", je vais me permettre de parler d'un sujet plus "technique"... na !

Les codes html5/CSS nous permettent d'attribuer des paramètres (attributs) ou/et des animations à des éléments bien identifiés; ainsi, si vous écrivez un élément p (paragraphe), vous allez pouvoir lui donner un nom: class="nom1" et écrire, en CSS3, l'élément "nom1" est rouge, carré, positionné à droite...

Si vous avez plusieurs éléments du même genre (A, B, C...) à la même décoration, vous ne serez pas obligés de répéter les attributs à chaque élément: il vous suffira d'écrire que chaque élément sera identifié en class="nom1" et recevra donc les paramètres attribués à class="nom1" (rouge, carré, positionné à droite...)

<p class="nom1">A</p>

<p class="nom1">B</p>

<p class="nom1">C</p>

<style type="text/css"></style>

***************

Considérons maintenant que les éléments A B C soient des boutons et que vous vouliez que leur survol provoque une action de changement de couleur, par exemple; il va falloir une autre identification pour déclencher cette animation; nous allons identifier par un autre code, que nous allons ajouter au code précédent: id="elem1" (les noms sont des exemples et vous mettez ceux qui vous plaisent); les 2 identifications se cumulent sans se perturber.

Ce qui va s'écrire:

<p class="nom1" id="elem1">A</p>

<p class="nom1" id="elem2">B</p>

<p class="nom1" id="elem2">C</p>

<style type="text/css"></style>

Au survol de A, il va changer de couleur, passant du rouge au vert.

Au survol de B ou/et de C, ils vont passer du rouge au jaune.

J'ai laissé volontairement deux identifications identiques (id="elem2") mais on peut écrire id="elem3" et donner d'autres attributs au survol de C.

Vous remarquerez qu'en ligne CSS, le nom de la class est précédé d'un point alors que le nom de l'id est précédé d'un # (hashtag).

******************

Ceci va nous permettre de construire, par exemple, des montages avec les mêmes boutons et chacun une action différente, comme faire apparaître une nouvelle image.

Un rappel: un élément qui anime un autre élément, doit être écrit, dans le code, avant l'élément animé, même si son affichage le place ailleurs.

Comme je me suis permis une liberté, voici un exemple d'utilisation en images: survolez les lettres.

A

B

C

D

E

F

Au point où j'en suis, voici le code de ce montage: vous ne m'en voudrez pas trop ?

<div id="fond">
<p class="nom1" id="elem1">A</p>
<p class="nom1" id="elem2">B</p>
<p class="nom1" id="elem3">C</p>
<p class="nom1" id="elem4">D</p>
<p class="nom1" id="elem5">E</p>
<p class="nom1" id="elem6">F</p>

<p id="m1"> </p>
<p id="m2"> </p>
<p id="m3"> </p>
<p id="m4"> </p>
<p id="m5"> </p>
<p id="m6"> </p>
</div>
<style type="text/css"></style>