Sélecteurs et cascade CSS : mettre en forme une page web

HTML décrit le contenu et son sens. CSS, abréviation de Cascading Style Sheets, décrit la présentation : couleurs, polices, espacements, bordures et arrière-plans. Modifier une feuille de style peut donner une apparence différente au même document HTML sans changer ses titres, ses paragraphes ou ses liens.

Lire une règle

p {
  color: navy;
  font-size: 18px;
}

Le sélecteur p correspond aux paragraphes. Les accolades encadrent le bloc de déclarations. Chaque déclaration comporte une propriété, deux-points, une valeur et un point-virgule. Ici, color et font-size sont des propriétés ; navy et 18px sont des valeurs. Les sauts de ligne et les espaces entre ces parties rendent le code plus facile à lire sans modifier son effet.

Un point-virgule sépare une déclaration de la suivante. Le dernier est facultatif, mais le conserver évite des erreurs lorsque tu ajoutes une ligne. Dans color: navy font-size: 18px;, le navigateur lit une seule valeur de couleur invalide. Il ne peut pas retrouver les deux déclarations que tu voulais écrire : ce texte ne définit donc aucun des deux styles.

Relier le CSS

Une feuille de style externe est un fichier CSS distinct, relié depuis le head du document HTML :

<link rel="stylesheet" href="css/styles.css">

Ce chemin indique qu’un dossier nommé css se trouve à côté du fichier HTML et contient styles.css. Un fichier externe peut mettre en forme plusieurs pages. Enregistrer une modification dans ce fichier met à jour les règles chargées par ces pages.

Un élément style dans le head contient des règles pour une page. Un attribut style en ligne contient des déclarations pour un élément, comme <p style="color: crimson;">Hello.</p>. Les feuilles de style externes sont généralement plus faciles à maintenir. Les déclarations en ligne normales sont aussi prioritaires sur les règles normales des feuilles de style de l’auteur, ce qui peut compliquer les modifications ultérieures.

Pour obtenir un premier résultat, place body { font-family: Arial, sans-serif; } et h1 { color: darkslateblue; } dans le fichier relié. Recharge la page. Le corps du texte prend la police Arial lorsqu’elle est disponible, avec une police sans empattement en repli ; le titre change de couleur. Les contrôles comme les boutons peuvent conserver leur propre police définie par le navigateur jusqu’à ce que tu leur demandes explicitement d’hériter de la police.

Trouver les erreurs de syntaxe et de chemin

Les navigateurs ignorent les déclarations invalides et poursuivent. color: 12px; est invalide car une longueur n’est pas une couleur. font-size: 16 px; est invalide car le nombre et l’unité doivent être accolés. Une propriété mal orthographiée est également ignorée. Une déclaration de bordure valide dans le même bloc peut toujours fonctionner : un changement visible ne prouve donc pas que toutes les déclarations sont valides.

Les commentaires CSS utilisent /* Header styles */ et peuvent s’étendre sur plusieurs lignes. // ne commence pas un commentaire CSS ; il peut conduire le navigateur à ignorer le code qui suit. Les noms de propriétés et les valeurs ordinaires sous forme de mots-clés ne sont pas sensibles à la casse ; écris-les en minuscules par convention. Les noms de classes et les chemins de fichiers doivent correspondre à leur orthographe et à leur casse réelles.

Si aucun style n’apparaît, vérifie la requête dans le panneau Réseau. Un chemin incorrect comme style.css peut renvoyer un statut 404 même si la page HTML elle-même s’ouvre normalement.

Considérer les propriétés raccourcies comme des réglages complets

Une propriété raccourcie définit plusieurs propriétés associées à la fois. margin: 10px 20px; définit les quatre marges extérieures. Les parties omises reprennent leur valeur initiale : background-image: url("sky.jpg"); suivi de background: lightblue; supprime l’image. Place d’abord la propriété raccourcie, puis les exceptions sous forme de propriétés détaillées qui doivent être conservées.

Une page HTML brute comporte tout de même de grands titres, des espaces entre les paragraphes, des marqueurs de liste et des liens soulignés. Ils proviennent de la feuille de style du navigateur, le CSS intégré au navigateur. Tes styles partent de ces valeurs par défaut ; une page sans mise en forme personnalisée n’est pas une page sans règles CSS.

Choisir le sens avant l’apparence

Les valeurs par défaut courantes comprennent une marge extérieure de 8px sur le corps, des marges verticales de 1em sur les paragraphes et une marge intérieure de 40px au début des listes. Les valeurs par défaut des titres comprennent 2em pour h1 et 1.5em pour h2, avec des marges verticales de 0.67em pour h1. Le texte d’importance forte est en gras ; le texte marqué par une emphase est en italique. Les liens non visités sont généralement bleus et les liens visités violets. Les paramètres et les implémentations des navigateurs peuvent influer sur les valeurs par défaut : inspecte donc la page réelle lorsque la précision compte.

La taille de texte par défaut est généralement de 16px, avec une police choisie dans les paramètres du navigateur. Les lecteurs peuvent modifier cette taille. Les tailles de police relatives peuvent suivre leur choix.

Choisis un élément HTML pour son sens, puis mets-le en forme. Si un h2 paraît trop grand, utilise h2 { font-size: 1.25rem; }. Choisir un h4 uniquement pour obtenir des caractères plus petits modifierait la structure des titres. Modifier la taille en CSS préserve le sens du titre de deuxième niveau.

Les valeurs par défaut déterminent aussi comment les éléments occupent l’espace. Les paragraphes et les sections forment normalement des boîtes de bloc. Les éléments span et les liens s’insèrent normalement dans les lignes. Les éléments de liste ont display: list-item, ce qui leur donne une boîte de niveau bloc et un marqueur. Une modification de display en CSS change le comportement de la boîte tout en préservant le sens HTML de l’élément.

Ne réinitialiser que ce que tu souhaites

Une réinitialisation CSS supprime certaines valeurs par défaut. body { margin: 0; } supprime l’espace extérieur. Une règle générale comme * { margin: 0; padding: 0; } supprime aussi l’espacement des paragraphes et le retrait des listes, que tu dois ensuite rétablir. Une approche normalize conserve les valeurs par défaut utiles et corrige les différences.

Les contrôles de formulaire ont souvent des polices que le navigateur leur attribue directement. Pour qu’ils utilisent la police de la page, écris :

button, input, select, textarea {
  font: inherit;
}

Commence le document HTML par <!DOCTYPE html>. Cette déclaration sélectionne le mode standard. Son omission peut déclencher le mode de compatibilité, dans lequel d’anciens comportements de compatibilité modifient certaines dimensions et d’autres résultats CSS.

Inspecter la propriété qui te surprend

Fais un clic droit sur un élément et choisis Inspecter. Le panneau Styles montre les règles correspondantes, y compris les règles du navigateur portant une mention de feuille de style du navigateur. Une déclaration barrée a perdu face à une autre ; un avertissement peut signaler du CSS invalide. Les déclarations gagnantes sont choisies propriété par propriété : une règle peut donc perdre pour la couleur tout en fournissant la marge intérieure.

