cClaude.rocks ☕ Le blog

[Nouvelles technologies du libre, sciences et coups de gueule…]

Menu

Ce billet fait partie d’une sĂ©rie d’une dizaine billets : #atelier-web.

Voici un complĂ©ment pour le billet đŸ‘Ÿ Atelier-Web ⑄ : Jouons avec un peu plus de CSS

Le but de ce billet est de prĂ©ciser le formalisme CSS, sans pour autant ĂȘtre exhaustif, on cherche principalement Ă  introduire la notion de sĂ©lecteur CSS.


ඏ

Forme gĂ©nĂ©rale d’une rĂšgle CSS

Une rÚgle CSS à la forme suivante :

SELECTEUR {
  PROPRIETE: VALEUR;
  PROPRIETE: VALEUR;
  ...
}

Le SELECTEUR permet de « choisir » les éléments HTML qui seront concerné par la rÚgle.

La liste (PROPRIETE, VALEUR) définissant les rÚgles proprement dites.

Le résultat sera que chacun des éléments sélectionnés se verra appliqué les valeurs des propriétés CSS définies.


ඏ

Notion de sélecteur HTML/CSS

Je vous propose une version simplifiĂ©e du code HTML et dans le quelque on utilise l’attribut id au lieu de class pour l’une des balises.

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>atelier-web-06 – CSS ComplĂ©ments</title>
    <style>

/* ICI le code CSS */

    </style>
  </head>
  <body>
    <div id="essai"><!-- Attention, ID au lieu de CLASS -->

      <div class="ligne"><span class="blanc">.</span><span class="blanc">.</span></div>
      <div class="ligne"><span class="gris" >G</span><span class="blanc">.</span></div>
      <div class="ligne"><span class="rouge">R</span><span class="blanc">.</span></div>

    </div>
  </body>
</html>

Vous noterez qu’il est possible de voir la structure du code comme un « chemin » :

body └── div id:essai     ├── div class:ligne     │   ├── span:blanc     │   └── span:blanc     ├── div class:ligne     │   ├── span:gris     │   └── span:blanc     └── div class:ligne         ├── span:rouge         └── span:blanc

Cette vue de la page HTML permet de décrire un « chemin » pour chaque élément du code HTML.

Un Ă©lĂ©ment HTML est Ă©galement identifiable par le nom de sa balise, par le nom de ces classes (class="class1 class2 class3") et par son identificateur (id="identificateur). Notez que dans ce dernier cas, l’identificateur Ă©tant unique (et devant l’ĂȘtre), il n’y a pas d’ambiguĂŻtĂ©.

Un Ă©lĂ©ment HTML peut ĂȘtre retrouvĂ© Ă  l’aide d’une ou plusieurs de ces caractĂ©ristiques, mais Ă©galement Ă  l’aide de tout ou partie de son chemin.

Supposons que l’on recherche toutes les cases de notre dessin, cela correspond Ă  l’élĂ©ment â‰șspan≻. Si on rĂ©cupĂšre tous les Ă©lĂ©ments â‰șspan≻ en premiĂšre approche cela est correct, mais cela interdit de rĂ©utiliser un â‰șspan≻ ailleurs dans la page.

Pour retrouver nos cases, on peut utiliser le fait que l’élĂ©ment â‰șspan≻ de notre dessin se trouve Ă  l’intĂ©rieur d’un â‰șdiv≻ de classe « ligne ».

Voir mĂȘme, ĂȘtre encore plus prĂ©cis en indiquant que tout cela se trouve dans un â‰șdiv≻ de classe « essais ».


ඏ

Construction d’un sĂ©lecteur CSS

Le nom de base d’un sĂ©lecteur est construit Ă  partir :

  • du nom de la balise balise { 
 }, lorsque l’on souhaite appliquer la rĂšgle Ă  toutes les balises de la page,
  • d’un point suivi du nom de classe, .nom_balise { 
 }, la rĂšgle sera appliquĂ©e Ă  toutes les Ă©lĂ©ments dĂ©finissant au moins cette classe.
  • d’un diĂšse suivi d’un identificateur, #identificateur { 
 }, la rĂšgle sera appliquĂ©e Ă  l’unique Ă©lĂ©ment ayant cet identificateur.

Il est possible d’avoir des sĂ©lecteurs composĂ©s :

