Exemple de partage de code de six styles de texte très utiles en CSS

Mots précédents

Le style de texte CSS est une modification de style relative au contenu. Car dans la relation en cascade, le contenu est supérieur à l’arrière-plan. Le style du texte est donc relativement plus important. Certaines personnes ne comprennent pas très bien la différence entre les styles de texte et de police. En termes simples, le texte est un contenu et les polices sont utilisées pour afficher ce contenu. Cet article présentera en détail les styles liés au texte

Indentation de première ligne

Définition

L'indentation de première ligne consiste à mettre en retrait la première ligne d'un paragraphe, ce qui est un effet de formatage de texte courant. Généralement, lors de l'écriture du chinois, il y a deux espaces au début, semblables à ceci

[Note] Cet attribut peut être une valeur négative

text-indent

Valeur : hériter

Valeur initiale : 0

S'applique à : éléments de niveau bloc ( y compris le bloc et le bloc en ligne)

Héritage : Oui

Pourcentage : Par rapport à la largeur du bloc contenant

Appliquer

[Retrait suspendu]

p{
    width: 200px;
    border: 1px solid black;
    text-indent: -1em;//关键代码
    padding-left: 1em;//关键代码
}

[Lettre]

p{
    width: 200px;
    border: 1px solid black;
    text-indent: 0.5em;
}
p:first-letter{
    font-size: 30px;
    float: left;
}

Alignement horizontal

Définition

L'alignement horizontal est l'alignement horizontal qui affecte le texte dans un élément

text-align

Valeur : gauche | centre | droite | justifier | hériter

Valeur initiale : gauche

S'applique aux éléments de niveau bloc (y compris le bloc et le bloc en ligne)

Héritage : Oui

Alignement

Lorsque l'alignement horizontal est justifié, l'espacement des mots peut être ajusté pour que le texte soit sur l'ensemble ligne Posez-le simplement. Si vous spécifiez une valeur de longueur pour l'espacement des lettres, l'espacement des lettres ne sera pas affecté par la justification à moins que la valeur d'espacement des lettres ne soit normale

Compatible avec IE

Pour le navigateur IE7, l'utilisation de text-align modifiera non seulement l'alignement horizontal du texte, mais également l'alignement horizontal des éléments descendants au niveau du bloc

.box{
    width: 200px;
    height: 200px;
    background-color: pink;
    border: 1px solid black;
    text-align: right;
}    .in{
    height: 100px;
    width: 100px;
    background-color: lightgreen;
}

<p class="box">
    <p class="in">测试文字</p></p>

Espacement des mots

L'espacement des caractères fait référence à l'espacement des mots, utilisé pour définir l'espacement du texte ou des mots entre. En fait, "mot" représente une chaîne de caractères autres que des espaces, entourée d'une sorte de caractères d'espacement

[Note] Les mots sont séparés par des espaces, et l'espacement entre les mots = espacement des mots + taille de l'espace

[Remarque] L'espacement des mots peut être négatif

espacement des mots

Valeur : 🎜> Valeur initiale : normal (la valeur par défaut est 0)

S'applique à : tous les éléments

Héritage : Oui

espacement des lettres

L'espacement des lettres fait référence à l'espacement des caractères

[Remarque] L'espacement des lettres peut être des valeurs négatives

espacement des lettres

Valeur : < ; length> | normal | hériter

Valeur initiale : normal (la valeur par défaut est 0)

S'applique à : tous les éléments

Héritage : Oui

Text-transform

La conversion de texte est utilisée pour gérer la conversion de la casse anglaise

text-transform

Valeur : majuscule (toutes en majuscules) | minuscule (tout en minuscules) | majuscule (mettre la première lettre en majuscule) | aucun | hériter

Valeur initiale : aucun

S'applique à : tous les éléments

Héritage : oui 🎜>

Modification du texte

Définition

La modification du texte est utilisée pour fournir des lignes décoratives pour le texte

[Note] La couleur de la ligne de décoration de texte est la même que la couleur du texte

text-decoration

Valeur : aucun [souligné (souligné) || | line -through(underline)] | hériter

Valeur initiale : aucune

S'applique à : tous les éléments

Héritage : aucun

Hériter

Les propriétés de décoration du texte ne peuvent pas être héritées, ce qui signifie que toutes les lignes décoratives sur le texte de l'élément enfant sont de la même couleur que l'élément parent. La ligne décorative sur le texte de l'élément enfant appartient en réalité à l'élément parent, elle ne fait que le « traverser ».

[Note] Il peut y avoir plusieurs lignes de modification de texte non conflictuelles

Enfin

Indenter la première ligne (text-index), Parmi les six styles de texte d'alignement horizontal (alignement du texte), d'espacement des mots (espacement des mots), d'espacement des lettres (espacement des lettres), de transformation du texte (transformation du texte) et de décoration du texte (décoration du texte), le la première ligne est en retrait (text-index) et l'alignement horizontal (text-align) ne peut être appliqué qu'aux éléments de niveau bloc (y compris block et inline-block). C'est la chose la plus importante à noter

<.>

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!