Maison > Article > interface Web > Comment convertir les minuscules anglaises en majuscules en CSS

Comment convertir les minuscules anglaises en majuscules en CSS

青灯夜游original: 2022-04-25 18:35:473797parcourir

Méthode de conversion : 1. Ajoutez le style "text-transform: uppercase;" à l'élément anglais pour transformer toutes les lettres anglaises en majuscules. 2. Ajoutez le style "text-transform:capitalize;" à l'élément anglais pour modifier le style. la première lettre de chaque mot du texte anglais est en majuscule.

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

css pour convertir les minuscules anglaises en majuscules

En CSS, vous pouvez utiliser l'attribut text-transform pour convertir les lettres anglaises minuscules (texte) en majuscules.

Il existe deux situations :

Toutes les lettres anglaises deviennent majuscules : utilisez le style "text-transform: uppercase;"text-transform: uppercase;”样式
英文文本中每个单词的首字母变为大写：使用“text-transform: capitalize;

Le premier mot de chaque mot dans le texte anglais Lettres devenir majuscule : utilisez le style "text-transform: capitalize;"

Comment convertir les minuscules anglaises en majuscules en CSS Exemple d'implémentation :

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p {
            font-variant: small-caps;
            /*把段落设置为:小型大写字母字体(即文字的大小不变，只不过文字都变成了大小字母)*/
        }
        span[first] {
 
            text-transform: capitalize /*使每个单词的首字母变为大写。*/
                /* capitalize可以使每个单词的首字母变为大写 */
                /* uppercase 定义仅有大写字母 */
                /* lowercase 定义无大写字母，仅有小写字母 */
                /* inherit 规定应该从父元素继承 text-transform 属性的值。 */
        }
        span[second] {
            text-transform: uppercase /*把所有的字母都变成大写。*/
                /* capitalize可以使每个单词的首字母变为大写 */
                /* uppercase 定义仅有大写字母 */
                /* lowercase 定义无大写字母，仅有小写字母 */
                /* inherit 规定应该从父元素继承 text-transform 属性的值。 */
        }
    </style>
</head>
 
<body>
    <p>hello</p>
    <span first>heloodj sdKUv dIfvh</span>
    <hr>
    <span second>heloodj sDFuv difvh</span>
</body>
 
</html>

Description : attribut text-transform

contrôle d'attribut text-transform Le cas du texte anglais. Valeurs d'attribut réglables : valeur description aucunPar défaut. Texte qui définit les normes avec des lettres minuscules et majuscules. capitalizeChaque mot du texte commence par une lettre majuscule. majusculesLes définitions sont uniquement des lettres majuscules. minusculesne définit aucune lettre majuscule, seulement des lettres minuscules.

(Partage de vidéos d'apprentissage : tutoriel vidéo CSS

, 🎜front-end web🎜)🎜

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

Article précédent：Quelle est l'utilisation du symbole dans es6Article suivant：Quelle est l'utilisation du symbole dans es6

Articles Liés

Voir plus