CSS définir le contenu du texte

CSS est un langage de conception Web courant qui permet aux développeurs de contrôler plus facilement divers éléments des pages Web pour créer une variété d'effets visuels et d'expériences interactives. Parmi eux, CSS est très important pour définir le contenu du texte. Il peut nous aider à obtenir divers styles de texte et effets de mise en page. Cet article explique comment utiliser CSS pour définir le contenu du texte.

1. Police

La police est le paramètre le plus basique en matière de style de texte. CSS offre une variété d'options de configuration de police. Parmi eux, la méthode de configuration la plus basique consiste à utiliser l'attribut font-family pour spécifier le nom de la police, par exemple :

body {
    font-family: Arial, sans-serif;
}

Le code ci-dessus définit la police dans le corps de la page Web sur la police Arial ou sans-serif, si la police Arial est déjà installée sur l'ordinateur de l'utilisateur. Utilisez ensuite cette police, sinon utilisez la police sans empattement par défaut du système. Cette approche suffira dans la plupart des cas, mais si vous souhaitez un contrôle plus granulaire sur la police, vous pouvez utiliser d'autres propriétés.

L'attribut font-size peut spécifier la taille de la police, en utilisant des pixels, des pourcentages ou des em comme unité :

h1 {
    font-size: 32px;
}

Le code ci-dessus définit la taille de la police du titre h1 à 32 pixels. Si vous souhaitez que la taille de la police soit définie par rapport à la taille de l'élément parent, vous pouvez utiliser des pourcentages ou des ems comme unités :

p {
    font-size: 120%;
}

span {
    font-size: 1.2em;
}

Le code ci-dessus définit la taille de la police du paragraphe p à 120 % de la taille de l'élément parent, et celle de l'élément span la taille de la police est 1,2 fois la taille de l'élément parent.

En plus du nom et de la taille de la police, l'attribut font peut également spécifier l'épaisseur, l'italique et les variations de la police. Par exemple, l'attribut font-weight peut spécifier l'épaisseur de la police, qui peut être normale, grasse ou une valeur numérique (généralement 400 ou 700) :

h2 {
    font-weight: bold;
}

Le code ci-dessus définit la police du titre h2 en gras. Si vous souhaitez définir la police italique, vous pouvez utiliser l'attribut font-style :

em {
    font-style: italic;
}

Le code ci-dessus définit la police à l'intérieur de l'élément em en italique.

2. Couleur du texte et couleur d'arrière-plan

La couleur du texte et la couleur d'arrière-plan sont également des paramètres relativement basiques dans le style de texte. CSS fournit deux attributs, color et background-color, pour l'implémentation.

L'attribut color peut spécifier la couleur du texte, vous pouvez utiliser le nom de la couleur, la valeur RVB hexadécimale ou la fonction RVB :

h3 {
    color: red;
}

p {
    color: #333333;
}

a {
    color: rgb(255, 0, 0);
}

Le code ci-dessus définit la couleur du texte du titre h3 sur rouge, la couleur du texte du paragraphe p sur gris foncé, a La couleur du texte du lien est définie sur rouge.

De même, l'attribut background-color peut spécifier la couleur d'arrière-plan, en utilisant un nom de couleur, une valeur RVB hexadécimale ou une fonction RVB :

footer {
    background-color: #f2f2f2;
}

Le code ci-dessus définit la couleur d'arrière-plan de l'élément de pied de page sur gris clair.

3. Alignement du texte et hauteur de ligne

L'alignement du texte et la hauteur de ligne sont également des paramètres importants dans le style de texte, qui peuvent être obtenus grâce aux deux attributs text-align et line-height.

text-align peut contrôler l'alignement horizontal du texte, et peut prendre des valeurs de gauche, de centre, de droite ou justifier :

h4 {
    text-align: center;
}

Le code ci-dessus aligne le texte du titre h4 horizontalement et centralement.

line-height peut contrôler la hauteur de la ligne de texte. Vous pouvez utiliser des valeurs numériques ou des pourcentages comme unités, ou vous pouvez utiliser des mots-clés tels que normal et hériter :

p {
    line-height: 1.5;
}

Le code ci-dessus définit la hauteur de ligne du paragraphe p sur 1,5 fois la taille de la police.

4. Décoration et ombre du texte

CSS peut également ajouter des effets de décoration et d'ombre au texte grâce aux propriétés text-decoration et text-shadow.

text-decoration peut spécifier la décoration du texte, telle que souligné, barré, surligné, etc. :

a {
    text-decoration: underline;
}

s {
    text-decoration: line-through;
}

u {
    text-decoration: overline;
}

Le code ci-dessus soulignera le lien a, ajoutera du barré au texte dans l'élément s et surlignera le texte dans l'élément u. élément Fil.

text-shadow peut ajouter un effet d'ombre au texte, et vous pouvez spécifier des paramètres tels que la couleur, la position et le rayon de flou de l'ombre :

h5 {
    text-shadow: 2px 2px 5px #888888;
}

Le code ci-dessus ajoute un effet d'ombre au texte du titre h5. La couleur de l'ombre est #888888 et la position est (2px, 2px), avec un rayon de flou de 5px.

Résumé

CSS offre de nombreuses façons de définir le contenu du texte, notamment la police, la couleur du texte et la couleur d'arrière-plan, l'alignement du texte et la hauteur des lignes, la décoration et l'ombre du texte, etc. Dans le développement réel, les développeurs peuvent choisir la méthode de paramétrage appropriée en fonction des besoins pour obtenir l'effet de texte souhaité.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!