Le panneau des styles calculés montre les valeurs finales des propriétés ainsi que le contenu, la marge intérieure, la bordure et la marge extérieure du modèle de boîte. Si un titre présente un espace inattendu, inspecte sa marge extérieure avant d’ajouter une marge intérieure à un autre élément. Teste une modification directement dans les outils de développement, puis copie la règle qui fonctionne dans ta feuille de style : les modifications faites pendant l’inspection disparaissent au rechargement.

Lorsqu’un style ne fonctionne pas, suis un ordre utile : vérifie que la feuille de style est chargée, que le sélecteur correspond, que la déclaration est valide, qu’elle l’emporte et que la propriété agit sur ce type de boîte. Un width: 200px valide ne dimensionne toujours pas un span ordinaire affiché en ligne.

Un sélecteur répond à une question pratique : quels éléments doivent recevoir ces déclarations ? Commence par le sélecteur le plus simple qui exprime le rôle souhaité. Une classe peut être réutilisée sur de nombreux éléments sans lier le style à un emplacement précis de la page.

Sélectionner par nom et par attribut

Un sélecteur de type est un nom d’élément. Un sélecteur de classe commence par un point ; un sélecteur d’identifiant commence par #. La ponctuation appartient au sélecteur CSS, pas à la valeur de l’attribut HTML. Écris <p class="warning">, pas <p class=".warning">.

Un élément peut avoir plusieurs classes séparées par des espaces. <p class="warning"> et <div class="box warning"> correspondent tous deux à .warning. Un identifiant doit être unique dans une page. Sa spécificité élevée rend aussi les styles fondés sur un identifiant plus difficiles à remplacer : les classes sont donc généralement le principal outil pour les styles réutilisables.

Utilise des noms qui décrivent un rôle, comme .error-message ou .product-card. Un nom comme .red-text devient trompeur si la présentation change de couleur. Les noms de classes sont sensibles à la casse : .Warning et .warning sont différents. Un nom commençant par un chiffre doit être échappé dans un sélecteur CSS ; choisir .three-columns évite la forme non échappée invalide .3-columns.

Exiger plusieurs conditions sur un même élément

Écrire des sélecteurs les uns à la suite des autres crée un sélecteur composé. Le même élément doit satisfaire à chaque partie. p.intro correspond aux paragraphes qui ont la classe intro. .card.featured correspond à un élément qui possède les deux classes.

<p class="note important">Doors open at 19:00.</p>
<p class="note">Bring your ticket.</p>

