Toutes les techniques pour personnaliser votre texte avec CSS3 partie 2

Et voici la suite ducours prcdent, toujours consacr la mise en forme de vos textes avecCSS3. Tout est dans le cours vido ci-dessous.

jQLeadBrite("#leadplayer_video_element_53256F2BA5F36").leadplayer(false, "eyJnYSI6dHJ1ZSwib3ZlcmxheSI6ZmFsc2UsInBvd2VyZWRfYnkiOmZhbHNlLCJwb3dlcmVkX2J5X2xpbmsiOiJodHRwOlwvXC93d3cucHJvZ3JhbW1hdGlvbi1mYWNpbGUuY29tXC8iLCJjb2xvcjEiOiIjRjVCQjBDIiwiY29sb3IyIjoiIzE3OThDRCIsImNvbG9yMyI6IiNGNUJCMEMiLCJ0eHRfc3VibWl0IjoiUkVDRVZPSVIgISIsInR4dF9wbGF5IjoiTGVjdHVyZSIsInR4dF9lbWwiOiJSZW5zZWlnbmV6IHZvdHJlIEVtYWlsLi4uIiwidHh0X25hbWUiOiJSZW5zZWlnbmV6IHZvdHJlIFByXHUwMGU5bm9tLi4uIiwidHh0X2ludmFsaWRfZW1sIjoiU1ZQLCByZW5zZWlnbmV6IHZvdHJlIEVtYWlsLi4uIiwidHh0X2ludmFsaWRfbmFtZSI6IlNWUCwgcmVuc2VpZ25leiB2b3RyZSBQclx1MDBlOW5vbS4uLiIsImxwX3NvdXJjZSI6IldQIFBsdWdpbiAxLjQuMi4xIFVubGltaXRlZCIsImlkIjoiNTMyNTZGMkJBNUYzNiIsIndpZHRoIjo5NDAsImhlaWdodCI6NTI5LCJ0aHVtYm5haWwiOiIiLCJ0aXRsZSI6IlRvdXRlcyBsZXMgdGVjaG5pcXVlcyBwb3VyIHBlcnNvbm5hbGlzZXIgdm90cmUgdGV4dGUgYXZlYyBDU1MzIHBhcnRpZSAyIiwiZGVzY3JpcHRpb24iOiJUb3V0ZXMgbGVzIHRlY2huaXF1ZXMgcG91ciBwZXJzb25uYWxpc2VyIHZvdHJlIHRleHRlIGF2ZWMgQ1NTMyBwYXJ0aWUgMiIsImF1dG9wbGF5IjpmYWxzZSwic2hvd190aW1lbGluZSI6dHJ1ZSwiZW5hYmxlX2hkIjp0cnVlLCJvcHQiOmZhbHNlLCJjdGEiOnsidGltZSI6ImVuZCIsImJ0ZXh0IjoiRGV2ZW5leiBQcm9mZXNzaW9ubmVsIEhUTUw1IFwvIENTUzMgZXQgQ3JcdTAwZTlleiBkZXMgQXBwbGljYXRpb25zIEluY3JveWFibGVzICEiLCJ1cmwiOiJodHRwOlwvXC93d3cucHJvZ3JhbW1hdGlvbi1mYWNpbGUuY29tXC9odG1sNWNzczMiLCJhdXRvX2ZvbGxvdyI6ZmFsc2UsIm5ld193aW5kb3ciOmZhbHNlfSwieW0iOiI5X0xrLUtWcC1YVSJ9");

Afficher le texte de la vidoToutes les techniques pour personnaliser votre texte avec CSS3 partie 2 Bonjour tous etbienvenu sur Dveloppement Facile. L c'est la deuxime partie du cours consacr au texteavec CSS 3. Donc dans le cours prcdent vous avez commenc dj utiliser, personnaliser l'affichage de votre texte, entre letter-spacing, word-spacing, la couleur, etc. Il fautsavoir qu'en CSS on peut faire normment d'effets visuels sur les textes, c'est pour a qu'il y aune deuxime partie consacre au texte avec CSS.Dfinir l'interligne du texte Vous pouvezmme dfinir l'interligne d'un texte, les espaces entre les lignes d'un texte, donc avec ligne-height, c'est trs pratique quand vous crivez des blocs de textes, suivant votre site Internet, lapolice que vous utilisez, a peut valoir le coup d'espacer un peu plus les diffrentes lignes d'unparagraphe pour un texte, utilisez line-height. Je passe assez vite sur l'exemple, line-height 30pixels, -3 pixels, vous verrez les diffrents exemples d'espace entre les lignes, des interlignes,maintenant j'imagine qu'avec l'ensemble des cours qu'il y a dj eu sur le CSS l'HTML 5 vouscommencez maitriser ce langage, en tout cas les nouvelles balises, donc je vais passer assezvite sur les exemples.Ajouter des espaces vides Vous pouvez ajouter des espaces vides, ilfaut savoir que par dfaut le langage HTML, ignore compltement les espaces, vous pouvez

