Text Transform (propriété CSS)

CSS text-transform Explication détaillée des attributs

Cette propriété est utilisée pour contrôler la conversion de cas du contenu du texte d'élément.

Grammaire:

<code class="language-css">text-transform: capitalize | lowercase | none | uppercase | inherit;</code>

Description:

Les attributs

text-transform définissent comment le contenu texte d'un élément est converti en majuscules, en minuscules ou en initiales.

Exemple:

Les règles de style suivantes font que le titre h1 utilise uniquement des lettres majuscules, tandis que la lettre initiale de chaque mot dans le titre est capitalisée: h2

<code class="language-css">h1 {
  text-transform: uppercase;
}
h2 {
  text-transform: capitalize;
}</code>

Valeur d'attribut:

• capitalize: Convertir la première lettre de chaque mot en majuscules; d'autres caractères restent inchangés (non converti en minuscules).
• lowercase: Convertissez tous les caractères en minuscules.
• none: Aucune conversion de cas n'est effectuée.
• uppercase: Convertissez tous les caractères en majuscules.
• inherit: Hériter de la valeur d'attribut de l'élément parent. text-transform

CSS FAQ d'attribut: text-transform

1. text-transform Les propriétés

sont un outil puissant qui vous permet de contrôler le cas du texte. Il peut être utilisé pour changer de texte en majuscules, en minuscules ou en capitaliser la lettre initiale de chaque mot. Cette propriété fonctionne en prenant le texte d'origine et en la convertissant en fonction de la valeur que vous définissez. Par exemple, si vous définissez la valeur sur "majuscule", toutes les lettres du texte seront converties en majuscules, quelle que soit la façon dont elles ont été à l'origine.

text-transform

2.

text-transform Pour modifier le texte en majuscules à l'aide de la propriété CSS , définissez simplement la valeur de la propriété sur "majuscule". Voici un exemple de la façon de le faire:

text-transform Dans cet exemple, tout le texte à l'intérieur de l'élément «P» sera converti en majuscule.

<code class="language-css">p {
  text-transform: uppercase;
}</code>

3.

Oui, vous pouvez capitaliser la lettre initiale de chaque mot à l'aide de l'attribut CSS text-transform. Pour ce faire, vous devez définir la valeur de la propriété pour "capitaliser". Voici un exemple:

Dans cet exemple, la lettre initiale de chaque mot de l'élément «H1» sera capitalisée. text-transform

<code class="language-css">h1 {
  text-transform: capitalize;
}</code>

4.

La valeur "majuscule" dans

CSS convertit toutes les lettres du texte en majuscules, tandis que la valeur "capitaliser" ne convertit que la première lettre de chaque mot en majuscules. Les lettres restantes du mot resteront dans leur état de frappe d'origine. text-transform

5. text-transform

Oui, vous pouvez modifier le texte en minuscules à l'aide de la propriété CSS

. Pour ce faire, vous devez définir la valeur de la propriété sur "minuscules". Voici un exemple: text-transform

<code class="language-css">text-transform: capitalize | lowercase | none | uppercase | inherit;</code>

Dans cet exemple, tout le texte à l'intérieur de l'élément 'div' sera converti en minuscules.

6. text-transform Oui, l'effet de l'attribut CSS

peut être non doté. Pour ce faire, vous devez définir la valeur de la propriété sur "Aucun". Cela restaure le texte à son état d'origine sans aucune transformation.

text-transform

7.

text-transform Oui, l'attribut CSS peut être utilisé pour n'importe quel élément HTML qui contient du texte. Cela comprend des éléments tels que "P", "H1", "div", "Span".

text-transform 8.

Non, la propriété CSS text-transform ne change pas le texte d'origine. Il ne fait que modifier la façon dont le texte apparaît à l'écran. Le texte d'origine reste inchangé dans le document HTML.

9. text-transform

Non, vous ne pouvez utiliser qu'une valeur d'attribut CSS à la fois . Si vous essayez d'utiliser plusieurs valeurs, seule la dernière valeur est appliquée. text-transform

10.

text-transform

Oui, tous les navigateurs modernes prennent en charge les propriétés CSS

, y compris Chrome, Firefox, Safari et Edge. Cependant, les versions plus anciennes de ces navigateurs peuvent ne pas la prendre en charge, il est donc préférable de vérifier la compatibilité du navigateur avant d'utiliser cette propriété.

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!