cClaude.rocks: Le blog - 👾 Atelier-Web complément ⑥

juin

2021

👾 Atelier-Web complément ⑥ - Précisions sur le CSS

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

Liste des billets de l'atelier Web,
Le billet lié.

ᦿ

cClaude.rocks ☕ Le blog

Forme générale d’une règle CSS

Notion de sélecteur HTML/CSS

Construction d’un sélecteur CSS

Quelques exemples

Tous les éléments ≺span≻

Tous les éléments ≺span≻ présent dans les « lignes » :

Tous les éléments ≺span≻ présent dans les « lignes » présentes dans « essai » :

Explication des solutions proposées

Références

L’atelier complet

Tous les éléments ≺`span`≻

Tous les éléments ≺`span`≻ présent dans les « lignes » :

Tous les éléments ≺`span`≻ présent dans les « lignes » présentes dans « essai » :