Introduction à la mise en page
Que vais-je trouver?
Vous trouverez diverses questions sur les feuilles de style Css pour la présentation des éléments HTML ou XHTML comme les alignements verticaux, justification du texte, centrage du texte, espace entre les lettres, espace entre les mots, espace entre les lignes (interligne), césures, ...
Comment aligner verticalement un texte en Css?
Modifier l'alignement vertical du texte grâce aux feuilles de style Css
Vous pouvez en feuille de style Css spécifier l'alignement vertical d'un bloc texte. Pour cela vous devez utiliser la feuille de style Css vertical-align qui permet de spécifier la position verticale du texte.
vertical-align : middle;Vous trouverez une explication détaillée sur l'alignement vertical suivant les types d'éléments.
Voir des exemples d'alignement vertical de texte en Css
Comment center un texte en Css?
Center un texte grâce aux feuilles de style Css
Vous pouvez en feuille de style Css center le texte, mais aussi une image ou tout élément de type display : inline*. Pour cela vous devez utiliser la feuille de style Css text-align qui permet spécifier un alignement au centre du texte.
text-align : center;Comment justifier un texte en Css?
Justifier un texte grâce aux feuilles de style Css
Vous pouvez en feuille de style Css justifier le texte, c'est-à-dire que le texte est aligné horizontalement à droite et à gauche. Pour cela, vous devez utiliser la feuille de style Css text-align qui permet d'avoir un texte justifié dans l'élément.
text-align : justify;Comment aligner à droite ou à gauche un texte en Css?
Aligner à droite ou à gauche le texte grâce aux feuilles de style Css
Vous pouvez en feuille de style Css aligner le texte à droite ou aligner le texte à gauche. Pour cela, vous devez utiliser la feuille de style Css text-align qui permet de spécifier l'alignent du texte.
text-align : right;text-align : left;Comment décaler la première ligne d'un paragraphe en Css?
Mettre un décalage sur la première ligne d'un paragraphe grâce aux feuilles de style Css
Vous pouvez en feuille de style Css spécifier le décalage de la première ligne d'un bloc texte. Pour cela vous devez utiliser la feuille de style Css text-indent qui permet de spécifier le décalage la première ligne d'un bloc texte.
text-indent : 10%;Voir des exemples de décalage de la première ligne d'un bloc texte en Css
Comment modifier l'espace entre les lignes en Css?
Changer l'espacement entre les lignes grâce aux feuilles de style Css
Vous pouvez en feuille de style Css changer la hauteur de ligne d'un bloc texte, cela vous permettra du même coup de changer l'espace entre chaque ligne.
Pour cela vous devez utiliser la feuille de style Css line-height qui permet de spécifier l'interligne et donc l'espacement entre les lignes.
line-height : 12px;Comment modifier l'espace entre les lettres en Css?
Changer l'espacement entre les lettres grâce aux feuilles de style Css
Vous pouvez en feuille de style Css changer l'espace entre chaque lettre. Pour cela vous devez utiliser la feuille de style Css letter-spacing qui permet de spécifier l'espacement entre les lettres.
letter-spacing : 1em;Voir des exemples de changement d'espacement entre les lettres en Css
Comment modifier l'espace entre les mots en Css?
Changer l'espacement entre les mots grâce aux feuilles de style Css
Vous pouvez en feuille de style Css changer l'espace entre chaque mot. Pour cela vous devez utiliser la feuille de style Css word-spacing qui permet de spécifier l'espacement entre les mots.
word-spacing : 1em;Voir des exemples de changement d'espacement entre les mots en Css
Comment modifier la césure du texte en Css?
Préciser le type de césure du texte grâce aux feuilles de style Css
Vous pouvez en feuille de style Css spécifier le type de césure d'un bloc texte. Pour cela vous devez utiliser la feuille de style Css overflow-wrap anciennement word-wrap qui permet de spécifier de rompre un mot afin d'éviter son débordement de l'élément.
word-wrap : break-word;
overflow-wrap : break-word;
Voir des exemples césures d'un mot avec word-wrap en Css
Voir des exemples césures d'un mot avec overflow-wrap en Css
Préciser la gestion des espaces blancs grâce aux feuilles de style Css
Vous pouvez en feuille de style Css spécifier qu'il n'y a aucune césure dans un bloc texte. Pour cela vous devez utiliser la feuille de style Css white-space qui permet de spécifier la manière dont sont gérés les espaces blancs et les types de caractères de retour à la ligne.
white-space : nowrap;Voir des exemples de gestion des espaces blancs en Css
Tronquer les mots grâce aux feuilles de style Css
Vous pouvez en feuille de style Css spécifier que le mot est tronqué et sera identifié par défaut par trois petits points. Pour cela vous devez utiliser la feuille de style Css text-overflow qui permet de spécifier que le mot est tronqué.
text-overflow : ellipsis;Comment empêcher le retour à la ligne en Css?
Empêcher le retour à la ligne automatique du texte grâce aux feuilles de style Css
Vous pouvez en feuille de style Css supprimer le retour automatique à la ligne dans un bloc texte. Pour cela vous devez utiliser la feuille de style Css white-space qui permet de ne pas faire de retour à la ligne.
white-space : nowrap;Empêcher le retour à la ligne entre deux balises grâce aux feuilles de style Css
Certaines balises (X)HTML dites de type display:block, génèrent automatiquement un saut de ligne. Vous pouvez en feuille de style Css supprimer ce retour automatique à la ligne.
Pour cela vous devez utiliser la feuille de style Css display sur les deux balises adjacentes qui permet de changer le type de l'élément en élément inline (en ligne).
display : inline;Deux types vont vous permettre de supprimer le retour à la ligne entre deux balises, le type inline et inline-block.
Voir des exemples de changement de type en Css
Vous pouvez aussi allez voir la technique des flottants.
Comment spécifier le sens de lecture du texte en Css?
Spécifier la direction d'un texte grâce aux feuilles de style Css
Vous pouvez en feuille de style Css spécifier la direction de lecture d'un texte. Pour cela vous devez utiliser la feuille de style Css direction. rtl (Right To Left pour droite à gauche) pour les textes en hébreu ou en arabe, ltr (Left To Right pour gauche à droite) pour les autres langues.
direction : rtl;Comment faire un indice ou un exposant en Css?
Mettre un texte en indice ou en exposant grâce aux feuilles de style Css
Vous pouvez en feuille de style Css mettre un texte en un indice ou en exposant. Pour cela vous devez utiliser la feuille de style Css vertical-align avec la valeur sub ou super.
L'utilisation de vertical-align remplace l'utilisation de la balise (X)HTML SUP ou SUB.
.exposant { vertical-align : super; }
.indice{ vertical-align : sub; }H<span class="indice">2</span>O<br>
Marque déposée <span class="exposant ">®</span>Exemple :
H2O
Marque déposée ®