1 / 3

faire des sauts de lignes, des tonnes et des tonnes d'espaces dans votre code HTML, ils neseront pas pris en compte, ils sont automatiquement supprims. Par contre il existe une baliseCSS 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 dfinissez une classe CSS ouun identifiant CSS, vous choisissez votre slecteur CSS finalement, white-space :pre et donc la va conserver les espaces vides, le Lorem Ipsum et j'ai rajout simplement du faux texte avecplein d'espaces, faux texte, plein d'espace, et vous verrez que ces espaces seront conservs l'affichage, et ds que vous allez enlever white-space :pre, les espaces seront supprims lorsde l'affichage de votre document HTML tout simplement.Alignement horizontal d'un texteVous pouvez dfinir l'alignement de votre texte, avec text-align :justify donc que pour justifier letexte, left pour aligner le texte gauche, center pour l'aligner droite, pardon, right pourl'aligner droite, excusez-moi, center pour effectuer un texte centr, auto a va choisirl'alignement par dfaut de votre texte, en fonction des autres balises CSS que vous avez dfinit,parce que vous pouvez utiliser une div avec un CSS prdfini et dans cette div une autre divencore avec un CSS prdfinit, 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'trealign gauche comme on a l'habitude, il sera align droite, donc a va vous permettre defaire une mise en page de votre texte, grce text-align, centrer, justifi droite, gauche ouautomatique. Vous pouvez galement dfinir l'alignement vertical de votre texte, avec vertical-align dans une ligne aligner, en haut, en bas, au milieu donc il y a diffrentes proprits :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'lmentparent, donc en haut de votre div si vous utilisez une div, Middle a l'aligne par rapport au milieuvotre div, Bottom a l'aligne par rapport au bas. C'est vraiment des proprits CSS qu'il fautconnatre, aprs une fois que vous les connaissez elles sont trs faciles utiliser donc l jevous ai mis un exemple de code source avec un texte en super, align au milieu Middle, etalign en bas bottom, et vous verrez les trois champs texte Lorem Ipsum aligns diffremmentdans votre page web, tout simplement.Dfinir la direction du texte Vous pouvez dfinir ladirection de votre texte, suivant les langues, nous les langues europennes, amricaines, a selit de la gauche vers la droite, par contre les langues arabes ou chinoises a se lit dans l'autresens, de la droite vers la gauche, donc vous utilisez la balise direction : RTL (Right To Left) etLTR (Left To Right) tout simplement, par dfaut ce sera affich LTR mais si vous vous adressez un autre public, chinois, ou autre, vous pourrez changer la direction d'affichage de votre textegrce la proprit de direction. L je vous ai mis un exemple, vous avez right un affichage droite, et left un affichage gauche. Left ou right.Dfinir la hauteur et la largeur Vous pouvezdfinir, bien videmment, la hauteur et la largeur de vos lments que ce soit des div, desimages, des spams, des paragraphes, vous avez les proprits de style, width pour la largeur,height pour la hauteur en pixel ou en pourcentage, comme vous prfrez. L j'ai dfini desblocs, div texte 1, texte 2, avec une valeur de 150 pixels pour la div 1 et de 200 pixels pour ladiv 2, donc vous verrez quand vous allez rutiliser ce code source HTML, les deux div aurontune taille diffrente pour afficher le texte Lorem Ipsum. Trs pratique on l'utilise souvent pourdfinir soit en pourcentage, souvent en pourcentage l'avantage du pourcentage c'est que sil'utilisateur consulte votre site sur une tablette, sur un Smartphone, sur un cran d'ordinateur,ou sur une tl, les proportions d'affichage seront toujours respectes car vous avez choisi despourcentages, que les pixels, si la rsolution est en 1920x1080, en 450x640, 180x450, suivantle priphrique vous n'avez pas le mme nombre de pixels, donc pensez a, dfinir les

2 / 3

largeurs, les hauteurs en pourcentage.Votre plan d'actions ! Maintenant vous avez vraimentde quoi faire avec vos textes, je vous ai montr normment de proprits, de possibilits avecCSS, donc retrouvez comme d'habitude un exemple de code source en tlchargement sous cecours vido, si vous avez des questions, posez-les galement sous la vido et moi, je vous dis trs bientt sur Dveloppement Facile.

Tlchargez le code source CSS3Voici un exemple de code CSS3 pour dfinir la mise en forme de votre texte.

Downloads

Exemple avec CSS3 pour la mise en forme du texte

Code CSS3 pour dfinir la mise en forme de vos textes.

Partagez vos astuces de textes avec CSS3Utilisez la zone commentaires, pour partager vos astuces concernant la mise en forme de vostextes avec CSS3.Toutes les techniques pour personnaliser votre texte avec CSS3 partie 2

Powered by TCPDF (www.tcpdf.org)

3 / 3