le CSS est conçu pour formater les sites Web tandis que le HTML a été pensé pour créer la structure des sites Web. Parmi les mises en forme possibles du CSS, on retrouve celle du texte.

Avec plus de 250 propriétés, l’apparence d’un site Web peut être extrêmement personnalisée grâce au CSS. Certaines de ces propriétés affectent l’apparence des textes, et celles-ci, du moins les plus courantes, nous les découvrirons et apprendrons à les utiliser dans cet article.

Soumettez gratuitement votre projet à Codeur.com, recevez quinze devis et choisissez le développeur web idéal.

Trouver un développeur Web

Améliorez la conception de votre site Web en toute simplicité

La mise en page Web peut parfois être complexe. Mise en forme du texte, images, arrière-plans, responsive design … il y a de nombreux éléments à maîtriser pour créer une page esthétique et fonctionnelle.

Pour éviter de perdre du temps et obtenir un résultat harmonieux qui répond aux bonnes pratiques web, confiez la création de votre site internet à des professionnels. Décrivez votre projet sur Codeur.com et recevez des devis gratuits de développeur web indépendant, Sans obligation.

Obtenez des devis (gratuits)

Changer la couleur d’un texte: couleur

Commençons par une propriété simple qui peut être utilisée sur presque tous les sites Web, la propriété CSS Couleur. Cette propriété permet de changer la couleur d’un texte grâce à des mots clés prédéfinis, une valeur hexadécimale, en RVB ou RVBA, et enfin on peut également utiliser les valeurs données en HSL ou HSLA.

En plus de changer la couleur du texte, Couleur permet de gérer la transparence de ce dernier grâce à un canal alpha qui permet de composer avec un fond.

Valeur possible

Exemple

Mot-clé «couleur actuelle»
color: currentcolor;
Mot-clé pour une couleur définie
color: red;
Hexadécimal
color: #3F7AB5;
Hexadécimal avec transparence
color: #3F7AB5aa;
RVB
color: rgb(80, 205, 126);
RGBA (transparence)
color: rgba(80, 205, 126, 0.7);
HSL
color: hsl(50, 100%, 30%, 0.5);
HSL (transparence)
color: hsla(50, 100%, 30%, 0.5);
Recherchez-vous des idées de couleurs adaptées à votre site Web? Découvrez les palettes de couleurs modernes et dynamiques ci-dessous PaletteDeCouleur.net et copiez gratuitement le code hexadécimal de vos couleurs préférées pour l’intégrer dans votre CSS.

Outil gratuit de Palettedecouleur.net

Changer la police d’un texte: famille de polices

La propriété Famille de polices Avec cette option, vous pouvez changer la police de certains textes. Tout ce que vous avez à faire est de fournir le nom de la police à utiliser entre guillemets.

Il est possible de spécifier plusieurs polices l’une après l’autre. Donc, si la première police de la liste ne peut pas être utilisée, la suivante sera utilisée, et ainsi de suite jusqu’à ce qu’une police de la liste puisse être utilisée.

Si aucune des polices ne peut être utilisée pour le texte spécifié, la police par défaut du site sera utilisée. Cette police standard peut être définie directement dans la liste déclarée des polices de la famille de polices en utilisant l’un des noms de famille génériques disponibles en CSS.

Ces noms de famille génériques sont des polices de secours afin de conserver la mise en forme souhaitée qui représente l’intention du site. Dans les noms de famille génériques, nous trouvons:

  • empattement
  • sans empattement
  • Monospace
  • italique
  • fantaisie
  • système-ui
  • mathématiques
  • Emoji
  • Catch chant

Chacun de ces noms de famille génériques a sa propre spécificité, et parfois un utilitaire spécifique tel que « Emoji », qui est spécifiquement conçu pour afficher des emoji.

Cependant, avant de déclarer un nom de famille générique dans votre famille de polices, vous pouvez spécifier une police «Web Safe». Les polices «Web Safe» sont des polices préinstallées sur tous les navigateurs et appareils qui accèdent à Internet. Ils sont universels et devraient être sûrs à utiliser si vous avez déclaré une police personnalisée avant cette police « Web Safe » que le Navigateur ne reconnaîtra pas.

Voici quelques polices « Web Safe » que vous pouvez utiliser:

  • Arial (sans empattement)
  • Calibre (sans empattement)
  • Helvetica (sans empattement)
  • Segoe UI (sans empattement)
  • Tahoma (sans empattement)
  • Trebuchet MS (sans empattement)
  • Verdana (sans empattement)
  • Garamond (empattement)
  • Géorgie (empattement)
  • Times New Roman (empattement)
  • Courier New (Monospace)
  • Brush Script MT (italique)

Alors que les polices personnalisées doivent être entre guillemets, les noms de famille génériques et les polices Web Safe ne nécessitent pas de guillemets dans leur déclaration.

Enfin, regardons des exemples de déclaration d’une propriété CSS. Famille de polices ::

font-family: sans-serif;
font-family: Courier New, monospace;
font-family: "Fira Sans", Arial, sans-serif;

Changer la taille d’un texte: taille de la police

Avec la propriété CSS taille de police Vous pouvez influencer la taille de vos textes. Pour cela, vous pouvez utiliser des mots-clés définis ou des valeurs définies par l’utilisateur dans différentes unités.

Les mots-clés définis sont divisés en deux familles: les tailles absolues et les tailles relatives.

Une taille absolue est un mot-clé qui donne une valeur absolue basée sur la taille par défaut de l’utilisateur (c’est-à-dire moyenne). Il existe au total 7 mots-clés pour les quantités absolues, à savoir:

  • xx-petit;
  • x-petit;
  • petit;
  • Moyen;
  • grande;
  • x-large;
  • xx-large;

Une taille relative est définie en fonction de la taille de son parent. Avec le mot-clé « plus grand », le texte a une taille agrandie par rapport à celle du texte superordonné, et inversement avec le mot-clé « plus petit », la taille est réduite.

Vous pouvez ensuite définir une quantité en fonction d’une valeur numérique définie par l’utilisateur et d’une unité sélectionnée. Il y a plusieurs unités pour définir une taille de texte, Voici quelques-uns:

  • px
  • Ex
  • dans le
  • rem
  • % (Pourcentage)

L’unité « px » pour « pixel » permet de définir une taille statique et absolue totalement indépendante des autres éléments superordonnés, subordonnés ou racine.

Les unités « ex », « em » ou « % » font référence à la taille de l’élément parent. Ainsi, une taille définie à « 50% » pour un élément dont l’élément parent a une taille de « 20px » représente une taille pour l’élément cible de « 10px ».

L’unité « rem » fait référence à la taille de la racine HTML, l’élément « « . Alors si le pour ça Élément avec une taille définie de 16 pixels, un élément du site avec la taille « 1rem » a une taille qui est la même que celle du Éléments, c’est-à-dire « 16 pixels ». Un élément avec une taille de « 0.75rem » finira par être « 12px » avec le précédent pour le -Taille définie de l’élément.

Voici quelques exemples de définition de « taille de police »:

font-size: 18px;
font-size: 1.2em;
font-size: 0.8rem;
font-size: 80%;

Trouvez le meilleur développeur Web sur Codeur.com

Vos premiers devis en 15 minutes

Gratuit et sans engagement

Déjà plus de 75000 clients

Trouvez un pigiste

Définir la pondération d’un texte: taille de la police

Le poids d’un texte lui donne l’apparence d’un texte gras ou, au contraire, d’un texte fin. Cette propriété est définie par des mots-clés ou des valeurs numériques.

Tout comme pour la taille de la police, il existe des mots clés pour définir la teneur en graisse absolue ou relative.

Les mots clés pour la teneur relative en matières grasses sont «plus audacieux» et «plus léger».

Les éléments qui ont la propriété font-weight avec la valeur « Bolder » sont plus audacieux que leur parent, et inversement, leurs caractères avec « plus clair » sont affichés avec moins de poids que le parent.

Les valeurs numériques et les valeurs en gras absolues sont liées afin que nous ayons les associations suivantes:

Valeur numérique Mot-clé prédéfini
100 mince
200 Lumière supplémentaire
300 lumière
400 normal ou régulier
500 moyen
600 moitié gras
700 audacieux
800 graisse supplémentaire
900 noir

Toutes les polices ne sont pas disponibles à tous les grammages. Certaines polices ont été créées en utilisant uniquement des poids «normaux» et «gras».

Si vous souhaitez afficher toutes les valeurs en gras dans une seule police, « Montserrat » (Google Font) est la police qu’il vous faut! Cette police est très lourde car elle possède les 9 niveaux fournis en CSS.

La valeur standard de la teneur en matière grasse d’un texte est « normale » ou en valeur numérique « 400 ».

Voici quelques exemples d’utilisation de la propriété font-weight:

font-weight: 200;
font-weight: extra bold;
font-weight: lighter;

Changer la forme d’un texte: style de police

Propriété CSS Le style de police Avec cette option, vous pouvez donner à un texte la forme « italique » ou « oblique ».
Cela ne fonctionne qu’avec des mots-clés prédéfinis:

  • « Normal » pour une forme normale
  • « Italique » pour la police italique
  • « Oblique » pour une forme oblique

Pour utiliser la propriété pour chaque valeur:

font-style: normal;
font-style: italic;
font-style: oblique;

La valeur « skew » peut prendre un deuxième paramètre, à savoir l’inclinaison du texte. Donc, si vous souhaitez écrire du texte incliné à un angle de 30 degrés, définissez la propriété « Style de police » comme suit:

font-style: oblique 30deg;

Définir l’alignement d’un texte: Alignement du texte

Comme pour les logiciels de traitement de texte, CSS peut également définir que le texte est aligné à gauche ou à droite, qu’il soit centré ou aligné.

La propriété CSS qui permet cela est Alignement du texte et 4 valeurs prédéfinies différentes peuvent être prises qui correspondent aux orientations susmentionnées.

Les mappages de mots clés et de ciblage sont les suivants:

  • « Liens » pour l’alignement à gauche
  • « Droite » pour un alignement correct
  • « Milieu » pour un texte centré
  • « Justifier » pour un texte motivé

Cela vous donne les options suivantes pour l’alignement du texte:

text-align: left;
text-align: right;
text-align: center;
text-align: justify;

Conclusion

CSS offre de nombreuses façons de mettre en forme le texte sur votre site Web ou votre application Web. Dans cet article, nous avons vu les propriétés les plus courantes et les plus couramment utilisées dans CSS, mais il existe une variété d’autres propriétés. Trouve-la dans cet autre tutoriel !

Si la mise en forme de vos textes n’est pas une tâche facile pour vous, n’hésitez pas Publier une annonce gratuite sur Codeur.com pour trouver rapidement l’aide d’un développeur Web indépendant sur le formatage de votre site Web.



Source link

Recent Posts