Bien création de sites web est souvent une bonne typographie. Étant donné qu'une grande partie du contenu d'une page Web est présentée sous forme de texte, être capable de styliser ce texte pour qu'il soit à la fois attrayant et efficace est une compétence importante à posséder en tant que concepteur de sites Web. Malheureusement, nous n'avons pas le même niveau de contrôle typographique en ligne que sur papier. Cela signifie que nous ne pouvons pas toujours styliser de manière fiable le texte d'un site Web de la même manière que nous pourrions le faire dans un document imprimé.
Un style de paragraphe courant que vous voyez souvent sur papier (et que nous pouvons recréer en ligne) est l'endroit où la première ligne de ce paragraphe est en retrait. espace de tabulation. Cela permet aux lecteurs de voir où commence un paragraphe et où se termine un autre.
Vous ne voyez pas autant ce style visuel dans les pages Web car les navigateurs, par défaut, affichent des paragraphes avec un espace sous eux comme un moyen de montrer où l'un se termine et où l'autre commence, mais si vous voulez styliser une page pour avoir cela inspiré de l'imprimé
style de retrait sur les paragraphes, vous pouvez le faire avec le retrait du texte propriété de style.La syntaxe de cette propriété est simple. Voici comment ajouter un retrait de texte à tous les paragraphes d'un document.
p {
retrait de texte: 2em ;
}
Personnalisation des retraits
Une façon de spécifier exactement les paragraphes à mettre en retrait, vous pouvez ajouter une classe aux paragraphes que vous souhaitez mettre en retrait, mais cela nécessite que vous éditiez chaque paragraphe pour y ajouter une classe. C'est inefficace et ne suit pas Codage HTML les meilleures pratiques.
Au lieu de cela, vous devriez considérer quand vous indentez des paragraphes. Vous indentez les paragraphes qui suivent directement un autre paragraphe. Pour ce faire, vous pouvez utiliser le sélecteur de frères adjacents. Avec ce sélecteur, vous sélectionnez chaque paragraphe immédiatement précédé d'un autre paragraphe.
p + p {
retrait de texte: 2em ;
}
Puisque vous indentez la première ligne, vous devez également vous assurer que vos paragraphes n'ont pas d'espace supplémentaire entre eux (ce qui est la valeur par défaut du navigateur). Stylistiquement, vous devriez soit avoir un espace entre les paragraphes ou alors indenter la première ligne, mais pas les deux.
p {
marge inférieure: 0 ;
rembourrage en bas: 0 ;
}
p + p {
marge supérieure: 0 ;
rembourrage haut: 0 ;
}
Retraits négatifs
Vous pouvez également utiliser le retrait du texte, avec une valeur négative, pour que le début d'une ligne aille vers la gauche par opposition à la droite comme un retrait normal. Vous pouvez le faire si une ligne commence par un guillemet afin que le caractère de guillemet apparaisse dans le légère marge à gauche du paragraphe et les lettres elles-mêmes forment toujours une belle gauche alignement.
Supposons, par exemple, que vous ayez un paragraphe descendant d'un blockquote et que vous vouliez qu'il soit en retrait négatif. Vous pouvez écrire ce CSS:
guillemet p {
indentation du texte: -.5em ;
}
Cela donnerait au début du paragraphe, qui comprend vraisemblablement le caractère guillemet d'ouverture, d'être légèrement déplacé vers la gauche pour créer une ponctuation suspendue.
Concernant les marges et le rembourrage
Souvent dans la conception de sites Web, vous utilisez valeurs de marge ou de remplissage pour déplacer des éléments et créer un espace blanc. Cependant, ces propriétés ne fonctionneront pas pour obtenir l'effet de paragraphe en retrait. Si vous appliquez l'une de ces valeurs au paragraphe, le texte entier de ce paragraphe, y compris chaque ligne, sera espacé au lieu de la première ligne uniquement.