SĂ©lecteur CSS Signification
* Sélectionne tous les éléments
E, F Sélectionne tous les éléments de type E et de type F
E F SĂ©lectionne tous les Ă©lĂ©ments F Ă  l’intĂ©rieur des Ă©lĂ©ments E
E > F Sélectionne les éléments F enfants directs des éléments E
E + F Sélectionne tout élément F placé directement aprÚs un élément E
E~F Sélectionne tout élément F placé aprÚs un élément E dans la page

Par exemple, si on considĂšre les balises â‰șp≻ et â‰șa≻, et les syntaxes :

SĂ©lecteur CSS RĂ©sultat
p a { /* 
 */ } SĂ©lectionne tous les Ă©lĂ©ments â‰șa≻ dans les Ă©lĂ©ments â‰șp≻ (comprend « dans » au sens de « à l’intĂ©rieur de »).
p > a { /* 
 */ } SĂ©lectionne que les Ă©lĂ©ments â‰șa≻ enfants directs de â‰șp≻ (un « enfant » direct Ă©tant un Ă©lĂ©ment Ă  l’intĂ©rieur de l’élĂ©ment « parent » sans Ă©lĂ©ment intermĂ©diaire.

Ceci est bien évidement généralisable pour des classes (#myclass) ou des identificateurs (#myid).


ඏ

Quelques exemples

Voici quelques exemples s’appuyant sur le code HTML donnĂ© plus haut. Je vous invite Ă  tester ces diffĂ©rentes solutions.

Tous les Ă©lĂ©ments â‰șspan≻

span {
  border-width: 1px;
  border-style: solid;
  border-color: black;
}

📌 VĂ©rifiez qu’il y a un bord noir, sur tous les Ă©lĂ©ments de type â‰șspan≻ prĂ©sent dans la page.

Tous les Ă©lĂ©ments â‰șspan≻ prĂ©sent dans les « lignes » :

On a deux solutions, qui permettent de sélectionner cela.

Voici la plus précise :

div.ligne span {
  border-width: 1px;
  border-style: solid;
  border-color: red;
}

📌 VĂ©rifiez que cela applique un bord sous forme de ligne rouge.

La seconde est cependant suffisante :

.ligne span {
  border-width: 1px;
  border-style: dotted;
  border-color: red;
}

📌 VĂ©rifiez que cela applique un bord en pointillĂ© rouge.

Tous les Ă©lĂ©ments â‰șspan≻ prĂ©sent dans les « lignes » prĂ©sentes dans « essai » :

div#essai div.ligne span {
  color: #edd400; /* Jaune */
}

📌 VĂ©rifiez la couleur du texte.

div#essai .ligne span {
  color: #53a8ca; /* Bleu */
}

📌 VĂ©rifiez la couleur du texte.

div#essai div.ligne span {
  color: #dd0b0b; /* Rouge */
}

📌 VĂ©rifiez la couleur du texte.

#essai .ligne span {
  color: #8ae234; /* Vert */
}

📌 VĂ©rifiez la couleur du texte.


ඏ

Explication des solutions proposées

Le code CSS a Ă©tĂ© adaptĂ© pour le code HTML proposĂ© en dĂ©but de ce billet. Le changement est qu’au lieu d’utiliser la classe « essais », le code HTML dĂ©fini un ID « essai ».

PremiÚre version du code CSS :

#essai { font-family: monospace; }

.blanc {
  background-color: white;
  width: 20px;
  height: 20px;
  display: inline-block;
}

.gris {
  background-color: grey;
  width: 20px;
  height: 20px;
  display: inline-block;
}

.rouge {
  background-color: red;
  width: 20px;
  height: 20px;
  display: inline-block;
}

Seconde version du code CSS, plus courte et utilise la sĂ©lection des Ă©lĂ©ments sur lequel doit s’appliquer une rĂšgle basĂ©e sur le « chemin ». Ici on sĂ©lectionne tous les Ă©lĂ©ments span Ă©tant immĂ©diatement Ă  l’intĂ©rieur d’un Ă©lĂ©ment de classe ligne : cela se note '.ligne span'.

On note que l’avantage de cette solution est que la taille du carrĂ© n’est dĂ©fini qu’une seule fois, rendant, par exemple, plus simple la modification de ces valeurs.

Il s'agit simplement d'une mise en facteur.

#essai { font-family: monospace; }

.ligne span {
  width: 20px;
  height: 20px;
  display: inline-block;
}

.blanc {  background-color: white; }

.gris { background-color: grey; }

.rouge { background-color: red; }

ඏ

Références

L’atelier complet

኿

â„č 2006 - 2024 | 🏠 Accueil du domaine | 🏡 Accueil du blog