Aller au contenu

Toutes les techniques pour personnaliser votre texte avec CSS3 partie 2

Et voici la suite du cours précédent, toujours consacré à la mise en forme de vos textes avec CSS3.

Tout est dans le cours vidéo ci-dessous.

[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]

Toutes les techniques pour personnaliser votre texte avec CSS3 partie 2

Bonjour à tous et bienvenu sur Développement Facile.

Là c’est la deuxième partie du cours consacré au texte avec CSS 3. Donc dans le cours précédent vous avez commencé déjà à utiliser, à personnaliser l’affichage de votre texte, entre letter-spacing, word-spacing, la couleur, etc. Il faut savoir qu’en CSS on peut faire énormément d’effets visuels sur les textes, c’est pour ça qu’il y a une deuxième partie consacrée au texte avec CSS.

Définir l’interligne du texte

Vous pouvez même définir l’interligne d’un texte, les espaces entre les lignes d’un texte, donc avec ligne-height, c’est très pratique quand vous écrivez des blocs de textes, suivant votre site Internet, la police que vous utilisez, ça peut valoir le coup d’espacer un peu plus les différentes lignes d’un paragraphe pour un texte, utilisez line-height.

Je passe assez vite sur l’exemple, line-height 30 pixels, -3 pixels, vous verrez les différents exemples d’espace entre les lignes, des interlignes, maintenant j’imagine qu’avec l’ensemble des cours qu’il y a déjà eu sur le CSS l’HTML 5 vous commencez à maitriser ce langage, en tout cas les nouvelles balises, donc je vais passer assez vite sur les exemples.

Ajouter des espaces vides

Vous pouvez ajouter des espaces vides, il faut savoir que par défaut le langage HTML, ignore complètement les espaces, vous pouvez faire des sauts de lignes, des tonnes et des tonnes d’espaces dans votre code HTML, ils ne seront pas pris en compte, ils sont automatiquement supprimés. Par contre il existe une balise CSS qui permet justement de conserver ces espaces vides, et elle s’appelle white-space :pre.

Comment on l’utilise ? Tout simplement, rien de plus facile, vous définissez une classe CSS ou un identifiant CSS, vous choisissez votre sélecteur CSS finalement, white-space :pre et donc là ça va conserver les espaces vides, le Lorem Ipsum et j’ai rajouté simplement du faux texte avec plein d’espaces, faux texte, plein d’espace, et vous verrez que ces espaces seront conservés à l’affichage, et dès que vous allez enlever white-space :pre, les espaces seront supprimés lors de l’affichage de votre document HTML tout simplement.

Alignement horizontal d’un texte

Vous pouvez définir l’alignement de votre texte, avec text-align :justify donc que pour justifier le texte,
left pour aligner le texte à gauche,
center pour l’aligner à droite, pardon, right pour l’aligner à droite, excusez-moi,
center pour effectuer un texte centré,
auto ça va choisir l’alignement par défaut de votre texte, en fonction des autres balises CSS que vous avez définit, parce que vous pouvez utiliser une div avec un CSS prédéfini et dans cette div une autre div encore avec un CSS prédéfinit, etc.

Un exemple de code source avec le texte aligné à droite, text-align :right, et vous verrez que le lorem ispum ou simplement votre texte, au lieu d’être aligné à gauche comme on a l’habitude, il sera aligné à droite, donc ça va vous permettre de faire une mise en page de votre texte, grâce à text-align, centrer, justifié à droite, à gauche ou automatique.

Vous pouvez également définir l’alignement vertical de votre texte, avec vertical-align dans une ligne aligner, en haut, en bas, au milieu donc il y a différentes propriétés :
Baseline ça aligne le texte par rapport au bas de la ligne de texte,
Sub ça met le texte en indice,
Super ça met le texte en exposant,
Top ça aligne le texte par rapport au haut de l’élément parent, donc en haut de votre div si vous utilisez une div,
Middle ça l’aligne par rapport au milieu votre div,
Bottom ça l’aligne par rapport au bas.

