Maison >interface Web >tutoriel CSS >Quelles sont les principales propriétés des paramètres de texte CSS ?

Quelles sont les principales propriétés des paramètres de texte CSS ?

青灯夜游
青灯夜游original
2021-03-22 17:48:486249parcourir

Les principaux attributs des paramètres de texte CSS sont : font-famil, font-size, color, text-align, text-decoration, border, text-shadow, Word-warp, Word-break, direction, etc. .

Quelles sont les principales propriétés des paramètres de texte CSS ?

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.

Une collection de divers attributs de texte CSS

1. Attributs de police

  • font-family : 'Microsoft Yahei' Spécifie le style de paramètre d'attribut CSS de la police

  • font-size : Définit la taille de la police.

  • font-weight : Définissez l'épaisseur du texte.

  • font-style : Définissez l'inclinaison de la police. Les attributs possibles sont normal, italique, et oblique ;

  • line-height : définit l'espacement des lignes de la police

  • color font color

2. Attributs de texte

  • text-align : Contrôler l'alignement du texte

  • text-indent : Contrôlez la première ligne de texte L'indentation peut être px ou %;

  • white-space : l'espace vide dans le document

    valeur de l'attribut :

    • noraml : par défaut, plusieurs espaces sont ignorés et un seul espace est affiché.

    • nowrap : ne force aucun saut de ligne

    • pre : espaces/indentation / Les sauts de ligne seront conservés

    • pre-line : fusionner les tables vides (plusieurs espaces ne produiront qu'un seul espace)

    • pré-déformation : conserver les espaces/indentations, retour à la ligne normal

  • espacement des lettres : contrôler la distance entre les lettres ; 🎜>

  • text-overflow : Que se passe-t-il lorsque le texte déborde de l'élément conteneur ;
    • Valeur de l'attribut :
    • clip Trim texte.
    • ellipse Affiche des ellipses pour représenter le texte coupé.
    • string Utilisez la chaîne donnée pour représenter le texte coupé.
  • espacement des mots : contrôlez la distance des espaces entre les mots, utilisez des espaces pour distinguer les mots, le chinois et l'anglais sont OK
  • 3. Attribut de soulignement

text-decoration : Contrôle si le texte est souligné. Les valeurs possibles sont

aucune. sans soulignement
  • overline définit une ligne sur le texte.
  • line-through définit une ligne qui passe sous le texte.
  • soulignement définit une ligne sous le texte.
  • 4. Convertir le cas

text-transform :

Valeur de l'attribut :

aucun (par défaut) aucune conversion ;

  • majuscule : la première lettre de chaque mot est en majuscule

  • majuscule : conversion en majuscule ; ;

  • minuscule : en minuscules;

  • [Tutoriel recommandé :

    Tutoriel vidéo CSS
  • ]

5. Attributs de bordure

6. Ombre de boîte

box-shadow : ombre de boîte

peut avoir cinq valeurs (ombre horizontale h-shadow ; position, position de l'ombre verticale de l'ombre en V, distance du flou, taille de l'ombre étendue, couleur, ombre intérieure et extérieure en incrustation/déport)

par exemple :

box-shadow: 10px 5px 10px red inset;

7. Le texte dépasse la nouvelle ligne

  • Déformation de mots : autoriser la transition des mots longs vers la ligne suivante

  • Mot -break : Autoriser les sauts de ligne dans les mots (retour à la ligne automatique)

8. Formulaire de placement de texte

direction : direction de placement du texte

valeur de l'attribut :

  • ltl : de gauche à droite

  • rtl : de droite à gauche

9. Le texte dépasse le saut de ligne

  • Déformation de mots : permet de convertir les mots longs à la ligne suivante

  • Saut de mot : autoriser la modification des lignes dans les mots (retour automatique à la ligne)

10. Ombre de texte

  • text-shadow : Ombre de la boîte de référence

11. Lorsqu'une seule ligne de texte dépasse les ellipses d'affichage

{
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
<.>

12. Lorsque le texte multiligne dépasse la limite, utilisez des points de suspension au lieu du nombre limite de lignes

{
  overflow:hidden;
  word-break: break-all;
  display: -webkit-box;
  -webkit-line-clamp: 3; /*限制在一个块元素显示的文本的行数*/
  -webkit-box-orient: vertical;
  text-overflow:ellipsis;
}

Pour plus de connaissances sur la programmation, veuillez visiter :

Vidéo de programmation ! !

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn