Texte CSS

Les attributs de texte CSS vous permettent de définir efficacement et facilement plusieurs styles de texte, tels que la couleur, l'alignement, l'espacement, la décoration, la transformation, etc.

Formater le texte avec CSS

CSS possède plusieurs attributs utilisés pour définir le style du texte. Ces attributs vous permettent de contrôler précisémentCaractère,Espace,Mot,Paragraphe等的视觉外观。

Vous pouvez définir les propriétés de texte suivantes pour l'élément :

Couleur du texte

La couleur du texte est définie par CSS colorDéfinition de l'attribut.En savoir plus sur color.

h1　{
　　　　color: #ff0000;
}
p　{
　　　　color: vert;
}

Alignement de texte

Latext-alignCet attribut est utilisé pour définir l'alignement horizontal du texte.

Les valeurs possibles de cet attribut sont : left, right, center, justify et inherit.

h1　{
　　　　text-align: center;
}
p　{
　　　　text-align: justifier;
}

Décoration de texte

Latext-decorationCet attribut est utilisé pour définir ou supprimer la décoration du texte.

Les valeurs possibles de cet attribut sont : none, underline, overline, line-through, blink et inherit. Vous devriez éviter d'utiliser cette valeur pour le texte de soulignement non-lien, sinon cela pourrait prêter à confusion aux visiteurs.

h1　{
　　　　text-decoration: overline;
}
h2　{
　　　　text-decoration: line;-through;
}
h3　{
　　　　text-decoration: underline;
}

Supprimer le soulignement par défaut des liens

Le text-L'attribut decoration est généralement utilisé pour supprimer le soulignement par défaut des liens hypertextes. Supprimer complètement le soulignement pourrait prêter à confusion aux visiteurs. Sauf si vous fournissez d'autres indices visuels pour le faire ressortir, tout en concevant le style du lien.

Par exemple, vous pouvez utiliser des points plutôt que des lignes droites pour souligner les liens.

a {
　　　　text-decoration: none;
　　　　border-bottom:　1px trait pointillé;
}

Conversion de texte

Le text-L'attribut transform est utilisé pour définir la casse du texte.

Il peut être utilisé pour définir le contenu texte en majuscules ou en minuscules, ou pour capitaliser la première lettre de chaque mot. Pour les valeurs possibles du texte-Les valeurs possibles de l'attribut transform sont : none, capitalize, uppercase, lowercase et inherit.

p.up {
　　　　text-transform: uppercase;
}
p.cap {
　　　　text-transform: lowercase;
}
p.low {
　　　　text-transform: lowercase;
}

Indentation de texte

Le text-L'attribut indent est utilisé pour définir l'indentation du premier texte de l'élément. Le text-Les valeurs possibles de l'attribut indent sont :Pourcentage（%），Longueurou inherit.

L'exemple suivant montre comment indentation de la première ligne d'un paragraphe.

p　{
　　　　text-indent:　100px;
}

Espace entre les mots

word-spacing est utilisé pour définir l'espacement entre les mots.

• L'espacement des caractères peut être affecté par l'alignement du texte. Voirtext-alignPropriétés.

• Conserver les espaces blancs, tous les caractères d'espace sont affectés par l'espacement des mots. Voir CSS white-spacePropriétés.

Le word-Les valeurs possibles de l'attribut spacing sont :length（Spécifiez l'espace entre les mots）normal et inherit.

p.one　{
　　　　word-spacing:　20px;
}
p.two　{
　　　　word-spacing:　20px;
　　　　text-align: justifier;
}
p.three　{
　　　　word-spacing:　20px;
　　　　white-space: pré;
}

Espace entre les caractères

Laletter-spacingL'attribut est utilisé pour définir l'espace supplémentaire entre les caractères de texte.

Les valeurs possibles de cet attribut sont :length（Spécifiez l'espace entre les caractères par défaut normal et l'espace supplémentaire à insérer entre les caractères）et inherit.

h1　{
　　　　letter-spacing:　-3px;
}
p　{
　　　　letter-spacing:　10px;
}

Espacement de ligne

Laline-heightL'attribut définit la hauteur d'une ligne de texte (également appeléLead）。

Les valeurs possibles de cet attribut sont :Pourcentage（%），Longueur,Nombre，normal et inherit.

p　{
　　　　line-height:　1.2;
}

Lorsque la valeur est un nombre, la hauteur de ligne est calculée en multipliant la taille de la police de l'élément par ce nombre. Les pourcentages sont par rapport à la taille de la police de l'élément.

Si line-La valeur de l'attribut height est supérieure àfont-sizeLa valeur de l'élément, cette différence (appelée,“Pré-avance”），et réparti uniformément en haut et en bas des bords de ligne in.

p　{
　　　　font-size:　14px;
　　　　line-height:　20px;
　　　　background-color: #f0e68c;
}

Pour en savoir plus sur les styles de texte, voirPolicesetTexte liéPropriétés.