C’est vraiment des propriétés CSS qu’il faut connaître, après une fois que vous les connaissez elles sont très faciles à utiliser donc là je vous ai mis un exemple de code source avec un texte en super, aligné au milieu Middle, et aligné en bas bottom, et vous verrez les trois champs texte Lorem Ipsum alignés différemment dans votre page web, tout simplement.

Définir la direction du texte

Vous pouvez définir la direction de votre texte, suivant les langues, nous les langues européennes, américaines, ça se lit de la gauche vers la droite, par contre les langues arabes ou chinoises ça se lit dans l’autre sens, de la droite vers la gauche, donc vous utilisez la balise direction : RTL (Right To Left) et LTR (Left To Right) tout simplement, par défaut ce sera affiché LTR mais si vous vous adressez à un autre public, chinois, ou autre, vous pourrez changer la direction d’affichage de votre texte grâce à la propriété de direction.

Là je vous ai mis un exemple, vous avez right un affichage à droite, et left un affichage à gauche. Left ou right.

Définir la hauteur et la largeur

Vous pouvez définir, bien évidemment, la hauteur et la largeur de vos éléments que ce soit des div, des images, des spams, des paragraphes, vous avez les propriétés de style, width pour la largeur, height pour la hauteur en pixel ou en pourcentage, comme vous préférez. Là j’ai défini des blocs, div texte 1, texte 2, avec une valeur de 150 pixels pour la div 1 et de 200 pixels pour la div 2, donc vous verrez quand vous allez réutiliser ce code source HTML, les deux div auront une taille différente pour afficher le texte Lorem Ipsum. Très pratique on l’utilise souvent pour définir soit en pourcentage, souvent en pourcentage l’avantage du pourcentage c’est que si l’utilisateur consulte votre site sur une tablette, sur un Smartphone, sur un écran d’ordinateur, ou sur une télé, les proportions d’affichage seront toujours respectées car vous avez choisi des pourcentages, que les pixels, si la résolution est en 1920×1080, en 450×640, 180×450, suivant le périphérique vous n’avez pas le même nombre de pixels, donc pensez à ça, définir les largeurs, les hauteurs en pourcentage.

Votre plan d’actions !

Maintenant vous avez vraiment de quoi faire avec vos textes, je vous ai montré énormément de propriétés, de possibilités avec CSS, donc retrouvez comme d’habitude un exemple de code source en téléchargement sous ce cours vidéo, si vous avez des questions, posez-les également sous la vidéo et moi, je vous dis à très bientôt sur Développement Facile.

 

[/ppmtoggle][/ppmaccordion]

Téléchargez le code source CSS3

Voici un exemple de code CSS3 pour définir la mise en forme de votre texte.

Téléchargement du code source Exemple avec CSS3 pour la mise en forme du texte

Cliquez ici pour télécharger le code source Exemple avec CSS3 pour la mise en forme du texte

Partagez vos astuces de textes avec CSS3

Utilisez la zone commentaires, pour partager vos astuces concernant la mise en forme de vos textes avec CSS3.

EXCLUSIF : Les 7 Secrets Révélés de JavaScript pour Créer VOS Applications — dès la semaine prochaine !

EXCLUSIF : La formation « JavaScript Facile » OFFERTE pour Créer VOS Applications — dès la semaine prochaine !

EXCLUSIF : Créez VOS Applications JavaScript — en moins de 7 jours grâce à notre formation OFFERTE « JavaScript Facile »

Que diriez-vous de Concevoir des Applications Mobiles Magnifiques — d’ici les 7 prochains jours ?

TÉLÉCHARGEZ : Les codes sources du livre « HTML5 / CSS3 » pour Créer VOS Applications Mobiles — d’ici les 7 prochains jours !

Cliquez ici pour tout recevoir >>