Le CSS permet dans sa globalité de créer le « design » d’un site ou application web tandis que le HTML lui s’occupe de l’implémentation de la structure du site. Parmi les diverses possibilités de mise en forme d’un site web, il existe celles de formatage des textes.
Dans un premier article, nous avions vu quelques principales propriétés de formatage du texte en CSS. Nous continuons dans cette voie avec cet article pour vous présenter les 5 dernières principales propriétés qui vous permettront de mettre en forme vos textes.
Sommaire :
Mise en forme du texte, des images, des arrières-plans, design responsif… créer un site esthétique et fonctionnel peut parfois se révéler difficile et requiert de nombreuses connaissances en développement web.
Codeur.com facilite votre mise en relation avec des développeurs web freelances qui sauront mettre en forme votre site de manière professionnelle, dans le respect des bonnes pratiques et suivant les dernières tendances web. Décrivez votre projet en quelques lignes pour recevoir rapidement les devis de professionnels, gratuitement.
Si vous avez besoin d’augmenter l’espacement entre deux lignes, la propriété CSS « line-height » sera la propriété dont vous allez avoir besoin. « line-height » permet de définir la hauteur de la ligne (boîte) d’un texte.
La propriété « line-height » peut prendre un mot-clé défini pour valeur ou une valeur numérique.
Une valeur numérique pourra avoir une unité ou bien ne pas en avoir. Dans le cas où la valeur n’est pas accompagnée d’une unité, telle que line-height: 2.5; par exemple, alors ce nombre représente un facteur multiplicateur relative à la taille de la police active sur l’élément.
Toute unité existante peut être utilisée pour définir une valeur numérique, que l’unité soit absolue (cm, mm, pt,..) ou relative (em, pourcentage « % », …).
Il existe un seul mot-clé défini pouvant être utilisé pour « line-height » qui est « normal ». La valeur « normal » appliquera une valeur numérique (généralement de 1.2) dépendante de l’agent utilisateur du navigateur web utilisé.
Ainsi, vous pourrez renseigner la propriété « line-height » à un élément comme dans ces exemples :
line-height: normal;line-height: 2.5;line-height: 2em;line-height: 130%;
Souvent dans la présentation d’un texte, vous allez avoir besoin de souligner une partie de ce dernier, c’est grâce à la propriété CSS « text-decoration » que vous allez pouvoir réaliser cette mise en forme.
Plus précisément, « text-decoration » permet d’ajouter une ligne sous, sur ou à travers un texte, de modifier la couleur de la ligne et son apparence.
En réalité, « text-decoration » est en fait la propriété raccourcie de 3 autres propriétés qui sont :
Vous pouvez utiliser ces 3 propriétés indépendamment des autres et à la place de « text-decoration » si vous le souhaitez car elles utilisent les mêmes valeurs et mots-clés que ceux que nous allons voir.
Le premier mot-clé défini que nous traiterons ici est « none » qui permet de supprimer toute décoration donnée à un texte.
Ainsi l’ensemble text-decoration: none; sur un élément cible supprimera toutes les décorations qui auront pu lui être affectées.
Si vous souhaitez supprimer une décoration spécifique, le mot-clé « none » fonctionne aussi pour les propriétés « text-decoration-line », « text-decoration-color », « text-decoration-style ».
Comme vu précédemment, vous pouvez grâce à « text-decoration » ou « text-decoration-line » ajouter une ligne sous, sur ou à travers un texte. Ainsi vous ajouterez les mots-clés suivants pour ajouter une ligne :
Ces trois mots-clés peuvent être utilisés seuls ou ensembles. Voici quelques exemples d’utilisations possibles :
text-decoration: underline;text-decoration-line: underline overline;text-decoration-line: overline underline line-through;Dans le premier cas vous aurez un texte souligné, dans le second un texte souligné et avec une ligne au-dessus puis dans le troisième et dernier exemple vous aurez un texte avec une ligne au-dessus, souligné et barré.
Une fois que vous aurez ajouté une ligne à un texte vous pourrez en changer la couleur grâce à « text-decoration » ou « text-decoration-color ».
Comme toute propriété CSS gérant la couleur, « text-decoration » peut être utilisée avec des mots-clés de couleur ou avec les unités de couleurs hexadécimales, rgb, rgba, hsl et hsla.
Nous ne détaillerons pas le fonctionnement de la colorisation en CSS mais voici cependant quelques exemples de modification de la couleur de la ligne avec text-decoration :
text-decoration: blue;text-decoration: #95ab73;text-decoration: rgb(168, 120, 80);text-decoration: hsl(50, 90%, 60%);text-decoration: currentColor;text-decoration: transparent;Pour finir, vous allez pouvoir modifier l’apparence de la ligne ajoutée avec « text-decoration » ou « text-decoration-style ».
Simple d’utilisation, vous allez avoir 5 mots-clés différents possibles pour cette propriété. Ces mots-clés sont les suivants :
Maintenant que vous avez vu les possibilités avec « text-decoration » ou chaque propriété dont elle est le raccourci, voici quelques exemples d’utilisation de cette propriété :
text-decoration: overline;text-decoration: underline dashed;text-decoration: underline double red;text-decoration: #95ef98 underline wavy;text-decoration: blue solid underline line-through;La propriété « text-transform » permet de définir la manière d’utiliser les lettres capitales d’un texte cible. Ainsi vous allez pouvoir déterminer si un texte doit être écrit uniquement en majuscules, minuscules ou que chaque mot débute par une lettre capitale.
Les valeurs possibles pour « text-transform » sont les suivantes :
text-transform: none;text-transform: capitalize;text-transform: uppercase;text-transform: lowercase;text-transform: full-width;text-transform: full-size-kana;« none » permet de supprimer toute capitalisation d’un texte.
« capitalize » affichera pour chaque mot sa première lettre en capitale.
« uppercase » permet de transformer tous les caractères d’un texte en capitales.
« lowercase » effectuera l’opération inverse de « uppercase » en transformant tous les caractères d’un texte en minuscules.
« full-width » va forcer l’écriture dans un carré de chaque caractère d’un texte permettant ainsi de les aligner avec des scripts d’Asie Orientale (chinois ou japonais par exemple).
« full-size-kana » sera en général utilisée pour les annotations Ruby (qui servent à afficher la prononciation des caractères d’Asie Orientale). Ce mot-clé va convertir les caractères Kana de petite taille en grande taille pour compenser les problèmes de lisibilité des tailles de police utilisées pour le Ruby.
Très souvent utilisées en CSS, les ombres permettent de donner du relief à votre site web. Lors de la mise en forme d’un texte vous pouvez aussi lui attribuer une ombre grâce à la propriété « text-shadow ».
Cette propriété fonctionne avec 2 valeurs obligatoires et 2 facultatives.
Les valeurs obligatoires sont les décalages de l’ombre sur les axes « x » et « y ». Un décalage est la distance de l’ombre sur un axe défini par rapport au texte et est défini par des valeurs numériques. Ainsi, un décalage de « 5px » sur l’axe « y » fera descendre l’ombre de 5 pixels sous le texte.
Les valeurs facultatives sont la couleur de l’ombre et sa valeur de flou.
La couleur de l’ombre peut être définie par les mots-clés de couleur ou avec les unités de couleurs habituellement utilisés en CSS.
Le flou de l’ombre est lui défini par une valeur numérique et une unité CSS (px, em, %, pt, cm, …). Une valeur haute de flou permettra d’avoir un flou important pour une ombre plus large et plus légère. Par défaut, le flou a pour valeur 0 si vous ne le redéfinissez pas.
Les valeurs de « text-shadow » pourront être définis de la sorte : « couleur décalage-x décalage-y flou » ou « décalage-x décalage-y flou couleur ». Les valeurs « couleur » et « flou » pourront ne pas apparaître puisqu’ils sont facultatifs.
Voici quelques exemples d’utilisation de « text-shadow » :
text-shadow: 2px 2px 4px blue;text-shadow: #ea9b38 2px 0 12px;text-shadow: 4px 3px rgba(200, 150, 60, 0.8);
Dans une première partie de cet article nous avons vu la propriété « line-height », cette propriété fait partie d’un ensemble de propriétés en liens avec l’espacement de textes en CSS. D’autres propriétés similaires permettent de créer des espaces entre les mots ou lettres d’un texte.
Toutes ces propriétés utilisent des valeurs numériques pour définir un espace selon leur utilité. Sans rentrer dans les détails de chaque propriété, voici les autres propriétés existantes pour formater les espacements d’un texte :
Voici quelques exemples d’utilisation pour les propriétés vues précédemment :
text-indent: 30px;letter-spacing: 4px;letter-spacing: -4px;word-spacing: 7px;word-spacing: -5px;
Comme vous avez pu le constater, le CSS permet une mise en forme complète des textes. Tout ce que vous pourriez avoir l’habitude de faire sur un logiciel de traitement de texte peut être reproduire sur votre site web et même plus grâce à la richesse du CSS.
Cependant, la mise en forme des textes en CSS nécessite l’apprentissage d’un large ensemble de propriétés et mots-clés pour en maitriser toute la richesse. N’hésitez donc pas à poster une annonce gratuite sur Codeur.com pour trouver rapidement un freelance qui pourra vous aider à mettre en forme votre site.