Disposition et formatage CSS

Ce document explique la disposition et la mise en forme de CSS, en le contrastant avec des méthodes basées sur des tableaux plus anciennes. Il utilise une explication simplifiée du modèle d'objet de document (DOM) et du modèle de boîte CSS pour illustrer comment un navigateur rend une page Web. L'article fournit ensuite des réponses aux questions fréquemment posées (FAQ) sur la disposition et le formatage CSS.

Alors que CSS1 a offert des capacités de disposition graphique limitées, CSS2 et CSS3 ont considérablement élargi ces fonctionnalités, offrant une alternative plus puissante aux tables de mise en page et au balisage de présentation. Les navigateurs rendent les documents HTML en deux étapes: analyse et rendu. L'analyse implique la création d'un arbre Dom à partir du balisage HTML.

Considérez cet exemple HTML:

<title>Widgets</title><h1 id="Widgets">Widgets</h1>
<p>Welcome to Widgets, the number one company in the world for selling widgets!</p>

Cela se traduit par un arbre Dom (nœuds de texte omis pour la concision):

L'arbre Dom se compose de nœuds (nœuds d'élément et nœuds de texte). Le nœud racine (toujours l'élément html) se ramifie en head et body, se ramifiant davantage en nœuds enfants. Les relations entre les nœuds incluent les parents-enfants, les ancêtres-atmendant et les frères et sœurs.

Après la construction DOM et l'analyse CSS, la phase de rendu commence. Chaque nœud DOM est rendu comme une ou plusieurs boîtes CSS rectangulaires (boîtes à blocs ou boîtes en ligne, avec des sous-types). La feuille de style de l'agent utilisateur attribue généralement des boîtes de blocs aux éléments au niveau des blocs et aux boîtes en ligne à des éléments en ligne, bien que la propriété display puisse remplacer cela. Surtout, CSS ne modifie pas le balisage HTML; La distinction de bloc / en ligne est définie par le HTML DTD.

Questions fréquemment posées:

Q: Quelle est la différence entre la disposition et la mise en forme de CSS?

A: La disposition concerne la disposition des éléments (position, taille, alignement) sur une page (en-têtes, pieds de page, barres latérales). Le formatage se concentre sur l'apparence visuelle (couleur, police, arrière-plan, bordures, espacement).

Q: Comment créer une disposition CSS réactive?

A: Utilisez des requêtes multimédias (styles pour différents appareils), des dispositions flexibles basées sur la grille (pourcentages au lieu d'unités fixes) et des images / supports flexibles (unités relatives).

Q: Quels sont les différents modèles de disposition CSS?

a: modèle de bloc (éléments au niveau du bloc), modèle en ligne (texte), modèle de table (données tabulaires), modèle positionné (positionnement explicite) et modèle flexible (dispositions de boîtes flexibles).

Q: Comment utiliser CSS pour la mise en forme du texte?

a: utilisez font-family, font-size, font-weight, text-align, text-decoration, text-transform, et les propriétés de couleur.

Q: Quel est le modèle CSS Box?

A: Un concept fondamental décrivant la distribution de l'espace autour des éléments. Chaque élément est une boîte rectangulaire comprenant du contenu, un rembourrage, une bordure et des couches de marge.

Q: Comment formater les listes avec CSS?

a: utilisez list-style-type, list-style-position, list-style-image, le rembourrage et les propriétés de marge.

Q: Que sont CSS Grid et Flexbox?

A: Systèmes de disposition modernes. La grille est bidimensionnelle (lignes et colonnes), tandis que Flexbox est unidimensionnel (lignes ou colonnes). Les deux sont réactifs.

Q: Comment formater les tables avec CSS?

A: Utilisez des propriétés de bordure, de rembourrage, d'arrière-plan, text-align et vertical-align.

Q: Différence entre les éléments en ligne et en blocs?

A: Les éléments en ligne ne démarrent pas de nouvelles lignes et ne prennent que la largeur nécessaire (par exemple, <span></span>, <a></a>). Les éléments de blocs démarrent de nouvelles lignes et s'étendent sur toute la largeur (par exemple, <div>, <code><h1></h1>).

Q: Comment formater des liens avec CSS?

a: utilisez color, text-decoration, background-color, et pseudo-classes (hover, active, visited).