Fiche de révision : Pseudo-classes et mises en page CSS

📋 Plan du Cours

1. États et positions des éléments
2. Pseudo-éléments décoratifs
3. Conteneur et axes flexbox
4. Répartition et dimensionnement flexbox
5. Définition et dimensions de la grille
6. Placement et usages de Grid
7. Diagnostic des erreurs de mise en page

📖 1. États et positions des éléments

★ À maîtriser

• Pour rendre la navigation clavier aussi visible que la navigation à la souris, donnez le même style à :hover et à :focus.

• Pour les liens, écrivez les pseudo-classes dans l’ordre :link, :visited, :hover, :active, car à spécificité égale la dernière règle l’emporte.

• Ne masquez pas le contour de focus avec outline: none sans le remplacer par un indicateur visible, par exemple avec :focus-visible.

• :hover cible un élément survolé par la souris, :focus un élément qui reçoit le focus, et :active un élément en cours de clic.

• :nth-child(odd) cible les positions impaires, :nth-child(even) les positions paires et :nth-child(3n) une position sur trois.

Compléments

• :first-child et :last-child ciblent respectivement le premier et le dernier enfant, tandis que :nth-child() cible une position ou un motif parmi les enfants.

📖 2. Pseudo-éléments décoratifs

★ À maîtriser

📌 Les pseudo-éléments ::before et ::after nécessitent la propriété content, qui peut recevoir une chaîne vide avec content: "".

• Les pseudo-éléments s’écrivent avec deux deux-points, par exemple ::before et ::after, et créent ou ciblent une partie d’un élément.

📌 Une pseudo-classe s’écrit avec un deux-points et cible un état ou une position, tandis qu’un pseudo-élément s’écrit avec deux deux-points et cible une partie de l’élément.

Compléments

📌 Réservez ::before et ::after à la décoration et n’y placez pas de texte important.

• Un trait décoratif sous un titre peut être créé avec h2::after, content: "", display: block, une largeur de 60px et une hauteur de 4px.

• ::first-letter cible la première lettre d’un élément, ::first-line sa première ligne et ::selection le texte sélectionné.

💡 Astuce mémo

Un deux-points pour l’état, deux pour une partie créée ou ciblée

📖 3. Conteneur et axes flexbox

🔑 Notions clés & Définitions

• Flexbox : Mode de mise en page qui aligne et répartit des éléments sur un seul axe, en ligne ou en colonne.

★ À maîtriser

📌 La propriété display: flex se déclare sur le conteneur parent, et ses enfants directs deviennent des éléments flex.

📌 Sur un conteneur flex, justify-content agit sur l’axe principal et align-items sur l’axe secondaire.

Compléments

• Avec flex-direction: row, l’axe principal suit la ligne et l’axe secondaire lui est perpendiculaire ; avec flex-direction: column, les deux axes s’inversent.

• flex-direction accepte row, row-reverse, column et column-reverse ; sa valeur par défaut est row.

• Les propriétés du conteneur flex comprennent :

  • display
  • flex-direction
  • justify-content
  • align-items
  • gap
  • flex-wrap

📖 4. Répartition et dimensionnement flexbox

★ À maîtriser

• justify-content accepte les valeurs :

  • flex-start
  • flex-end
  • center
  • space-between
  • space-around
  • space-evenly

• align-items accepte les valeurs :

  • stretch
  • flex-start
  • flex-end
  • center

📌 Avec flex-wrap: nowrap, valeur par défaut, les éléments restent sur une ligne et se tassent ; avec flex-wrap: wrap, ceux qui ne tiennent plus passent à la ligne.

Compléments

📌 La propriété gap place l’espace entre les éléments flex, et non sur les bords du conteneur.

• La déclaration flex: 1 1 250px permet à une carte de grandir, de rétrécir et d’avoir une taille de départ de 250px.

• Avec flex: 1 sur chaque élément, les éléments se partagent également l’espace disponible ; avec flex: 2 sur le deuxième, celui-ci prend deux parts.

📖 5. Définition et dimensions de la grille

🔑 Notions clés & Définitions

• Grid : Mode de mise en page en deux dimensions qui organise des éléments en lignes et en colonnes.
• Fraction fr : Unité représentant une part de l’espace restant dans la grille.

★ À maîtriser

📌 La propriété display: grid s’applique au conteneur parent et ses enfants directs deviennent des éléments de la grille.

• grid-template-columns définit les colonnes ; repeat(3, 1fr) crée trois colonnes égales.

Compléments

• grid-template-rows définit la hauteur des lignes et accepte notamment px, fr et auto ; sans cette propriété, la hauteur suit le contenu.

• row-gap et column-gap permettent de définir séparément l’espace entre les lignes et l’espace entre les colonnes.

💡 Astuce mémo

Flexbox suit un axe ; Grid organise lignes et colonnes

📖 6. Placement et usages de Grid

★ À maîtriser

📌 grid-column et grid-row s’appliquent à l’élément à placer et indiquent les lignes de départ et de fin de son étendue.

📌 Flexbox organise les éléments sur une ligne ou une colonne et laisse le contenu décider, tandis que Grid organise des lignes et des colonnes et laisse la grille décider.

• Les lignes de grille séparent les cases : trois colonnes ont quatre lignes verticales, et deux rangées ont trois lignes horizontales.

Compléments

• grid-column: 1 / 3 couvre deux colonnes, grid-column: span 2 couvre deux colonnes depuis la place de l’élément et grid-column: 1 / -1 s’étend sur toute la largeur jusqu’à la dernière ligne.

• Dans une grille de trois colonnes, grid-column: 1 / 4 permet à un élément de couvrir les trois colonnes.

• Grid place automatiquement les éléments case par case, de gauche à droite puis à la ligne suivante.

📖 7. Diagnostic des erreurs de mise en page

★ À maîtriser

• Si rien ne s’aligne en flexbox, vérifiez que display: flex est appliqué au conteneur parent plutôt qu’aux éléments enfants.

• Seuls les enfants directs d’un conteneur sont des éléments flex ou grid ; pour aligner un petit-enfant, il faut un autre conteneur.

Compléments

📌 Pour éviter que des cartes débordent de l’écran, activez flex-wrap: wrap sur leur conteneur.

• justify-content n’a pas d’effet visible lorsqu’il n’y a pas d’espace libre, notamment si les éléments remplissent déjà la ligne ou ont flex: 1.

• align-items: center ne centre pas les éléments si le conteneur n’a pas une hauteur supérieure à celle de ses éléments.

• Sans grid-template-columns, une grille n’a qu’une colonne par défaut.

📊 Tableaux de synthèse

Flexbox ou Grid