.note { color: #333333; }
.important { font-weight: bold; }
p.note.important { border-left: 4px solid crimson; }

Trouve d’abord les correspondances. Les deux paragraphes ont note : leur texte devient donc gris foncé. Seul le premier possède important : lui seul devient donc gras. Le sélecteur composé ajoute la bordure gauche à ce même premier paragraphe, car c’est un p qui possède les deux classes. Aucun conteneur supplémentaire n’est nécessaire.

Un espace change la sélection : p .intro sélectionne un élément de classe intro à l’intérieur d’un paragraphe. Il ne sélectionne pas le paragraphe lui-même. Garde les parties accolées lorsqu’elles décrivent le même élément.

Partager un bloc de déclarations

Une virgule crée une liste de sélecteurs :

h1, h2, h3 { font-family: Georgia, serif; }

Chaque sélecteur correspond indépendamment à son niveau de titre. Sans les virgules, h1 h2 h3 désignerait un h3 à l’intérieur d’un h2 lui-même à l’intérieur d’un h1.

Un sélecteur invalide dans une liste de sélecteurs ordinaire peut invalider toute la règle. h1, h2..title, h3 ne met en forme aucun de ces titres, car le double point est invalide. Lorsqu’une règle partagée semble absente, vérifie tous les sélecteurs de la liste, pas seulement celui de l’élément inspecté.

Certaines conditions de mise en forme sont déjà présentes dans les attributs HTML. D’autres dépendent de ce que fait le lecteur ou de la place d’un élément parmi ses éléments frères. CSS peut reconnaître ces conditions sans ajouter une classe pour chacune.

Sélectionner un attribut ou sa valeur

Les sélecteurs d’attribut utilisent des crochets. [alt] correspond à la présence d’un attribut, même si sa valeur est vide. input[type="email"] exige la valeur d’attribut exacte.

Ajoute i avant le crochet fermant pour ignorer la casse, comme dans a[href$=".pdf" i]. Ce sélecteur atteint aussi un lien se terminant par .PDF. La recherche d’un mot entier évite que note corresponde par accident à un mot de classe plus long comme notebook.

Sélectionner un état ou une position

Une pseudo-classe utilise un signe deux-points : :hover, :focus, :checked ou :disabled. :focus-visible sélectionne un élément qui a le focus lorsque le navigateur détermine qu’un indicateur visible est nécessaire, généralement pendant la navigation au clavier.

Un lien peut être visité et survolé en même temps. Pour des règles concurrentes de même spécificité, écris les états de lien dans cet ordre : :link, :visited, :focus, :hover, :active. Sinon, une règle de couleur pour les liens visités placée plus tard l’emporterait sur une règle de couleur au survol placée plus tôt, pour un lien visité. Pour protéger la vie privée, les navigateurs limitent :visited à certains changements de couleur ; définir sa graisse ne fonctionne pas et la transparence ne peut pas révéler l’historique des visites.

Les pseudo-classes structurelles comptent les éléments frères. :first-child désigne le premier élément enfant de son parent. Dans <article><h2>News</h2><p>Update</p></article>, p:first-child ne correspond à rien. p:first-of-type correspond bien à ce paragraphe.

:nth-child(3) sélectionne le troisième enfant. odd sélectionne les positions 1, 3, 5 ; even sélectionne 2, 4, 6. Dans :nth-child(3n+1), commence par n = 0, puis 1, 2 et 3 : les positions correspondantes sont 1, 4, 7 et 10. li:not(:last-child) exclut le dernier élément, ce qui permet d’ajouter des séparateurs uniquement entre les éléments.

Mettre en forme une partie ou ajouter une indication

Un pseudo-élément utilise deux signes deux-points. ::first-line et ::first-letter mettent en forme des parties du texte ; ::marker met en forme les marqueurs de liste, ::placeholder le texte indicatif d’un champ et ::selection le texte sélectionné. Les anciennes formes à un seul signe deux-points pour before, after, first-line et first-letter fonctionnent toujours.

.required::after {
  content: " *";
  color: crimson;
}

::after crée du contenu dans l’élément sélectionné après son contenu existant. ::before le crée avant. Les deux ont besoin d’une valeur content ; même content: "" crée une boîte décorative. Les informations essentielles doivent figurer dans le HTML, où elles restent un véritable contenu du document. Utilise ces pseudo-éléments pour la décoration ou de petites indications, car le texte généré ne peut pas toujours être sélectionné ou copié comme le texte HTML.

Les éléments HTML forment un arbre. Un élément placé directement dans un autre est son enfant ; tout élément imbriqué à l’intérieur est un descendant. Les éléments qui partagent un parent sont des éléments frères. Un combinateur relie des sélecteurs par l’une de ces relations.

Suivre la relation jusqu’à la cible

La partie la plus à droite désigne l’élément qui reçoit les déclarations. h2 + p met en forme le paragraphe, pas le titre. Les deux combinateurs de voisin recherchent vers l’avant parmi les éléments frères ; aucun ne sélectionne un parent ou un élément frère précédent.

Suivre une liste imbriquée

<ul class="menu">
  <li>Guides</li>
  <li>Topics
    <ul>
      <li>Typography</li>
    </ul>
  </li>
</ul>

.menu li correspond aux trois éléments de liste, car tous trois sont des descendants de la liste extérieure. .menu > li ne correspond qu’à « Guides » et « Topics » : leur parent est la liste de classe menu. Le parent de l’élément « Typography » est le ul intérieur, qui ne porte pas cette classe.

Cette distinction compte lorsque les éléments de premier niveau ont besoin d’une grande marge intérieure, mais que les éléments imbriqués doivent avoir un espacement compact. Un sélecteur de descendant atteint toutes les profondeurs, sauf si une autre condition restreint sa portée.

Suivre les éléments frères suivants

<article>
  <h2>Opening hours</h2>
  <p>Visit in the morning.</p>
  <aside>Closed on holidays.</aside>
  <p>Booking is optional.</p>
</article>

h2 + p correspond au paragraphe qui invite à venir le matin. Il ne saute pas le aside pour trouver un autre paragraphe. h2 ~ p correspond aux deux paragraphes, car tous deux suivent le titre et partagent son parent. Si un paragraphe se trouvait à l’intérieur du aside, il ne serait pas un élément frère du titre et ne correspondrait donc à aucun des deux sélecteurs.

Combiner les relations sans sélectionner trop largement

.sidebar > ul a:hover correspond aux liens survolés situés à n’importe quelle profondeur dans un ul dont le parent direct possède la classe sidebar. Lis de droite à gauche : un lien survolé ; dans une liste ; cette liste directement dans la barre latérale. L’espace autorise des éléments intermédiaires entre la liste et le lien.

Les combinateurs n’ajoutent aucune spécificité. Les parties du sélecteur qui désignent des éléments, des classes, des identifiants ou d’autres correspondances en ajoutent toujours. Les longues chaînes peuvent donc rendre les règles plus difficiles à maintenir, même si les symboles de relation n’ajoutent aucun point : modifier l’imbrication HTML peut empêcher les correspondances. Une classe descriptive sur la cible, comme .menu-link, exprime souvent plus clairement un rôle réutilisable.

Lorsqu’une règle ne trouve pas de correspondance, inspecte l’arbre réel au lieu de te fier aux espaces visibles. Deux éléments peuvent apparaître côte à côte à l’écran tout en ayant des parents différents dans le HTML. Les commentaires et les espaces ne comptent pas comme des éléments frères pour ces combinateurs.

La cascade choisit une déclaration gagnante pour chaque propriété de chaque élément. Elle ne choisit pas une règle entière en rejetant toutes les autres. Avec p { color: gray; font-size: 18px; } et .lead { color: black; }, un paragraphe de classe lead peut prendre sa couleur dans la règle de classe et sa taille dans la règle de type.

Comparer dans le bon ordre

Écarte d’abord les déclarations qui ne s’appliquent pas : leurs sélecteurs doivent correspondre et les éventuelles conditions doivent être remplies. Compare ensuite l’origine et l’importance, y compris la priorité des couches de cascade. Les styles en ligne normaux de l’auteur sont prioritaires sur les règles normales de ses feuilles de style. Lorsque des déclarations restent à égalité après ces étapes, compare la spécificité ; utilise l’ordre d’apparition s’il reste une égalité.

Deux règles .button de même priorité qui définissent des couleurs d’arrière-plan différentes sont départagées par l’ordre : la dernière l’emporte. Les feuilles de style reliées plus loin dans le HTML viennent aussi plus tard pour ces égalités. Un fichier qui arrive plus vite par le réseau ne vient pas pour autant plus tard dans la cascade.

Comprendre l’importance avant de l’ajouter

Une déclaration en ligne comme style="color: purple;" l’emporte sur les sélecteurs normaux des feuilles de style de l’auteur, même sur ceux qui contiennent des identifiants. Une déclaration !important d’une feuille de style de l’auteur peut l’emporter sur cette déclaration en ligne normale.

<p class="note" style="color: purple;">Check the time.</p>

p { color: gray !important; }
.note { color: blue; }

Le paragraphe est gris. L’importance est comparée avant la spécificité du sélecteur ou l’avantage du style en ligne normal. Si la couleur en ligne comporte elle aussi !important, cette déclaration en ligne importante l’emporte sur la règle importante de la feuille de style de l’auteur.

Pour les déclarations importantes, la priorité des origines s’inverse : les déclarations importantes du navigateur l’emportent sur celles de l’utilisateur, qui l’emportent sur celles de l’auteur. Cela protège les règles que les lecteurs ou les navigateurs doivent imposer. Au sein d’une même origine, la priorité des styles en ligne et celle des couches viennent toujours avant la spécificité et l’ordre dans le code source.

Utiliser !important pour chaque conflit crée des styles de plus en plus difficiles à remplacer. Préfère un sélecteur plus simple ou un ordre choisi. Remplacer des règles tierces que tu ne peux pas modifier peut justifier une déclaration importante ; cela doit rester une exception réfléchie.

Regrouper les règles en couches de cascade

@layer reset, base, components;
@layer base {
  p { margin: 0 0 1rem; }
}

Cela déclare l’ordre des couches avant leurs règles. Pour les déclarations normales, les couches ultérieures l’emportent sur les couches antérieures, quelle que soit la spécificité des sélecteurs. Les règles normales hors couche l’emportent sur les règles normales placées dans des couches. Une règle de composant de faible spécificité peut donc remplacer une règle de base très spécifique sans ajouter d’identifiants.

Les déclarations importantes inversent cet ordre des couches : les couches antérieures l’emportent sur les suivantes, et les déclarations importantes placées dans des couches l’emportent sur celles qui sont hors couche. Cette inversion préserve les protections importantes des couches de base. Lorsque tu examines un conflit, détermine l’origine, l’importance et le groupe de couches gagnants avant de consacrer du temps à compter les parties des sélecteurs.

La spécificité mesure le poids d’un sélecteur pour cibler un élément. Compare-la uniquement entre les déclarations encore à égalité aux étapes précédentes de la cascade, notamment pour l’origine, l’importance, la couche et la priorité des styles en ligne.

Compter trois colonnes

Écris la spécificité sous la forme identifiants-classes-types, comme 0-1-1.

Le sélecteur universel * et les combinateurs n’ajoutent rien. Pour a[href^="https"]:focus, compte zéro identifiant, deux éléments dans la colonne des classes (l’attribut et :focus) et un dans celle des types (a). Le résultat est 0-2-1.

Autres exemples : .nav a vaut 0-1-1 ; ul li a:hover vaut 0-1-3 ; #main .card > h2 vaut 1-1-1 ; article p::first-line vaut 0-0-3. Un pseudo-élément compte dans les types même si son nom commence par des signes deux-points.

Comparer à partir de la gauche

Compare d’abord les identifiants. En cas d’égalité, compare les classes ; si elles sont aussi à égalité, compare les types. Seuls des triplets égaux passent à l’ordre dans le code source. Ce sont des décomptes distincts, pas les chiffres d’un nombre décimal : 0-11-0 perd tout de même face à 1-0-0. Des classes supplémentaires ne se reportent pas dans la colonne des identifiants.

<nav id="site-nav">
  <a class="active" href="/">Home</a>
</nav>

#site-nav a { color: white; }
nav a.active { color: orange; }
.active { color: yellow; }

Supposons que ce sont des déclarations normales dans la même couche de l’auteur. Leurs scores sont 1-0-1, 0-1-2 et 0-1-0. La première l’emporte : le lien est donc blanc. Sa colonne des identifiants tranche la comparaison avant que les nombres de classes ou de types ne comptent.

#site-nav .active l’emporterait avec 1-1-0, mais une conception fondée sur des classes est plus facile à étendre : .site-nav a peut fournir le style de base, et .site-nav .active modifier le lien actif. Cela maintient une spécificité faible et assez homogène.

Connaître les exceptions des fonctions

:is(), :not() et :has() n’ajoutent aucun poids pour la fonction elle-même. Leur argument le plus spécifique fournit le poids. Ainsi, li:not(.done) vaut 0-1-1, et :is(#intro, p) a vaut 1-0-1. Compte le sélecteur le plus spécifique de la liste d’arguments, pas celui qui te semble visuellement le plus proche de l’élément.

:where() et tout son contenu contribuent toujours pour zéro. :where(#main) p obtient donc le score 0-0-1. Cette fonction est utile pour les styles par défaut qui doivent être faciles à remplacer.

La distance jusqu’à un ancêtre ne compte pas. body h1 et html h1 ont tous deux le score 0-0-2 : une déclaration ultérieure départage donc leur égalité. Les styles en ligne sont traités avant la spécificité des sélecteurs, et !important relève de l’importance. Aucun des deux n’est une partie ordinaire de sélecteur à ajouter au triplet.

L’héritage permet à un enfant de recevoir une valeur de son parent lorsque la propriété est normalement héritée et qu’aucune déclaration ne fournit une valeur différente sur l’enfant. C’est pourquoi une seule règle sur le corps peut définir la couleur et la police du texte pour une grande partie de la page.

Distinguer le texte hérité des réglages de boîte

La plupart des propriétés du texte sont héritées : color, les propriétés de police, line-height, letter-spacing, text-align et text-transform. Les styles de liste et visibility sont également hérités. Les propriétés de boîte comme les marges extérieures et intérieures, les bordures, la largeur, la hauteur, les arrière-plans, l’affichage et le dimensionnement des boîtes ne le sont pas.

body { color: #222222; font-family: Georgia, serif; }
h1, h2 { font-family: Arial, sans-serif; }
footer { color: #666666; }

Le texte ordinaire du corps utilise Georgia en gris foncé. Les titres reçoivent la famille de polices qui leur est directement attribuée et conservent la couleur héritée. Le texte du pied de page hérite de Georgia tandis que sa couleur change localement.

L’arrière-plan transparent d’un enfant laisse apparaître celui de son parent ; cela ne signifie pas que l’enfant a hérité de la couleur d’arrière-plan. De même, les enfants d’une boîte bordée ne reçoivent pas automatiquement leurs propres bordures.

Les valeurs attribuées directement priment sur les valeurs héritées

Avec #content { color: red; } et p { color: blue; }, un paragraphe dans la zone de contenu est bleu. La spécificité de l’identifiant ne concurrence pas la règle du paragraphe, car les déclarations ciblent des éléments différents. Le paragraphe a déjà une couleur attribuée directement : il n’a donc pas besoin du rouge hérité.

Les enfants héritent généralement des valeurs calculées. Si une section a font-size: 20px et son enfant font-size: 0.8em, la taille calculée de cet enfant est 16px. Un paragraphe à l’intérieur hérite de 16px ; il ne multiplie pas une seconde fois par 0.8. Une hauteur de ligne sans unité est utile, car la valeur héritée reste un multiplicateur de la taille de police propre à chaque enfant.

Choisir le sens d’une réinitialisation

Pour le CSS de l’auteur, revert laisse apparaître les styles de l’utilisateur ou du navigateur. La différence compte sur un div : display: initial donne la valeur initiale inline de la propriété, tandis que display: revert rétablit son affichage block habituel dans le navigateur. Une valeur initiale appartient à la propriété CSS ; une valeur par défaut du navigateur peut dépendre de l’élément HTML.

inherit fonctionne même sur une propriété qui n’est normalement pas héritée, comme dans border: inherit. button, input { font: inherit; } remplace les polices directement attribuées aux contrôles par celle de leur parent. all: unset réinitialise presque toutes les propriétés à la fois, ce qui supprime aussi une apparence intégrée utile.

Un soulignement est une exception apparente. text-decoration n’est pas héritée, mais le soulignement d’un parent est tracé sous ses descendants en ligne. Définir text-decoration: none sur un span imbriqué ne peut pas effacer la ligne du parent. Supprime-la du parent et applique-la uniquement au texte qui doit être souligné.

color définit la couleur du texte. Les arrière-plans, bordures, contours, décorations et ombres acceptent aussi des valeurs de couleur. Une même couleur peut s’écrire sous plusieurs formes ; choisis une notation qui facilite la compréhension du changement souhaité.

Lire les noms et les canaux hexadécimaux

CSS compte environ 150 couleurs nommées, dont navy, tomato et rebeccapurple. Les noms sont pratiques pour des essais rapides, mais leur sens courant peut surprendre : green vaut #008000, tandis que le vert pur vif est lime, soit #00ff00. Les valeurs exactes suppriment cette incertitude.

Une couleur hexadécimale à six chiffres comporte trois paires de canaux : rouge, vert et bleu. Chaque paire va de 00 à ff, ce qui équivaut à 0 jusqu’à 255. Toutes les valeurs à zéro donnent du noir ; toutes au maximum donnent du blanc. Des paires égales produisent un gris, comme dans #808080.

La notation hexadécimale à trois chiffres double chaque chiffre : #f0a se développe en #ff00aa. Elle n’ajoute pas de zéros. Une couleur comme #1e90ff ne peut pas être abrégée, car toutes ses paires ne répètent pas leur chiffre. Les lettres hexadécimales majuscules et minuscules représentent les mêmes valeurs.

Pour convertir une paire, multiplie son premier chiffre par 16 et ajoute le second. Les lettres a à f représentent 10 à 15. Pour #1e90ff, 1e donne 30, 90 donne 144 et ff donne 255. La notation RVB correspondante est rgb(30 144 255). Du code plus ancien peut utiliser des virgules ou rgba() ; ces formes fonctionnent toujours.

Décrire la teinte ou la transparence

hsl() indique la teinte, la saturation et la luminosité. La teinte est un angle : 0 ou 360 est rouge, 120 vert et 240 bleu. La saturation va du gris à 0 % à la couleur pleine à 100 %. La luminosité va du noir à 0 % au blanc à 100 %. Une teinte pure a une saturation de 100 % et une luminosité de 50 %, comme dans hsl(0 100% 50%). Modifier uniquement la luminosité produit des versions foncées et pâles apparentées.

Une valeur du canal alpha suit une barre oblique : rgb(0 0 0 / 0.6) est du noir à 60 % d’opacité. Zéro est entièrement transparent et un entièrement opaque. La notation hexadécimale à huit chiffres ajoute une paire pour le canal alpha : #00000080 a une valeur de 128 sur 255, soit environ 50 % pour le canal alpha. transparent est entièrement transparent.

.notice {
  color: white;
  background-color: rgb(0 0 0 / 0.6);
}

Ici, seul l’arrière-plan est partiellement transparent. opacity: 0.6 rendrait au contraire tout l’élément translucide, y compris son texte et ses enfants. Cette différence compte lorsque tu veux un texte opaque et lisible sur une surface teintée.

Réutiliser une couleur et vérifier le résultat

currentColor désigne la couleur du texte de l’élément lui-même. Avec color: #0055aa; border: 2px solid currentColor;, la bordure suit le texte. Modifier la couleur du texte modifie aussi cette bordure sans répéter une valeur de couleur.

Le niveau AA des WCAG 2.2 exige un contraste d’au moins 4,5:1 pour le texte normal et 3:1 pour le texte de grande taille, soit environ 24px ou environ 18,5px en gras. #767676 sur blanc donne environ 4,54:1 ; #999999 sur blanc donne environ 2,85:1 et ne satisfait à aucun des deux seuils. Utilise un vérificateur de contraste ou les outils de couleur du navigateur sur la paire réelle de couleurs du premier plan et de l’arrière-plan, en tenant compte de l’effet de la transparence.

Une longueur associe un nombre à une unité, comme 16px ou 1.5rem. Il n’y a pas d’espace entre les deux. Une largeur non nulle a besoin d’une unité : width: 300; est invalide. Zéro peut être écrit sans unité. Certaines propriétés acceptent volontairement des nombres seuls, notamment line-height: 1.5, opacity: 0.8 et font-weight: 700.

Associer l’unité à sa référence

Un pixel CSS n’est pas nécessairement un point physique de l’écran. Les écrans à haute densité peuvent utiliser plusieurs pixels de l’appareil pour un pixel CSS. Les relations fixes entre unités comprennent 1in = 96px = 2,54cm et 1pt = 1/72in. Ainsi, 12pt équivaut à 16px et 1cm à environ 37,8px. Ces conversions ne garantissent pas une mesure physique sur tous les écrans.

Calculer les valeurs relatives à la police

Supposons qu’un parent ait une police de 16px et que son enfant ait font-size: 1.25em; padding: 2em;. Calcule d’abord la taille de police : 1,25 fois 16px donne 20px. La marge intérieure utilise ensuite la taille de l’enfant lui-même : 2 fois 20px donne donc 40px de chaque côté.

Les tailles de police en em peuvent se multiplier dans les éléments imbriqués. Avec li { font-size: 1.25em; }, trois niveaux imbriqués partant de 16px donnent 20px, 25px et 31,25px. 1.25rem donne en revanche 20px à chaque niveau lorsque la taille racine est de 16px.

Laisser la taille racine à la valeur par défaut du navigateur, ou la définir en pourcentage, permet au texte en taille relative de s’adapter lorsqu’un lecteur modifie cette valeur par défaut. Une taille fixe html { font-size: 16px; } remplace ce réglage. Une pratique utile consiste à employer rem pour la taille de police et em pour la marge intérieure d’un bouton, afin que son espacement grandisse avec son propre texte.

Vérifier les pourcentages et la zone d’affichage

La propriété détermine la référence du pourcentage. Un bloc englobant fournit une référence pour les dimensions de la boîte ; dans ces exemples de flux normal, il s’agit généralement de la zone de contenu du parent. Un enfant avec width: 40% dans un bloc englobant de 600px mesure 240px de large avant l’ajout éventuel de marges intérieures ou de bordures dans le modèle content-box. font-size: 150% utilise la taille de police du parent. Même les marges intérieures et extérieures supérieure et inférieure en pourcentage utilisent la largeur du bloc englobant, et non sa hauteur.

1vw vaut 1 % de la largeur de la zone d’affichage ; 1vh vaut 1 % de sa hauteur. Dans une zone d’affichage de 1 280 × 800 pixels CSS, 50vw vaut 640px et 10vh vaut 80px. 100vw peut inclure la largeur de la barre de défilement et provoquer un débordement horizontal là où 100% du parent tiendrait.

max-width: 65ch donne à une colonne de texte une largeur liée à la police. C’est une mesure approximative de longueur de lecture, pas la garantie que chaque ligne comporte exactement 65 caractères.

Combiner des unités par un calcul

width: calc(100% - 40px); soustrait une quantité fixe d’une dimension relative. Garde des espaces autour de + et - ; calc(100%-40px) est invalide. Les navigateurs calculent les longueurs relatives à la police en pixels, tandis que les pourcentages de la taille du conteneur sont résolus pendant la mise en page. Les outils de développement affichent les dimensions obtenues afin que tu puisses vérifier la référence et le calcul.

De l’intérieur vers l’extérieur, une boîte comporte un contenu, une marge intérieure, une bordure et une marge extérieure. Le contenu comprend du texte, des images ou des éléments enfants. La marge intérieure crée de l’espace autour de ce contenu. La bordure entoure la marge intérieure ; la marge extérieure sépare la boîte, bordure comprise, de ses voisines.

Un arrière-plan remplit le contenu et la marge intérieure et s’étend sous la bordure, mais ne colore jamais la marge extérieure. Utilise une marge intérieure lorsque l’espace doit faire partie d’une carte colorée. Utilise une marge extérieure pour l’espace autour. Les marges extérieures peuvent être négatives ; les marges intérieures ne le peuvent pas.

Lire les propriétés raccourcies d’espacement

margin, padding et border-width acceptent de une à quatre valeurs :

L’ordre à quatre valeurs suit le sens des aiguilles d’une montre à partir du haut. Utilise des propriétés détaillées comme padding-left pour ne modifier qu’un côté après la propriété raccourcie. Ne lis pas la deuxième valeur d’une forme à deux valeurs comme le bas : elle définit les deux côtés horizontaux.

Calculer la boîte de contenu par défaut

.card {
  width: 300px;
  padding: 20px;
  border: 5px solid;
  margin: 10px;
}

La valeur initiale de box-sizing est content-box. La largeur déclarée de 300px ne couvre que le contenu. Ajoute deux fois 20px de marge intérieure et deux fois 5px de bordure : la boîte jusqu’à la bordure mesure 350px de large. Ajoute les deux marges extérieures de 10px pour obtenir 370px d’espace horizontal.

La hauteur fonctionne de la même façon lorsqu’elle est définie explicitement, mais le texte a souvent besoin d’une boîte qui peut grandir. Laisser height: auto évite d’enfermer un contenu changeant dans une hauteur fixe.

Inclure la marge intérieure et la bordure dans la largeur

Avec box-sizing: border-box, la même largeur déclarée inclut la marge intérieure et la bordure. La boîte jusqu’à la bordure reste à 300px ; soustrais 40px de marge intérieure et 10px de bordure pour trouver une zone de contenu de 250px. Les marges extérieures restent à l’extérieur, ce qui donne 320px d’espace horizontal.

Une réinitialisation courante applique ce modèle aux éléments et à leurs parties générées :

*, *::before, *::after { box-sizing: border-box; }

box-sizing n’est pas hérité automatiquement : la règle sélectionne donc directement les boîtes.

Un enfant à pleine largeur permet de voir facilement la différence. Dans un conteneur de 600px, width: 100%; padding: 0 20px; donne une boîte de 640px jusqu’à la bordure avec le dimensionnement content-box, avant même l’ajout d’une bordure. Avec le dimensionnement border-box, la même largeur déclarée de 600px inclut la marge intérieure et s’ajuste au conteneur.

Laisser le contenu tenir sans risque

min-height définit une hauteur minimale tout en permettant à la boîte de grandir. max-width: 800px permet à un bloc de largeur automatique de rétrécir dans un conteneur étroit tout en l’empêchant de dépasser 800px de large.

Si le contenu dépasse une boîte fixe, overflow contrôle le résultat : visible laisse déborder, hidden coupe, scroll demande des barres de défilement et auto permet le défilement si nécessaire. pre { overflow: auto; } donne à une longue ligne de code sa propre zone de défilement. Couper un texte dont les lecteurs ont encore besoin est une mauvaise solution ; vérifie d’abord si la dimension fixe est nécessaire.

Utilise le schéma de boîte du panneau des styles calculés pour comparer les valeurs de contenu, de marge intérieure, de bordure et de marge extérieure du navigateur avec ton calcul.

Le type d’affichage détermine comment une boîte s’insère parmi les éléments qui l’entourent. Un bloc commence normalement sur une nouvelle ligne et remplit la largeur disponible lorsque sa largeur est automatique. Une boîte en ligne ordinaire s’insère dans le texte et prend les dimensions de son contenu. Une boîte inline-block garde sa place en ligne tout en acceptant des dimensions explicites.

Choisir le comportement nécessaire

Pour les éléments en ligne ordinaires comme span et a, les marges extérieures supérieure et inférieure n’ont aucun effet. Les marges intérieures et les bordures verticales sont dessinées mais ne repoussent pas les lignes voisines : elles peuvent donc les chevaucher. Les marges intérieures, bordures et marges extérieures horizontales occupent bien de l’espace le long de la ligne.

nav a {
  display: inline-block;
  padding: 8px 16px;
}

Ces liens restent sur une ligne tandis que leurs boîtes avec marge intérieure réservent de l’espace vertical. display: block donnerait à chaque lien sa propre ligne. Les images sont un cas particulier parmi les éléments en ligne : elles acceptent la largeur et la hauteur. Leur alignement par défaut sur la ligne de base peut laisser un petit espace en dessous pour les parties descendantes des lettres ; img { display: block; } supprime cet espace.

display: none supprime la boîte et l’espace qu’elle occupe, et la retire de la lecture par les lecteurs d’écran. visibility: hidden la masque tout en conservant son espace.

Centrer une boîte ou centrer son contenu

.page {
  max-width: 960px;
  margin: 0 auto;
}

Dans un conteneur plus large, le bloc cesse de grandir à 960px et les deux marges horizontales automatiques se partagent également l’espace restant. Un bloc qui remplit le conteneur n’a aucun espace horizontal restant à partager. Les marges automatiques ne centrent pas une boîte en ligne ordinaire, et les marges verticales automatiques valent zéro dans le flux normal des blocs.

text-align: center remplit un autre rôle : il centre le contenu en ligne dans un bloc. Une boîte de paragraphe centrée peut toujours avoir son texte aligné à gauche ; un paragraphe à pleine largeur peut avoir son texte centré sans devenir une boîte centrée plus étroite.

Reconnaître la fusion des marges verticales

Dans le flux normal des blocs, les marges supérieure et inférieure adjacentes peuvent fusionner. Deux marges positives deviennent la plus grande des deux. Un titre avec une marge inférieure de 24px suivi d’un paragraphe avec une marge supérieure de 16px laisse un espace de 24px, et non de 40px. Les marges horizontales ne fusionnent pas.

Avec des marges positives et négatives, combine la plus grande marge positive avec la plus négative : 20px et −8px donnent 12px. Si elles sont toutes négatives, la plus négative l’emporte. Une boîte vide sans contenu, hauteur, bordure ni marge intérieure pour les séparer peut voir ses propres marges supérieure et inférieure fusionner.

La marge supérieure d’un premier enfant peut aussi fusionner avec celle d’un parent sans bordure, marge intérieure ni contenu antérieur pour les séparer. L’espace apparaît alors à l’extérieur de l’arrière-plan du parent. Ajoute une marge intérieure ou une bordure au parent, ou supprime la marge supérieure de l’enfant. Des conditions similaires permettent à la marge inférieure d’un dernier enfant de fusionner ; une hauteur ou une hauteur minimale du parent peut empêcher cette fusion en bas.

Les marges des boîtes inline-block ne fusionnent pas, pas plus que celles des éléments flexibles ou de grille, ni celles des boîtes flottantes ou positionnées absolument. Une méthode simple pour espacer le texte consiste à mettre les marges supérieures à zéro et à utiliser les marges inférieures, avec des marges intérieures pour l’espace dans les conteneurs.

Le choix d’une police est une préférence accompagnée d’une solution de repli. Les polices installées diffèrent d’un appareil à l’autre et une police téléchargée peut arriver après le texte. Une pile de polices garde la page lisible tout en conservant un style adapté.

Construire une pile

body {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
}

Le navigateur essaie les noms de familles dans l’ordre et utilise une police disponible. Mets entre guillemets les noms contenant des espaces. Laisse les familles génériques sans guillemets : "sans-serif" demande une police portant exactement ce nom ; sans-serif demande au navigateur une police générique adaptée.

Les choix génériques comprennent serif, sans-serif, monospace, cursive, fantasy et system-ui. Ce dernier utilise la police de l’interface du système. Les polices souvent dites sûres pour le Web, comme Arial, Georgia et Verdana, sont courantes, mais leur présence n’est pas garantie. Une famille générique de repli reste nécessaire à la fin.

font-size accepte des longueurs, des pourcentages et des mots-clés de taille. Avec une taille racine de 16px, 1rem donne 16px et 2.5rem donne 40px. Les tailles relatives peuvent suivre les réglages du lecteur.

Définir soigneusement la graisse, le style et la propriété raccourcie

font-weight: normal équivaut à 400 ; bold équivaut à 700. Des valeurs comme 300 et 600 demandent d’autres graisses lorsque la police les propose. Si une graisse demandée est absente, le navigateur en choisit une disponible ou peut produire un faux gras. Si seules les graisses 400 et 700 sont chargées, demander 300 utilise 400. bolder et lighter sont relatifs au parent.

font-style: italic demande une version italique ; normal supprime ce style. La propriété raccourcie font exige à la fois une taille et une famille :

blockquote {
  font: italic 700 1.125rem/1.6 Georgia, serif;
}

Le style, la variante et la graisse facultatifs viennent avant la taille. Une barre oblique rattache la hauteur de ligne à la taille, et la famille vient en dernier. Omettre la taille ou la famille invalide la propriété raccourcie. Les autres réglages de police omis sont réinitialisés : font: 1rem Arial, sans-serif; ramène une graisse précédemment définie en gras à la normale.

Charger un fichier de police

@font-face {
  font-family: "Inter";
  src: url("fonts/inter-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
body { font-family: "Inter", Arial, sans-serif; }

@font-face attribue à un fichier un nom de famille CSS. Utilise ce nom déclaré dans la pile, pas le nom du fichier. Les chemins de fichiers relatifs partent de l’emplacement de la feuille de style. WOFF2 est un format compressé pris en charge par les navigateurs actuels.

Les polices statiques nécessitent généralement des fichiers et des règles distincts pour chaque graisse et chaque style. Les polices variables peuvent contenir une plage de graisses dans un seul fichier. Charge les fichiers réellement utilisés par la mise en forme. font-display: swap affiche immédiatement une police de repli et la remplace dès que la police web est disponible.

Un service de polices peut fournir un lien HTML et la déclaration de famille ; l’hébergement sur ton propre serveur évite une requête de police vers un serveur tiers. Vérifie que la licence de la police autorise son utilisation sur un site web. Si la police paraît incorrecte, inspecte la police affichée et la requête du fichier. Un nom de famille CSS mal orthographié entraîne silencieusement l’utilisation d’une police de repli : un texte lisible ne prouve donc pas à lui seul que la police souhaitée a été chargée.

La mise en forme du texte doit résister aux changements de taille, de contenu et de méthode de saisie. Commence par la hauteur de ligne et des largeurs lisibles, puis ajoute aux listes et aux liens des détails qui indiquent aux lecteurs comment utiliser le contenu.

Adapter la hauteur de ligne à chaque taille de police

Utilise une hauteur de ligne sans unité comme line-height: 1.5. Avec un corps de texte de 16px, elle crée des lignes de 24px. Les enfants héritent du nombre : un titre de 32px obtient donc des lignes de 48px. Une valeur de 1.5em ou 150% sur le parent est au contraire calculée à 24px à cet endroit, et un enfant peut hériter de cette hauteur fixe de 24px même si son propre texte est plus grand. La valeur par défaut normal dépend de la police et se situe souvent autour de 1,2.

body { font: 1.125rem/1.6 Georgia, serif; color: #222222; }
h1 { font: 700 2.25rem/1.2 Arial, sans-serif; }
p { max-width: 65ch; }

Avec une taille racine de 16px, le corps du texte mesure 18px sur des lignes de 28,8px ; le titre mesure 36px sur des lignes de 43,2px. La limite imposée aux paragraphes évite les lignes très longues sur un écran large.

text-align positionne le contenu en ligne dans un bloc. Les valeurs comprennent left, right, center, justify, start et end ; start et end suivent le sens de l’écriture. Cette propriété ne déplace pas le bloc lui-même. La justification dans des colonnes étroites peut créer de grands espaces entre les mots.

Modifier la présentation sans réécrire le texte

text-transform peut afficher les mots en majuscules, en minuscules ou avec une majuscule initiale sans modifier le texte HTML. letter-spacing, word-spacing et text-indent contrôlent différents types d’espacement. text-shadow: 1px 1px 2px rgb(0 0 0 / 0.5); indique un décalage horizontal, un décalage vertical, un flou et une couleur.

text-decoration ajoute des lignes sous, au-dessus ou à travers le texte. Cette propriété peut aussi définir le style et la couleur, comme dans underline wavy crimson. L’épaisseur et le décalage du soulignement permettent d’affiner une ligne. Les lecteurs s’attendent à ce qu’un texte souligné soit un lien : réserve donc cette indication à cet usage.

Mettre en forme les listes sans retrait involontaire

list-style-type choisit des marqueurs comme disc, square, decimal ou lower-alpha. list-style-position: outside garde les marqueurs à l’extérieur du bloc de texte ; inside les place dans la première ligne, de sorte que les lignes suivantes peuvent commencer sous le marqueur. list-style-image fournit un marqueur sous forme d’image, et li::marker peut colorer le marqueur seul.

Pour une liste de navigation simple, utilise .menu { list-style: none; margin: 0; padding: 0; }. Supprimer les marqueurs seuls laisse la marge intérieure par défaut au début de la liste. list-style: square inside est une propriété raccourcie qui combine des réglages de marqueur.

Garder les liens visibles pendant leur utilisation

Ordonne les règles d’état de même spécificité ainsi : lien, visité, focus, survol, actif. Un lien peut être à la fois visité et survolé ; l’ordre dans le code source départage leurs déclarations de couleur concurrentes. :active désigne l’état pendant l’activation, pas la page courante.

Garde les liens reconnaissables par un moyen autre que la couleur seule, généralement un soulignement dans le texte courant. Donne au focus clavier un indicateur clair :

a:focus-visible {
  outline: 3px solid #f2a900;
  outline-offset: 2px;
}

Ne supprime pas le contour de focus à moins de le remplacer par un autre style de focus visible. Un contour n’occupe aucun espace dans le modèle de boîte : cette indication ne décale donc pas le texte environnant.

Un arrière-plan se trouve derrière le contenu d’une boîte. Sa couleur remplit le contenu et la marge intérieure et s’étend sous la bordure ; la marge extérieure reste transparente. Une image est dessinée au-dessus de la couleur d’arrière-plan : une couleur peut donc fournir une surface fiable pendant le chargement de l’image.

Résoudre le chemin depuis la feuille de style

.hero {
  background-color: #1a2b3c;
  background-image: url("../images/hero.jpg");
}

Si le CSS se trouve dans css/styles.css et l’image dans le dossier images à la racine du site, .. sort de css avant d’entrer dans images. Une URL d’image CSS part du fichier CSS, contrairement au lien vers la feuille de style, qui part du fichier HTML. Vérifie la requête de l’image si une règle valide n’affiche que sa couleur de repli.

Les arrière-plans sont décoratifs. Un lecteur d’écran ne les annonce pas comme des images. Place une image informative dans le HTML avec une alternative textuelle qui a un sens. Une couleur de repli proche de la couleur dominante de l’image aide aussi le texte à rester lisible si l’image est lente à charger ou absente.

Contrôler la répétition, la taille et la position

Par défaut, les images se répètent à leur taille naturelle. no-repeat utilise une copie ; repeat-x crée une rangée et repeat-y une colonne. space répartit des copies entières avec des espaces, tandis que round les ajuste pour qu’un nombre entier tienne dans l’espace.

Pour une boîte de 800px sur 400px et une image carrée de 1 000px de côté, cover redimensionne l’image à 800px de côté, laissant 400px de sa hauteur à l’extérieur de la boîte. Contain la redimensionne à 400px de côté ; avec no-repeat, 400px de la largeur de la boîte restent à découvert. Définir uniquement contain ne désactive pas la répétition.

La position initiale est en haut à gauche. background-position: center centre une image ; right 20px bottom 10px la décale depuis ces bords. La valeur horizontale vient en premier. Associer center à cover garde le milieu visible lorsqu’un recadrage est nécessaire.

Générer et superposer des images

Un dégradé est une image : place-le donc dans background-image :

background-image: linear-gradient(to right, #1e90ff, #8a2be2);

La première couleur est à gauche et la seconde à droite. Les angles et les positions des points de couleur offrent davantage de contrôle ; radial-gradient(circle, white, steelblue) se propage vers l’extérieur depuis le centre. Un dégradé dans background-color est invalide.

Sépare plusieurs images par des virgules ; la première est au-dessus. Un dégradé noir translucide placé avant une photo peut assombrir l’image sans rendre le texte translucide.

Utiliser la propriété raccourcie avec soin

background: url("hero.jpg") center / cover no-repeat #1a2b3c; combine une image, une position, une taille, une répétition et une couleur. La taille suit la position après une barre oblique. Seule la dernière couche peut avoir une couleur. Les réglages d’arrière-plan omis sont réinitialisés : un background: white; placé plus tard supprime donc une image précédente.

La valeur initiale de background-attachment est scroll : l’arrière-plan se déplace avec l’élément lorsque la page défile. fixed garde l’arrière-plan attaché à la zone d’affichage. Teste la boîte et le texte réels après avoir ajouté une décoration ; le redimensionnement et le recadrage ne doivent pas masquer les informations nécessaires aux lecteurs.

Une bordure fait partie du modèle de boîte. Un contour ou une ombre est dessiné autour de la boîte sans réserver d’espace supplémentaire. Le choix entre ces éléments modifie à la fois l’apparence et la manière dont le style affecte les dimensions.

Donner un style à une bordure

.note {
  border: 1px solid #cccccc;
  border-left: 4px solid crimson;
  padding-left: 12px;
}

La propriété raccourcie définit la largeur, le style et la couleur ; ces parties peuvent apparaître dans n’importe quel ordre. Le style initial de la bordure est none : définir uniquement la largeur et la couleur ne produit donc pas de bordure visible. Les styles comprennent solid, dashed, dotted, double, groove, ridge, inset et outset, ainsi que none et hidden.

Si la largeur est omise, elle vaut medium, généralement 3px dans les navigateurs actuels. Si la couleur est omise, elle vaut currentColor et correspond à celle du texte de l’élément. Les propriétés raccourcies par côté comme border-top et les propriétés détaillées comme border-left-color permettent d’ajouter une exception après une bordure générale. Par exemple, border-top: none ne supprime que le bord supérieur après une déclaration de bordure sur les quatre côtés.

Avec le dimensionnement content-box, une bordure de 2px de chaque côté ajoute 4px à la largeur et à la hauteur. Augmenter la largeur de la bordure au survol peut donc décaler le contenu voisin. Garde une largeur de bordure stable et change sa couleur, ou utilise un contour comme indication qui n’occupe aucun espace. Avec le dimensionnement border-box, une bordure plus épaisse utilise davantage l’intérieur de la boîte déclarée.

Arrondir les coins dans un ordre prévisible

border-radius: 8px arrondit tous les coins même lorsque la bordure elle-même est invisible. Avec quatre valeurs, l’ordre est supérieur gauche, supérieur droit, inférieur droit, inférieur gauche. Deux valeurs s’appliquent aux paires de coins opposés : la première aux coins supérieur gauche et inférieur droit, la seconde aux coins supérieur droit et inférieur gauche.

border-radius: 50% rend une boîte carrée circulaire et une boîte rectangulaire elliptique. Son propre arrière-plan est découpé selon ce bord arrondi. Le rayon ne découpe pas lui-même le contenu enfant qui déborde ; le contrôle de ce débordement est un réglage distinct. Le rayon n’ajoute rien aux dimensions mesurées de la boîte.

Ajouter une ligne de focus ou de la profondeur

.link:focus-visible {
  outline: 3px solid navy;
  outline-offset: 2px;
}

Un contour est dessiné à l’extérieur de la bordure et n’occupe aucun espace dans la mise en page. Son décalage crée un espace avec la bordure. C’est une indication de focus utile, car elle peut apparaître sans déplacer les boîtes voisines.

box-shadow: 0 2px 6px rgb(0 0 0 / 0.2); donne un décalage horizontal nul, un décalage de 2px vers le bas, un flou de 6px et une couleur noire translucide. Une valeur d’étalement facultative vient après le flou. inset dessine l’ombre à l’intérieur ; des valeurs séparées par des virgules ajoutent plusieurs ombres. Les ombres suivent les coins arrondis et n’ajoutent aucun espace au modèle de boîte.

Vérifier une carte terminée

Une carte avec width: 280px; padding: 16px; border: 1px solid #dddddd; mesure 314px de large en dimensionnement content-box. Ajoute deux fois 16px et deux fois 1px à 280px. En dimensionnement border-box, elle reste à 280px et laisse 246px pour le contenu. Un rayon de courbure de 12px et une ombre douce ne changent aucun des deux calculs. Ils modifient le bord dessiné, pas les dimensions utilisées pour placer les autres boîtes.