Guide de style

Vous pouvez ajouter un texte d'introduction en plus gros caractères à vos articles en encadrant simplement un paragraphe dans une balise p avec la classe CSS « intro ». En termes simples, un texte en plus gros caractères sera généralement lu avant un texte en plus petits caractères.

Nous avons accordé une grande attention à la mise en place des bases de notre typographie dans le nouveau thème WordPress Blog. L'objectif de cette page est d'aider à déterminer quels sont les paramètres par défaut avec CSS et de s'assurer que tous les éléments possibles sont inclus. Nous avons par exemple examiné les titres. De jolis titres.

Mise en forme du titre deux

Il est possible d'ajouter une lettrineen encapsulant la première lettre du premier mot dans une balise span avec la classe CSS « dropcap ». Au lieu d'utiliser la police du corps du texte, nous utilisons la police d'affichage de nos titres. Cela permet également de lier les deux éléments si la police d'affichage s'accorde bien avec le corps du texte. Vous pouvez également utiliser une police purement décorative. Il existe des milliers de polices décoratives, mais la plupart d'entre elles ne sont pas adaptées à une utilisation dans le corps d'un livre.

Les citations sont un excellent moyen d'afficher et de mettre en forme des citations. Insérez de belles citations à l'aide du bouton « citation » de l'éditeur visuel. Pour ajouter un auteur, il suffit d'encadrer son nom dans une balise cite.

Vous créez encore des listes à puces et numérotées en saisissant manuellement des puces ou des chiffres au début de chaque ligne ? Au XXIe siècle, personne ne devrait plus effectuer cette tâche à la main.

Nous avons longuement examiné
À
Non classé
Listes.

Nous avons également examiné attentivement
À
Listes
De la variété commandée.

Titre trois

Cette balise permet de styliser de grands blocs de code.

pre {
    margin: 0 0 5px;
    font-weight: bold;
    font-size: 16px;
    line-height: 1.5;
}

Les tableaux sont utiles pour les mises en page où le texte doit être positionné côte à côte ou flottant à des emplacements spécifiques sur la page. Si leur création s'avère frustrante avec les outils de mise en page habituels, essayez d'utiliser un tableau.

Type	Police	Description
Humaniste	Sabon	Étroitement lié à la calligraphie
Transitoire	Baskerville	Plus abstrait et moins organique
Moderne	Bodoni	Remarquez les empattements fins et droits.
Slab Serif	Clarendon	Les polices de caractères égyptiennes ont des empattements épais.

To highlight a text, you simply need to wrap it into a <span> with the class “highlight”. This can be done in the Text editor view.

Mise en page à deux colonnes

Pour diviser le texte en deux colonnes, il suffit de l'encapsuler dans un conteneur div avec la classe « twocolumn ». Le fait d'avoir plusieurs colonnes permet d'obtenir une grille publicitaire très polyvalente, et, traditionnellement, les journaux avaient pour activité de vendre des publicités.En règle générale, une ligne de texte non justifié doit comporter environ 9 à 12 mots. Pour le texte justifié, ce nombre est d'environ 10 à 15 mots. Certains mots étant plus longs et d'autres plus courts, cette mesure n'est pas parfaite. Les petites colonnes de texte sont plus faciles à lire que les grandes. Imaginez une ligne de la taille d'un journal qui s'étendrait sur toute une page. Il serait très facile de sauter une ligne. Pour un texte justifié, ces chiffres sont d'environ 10 à 15 mots. Comme certains mots sont plus longs et d'autres plus courts, ce n'est pas une mesure parfaite. Vous devez vous demander comment atteindre facilement ces chiffres ? Ne vous inquiétez pas, c'est facile, vous n'aurez pas à compter les caractères un par un.

Styles d'image

Bienvenue dans l'alignement d'images ! La meilleure façon de montrer les avantages et les inconvénients des différentes options de positionnement d'images est de les intégrer harmonieusement dans un océan de mots. Prenez une raquette et c'est parti !

Le reste de ce paragraphe sert uniquement à illustrer le retour à la ligne autour d'une image alignée à droite.

Comme vous pouvez le voir, il devrait y avoir un peu d'espace au-dessus, en dessous et à gauche de l'image. Le texte ne doit pas empiéter sur l'image. Ce n'est tout simplement pas correct. Les images ont elles aussi besoin d'espace pour respirer. Laissez-les s'exprimer comme vos mots.

Ne laissez personne vous dire le contraire. Dans quelques instants, vous devriez voir le texte commencer à s'aligner sous l'image alignée à gauche et se mettre en place correctement. Il devrait encore y avoir beaucoup d'espace et tout devrait être bien en place. Oui... Tout à fait. Ça n'a jamais été aussi agréable d'avoir raison.

Laissez-les faire leur travail sans que le texte ne les gêne. Dans environ une phrase supplémentaire ici, nous verrons que le texte passe de la droite de l'image à la partie inférieure de l'image dans une transition fluide.
Et maintenant, nous allons aligner les éléments à gauche. Encore une fois, il devrait y avoir beaucoup d'espace au-dessus, en dessous et à droite de l'image. Regardez-le... Hé mec ! Tu assures sur le côté gauche. Je me fiche de ce que dit l'image alignée à droite, tu es superbe.

Et voilà, c'est terminé ! Vous avez survécu aux tumultes de l'alignement. Dans quelques instants, vous devriez voir le texte commencer à s'afficher sous l'image alignée à droite et s'ajuster correctement. Il devrait encore y avoir beaucoup d'espace et tout devrait être bien en place.