Maison > Article > interface Web > Comment définir la majuscule des lettres en CSS ? La propriété text-transform définit la capitalisation des lettres (introduction)

Comment définir la majuscule des lettres en CSS ? La propriété text-transform définit la capitalisation des lettres (introduction)

青灯夜游original: 2018-10-12 10:29:5210230parcourir

Parfois, nous devons mettre en majuscule la première lettre d'un mot anglais ou d'un pinyin ou nous devons mettre tous les mots chinois et anglais dans l'ensemble du texte en majuscules ou en minuscules. Alors quel est l’effet ? Cet article vous présentera comment définir la casse des lettres en CSS, afin que vous puissiez comprendre comment l'attribut text-transform définit la casse des lettres. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Tout d’abord, découvrons l’attribut text-transform !

L'attribut text-transform peut contrôler la casse du texte et changera la casse des lettres dans l'élément quelle que soit la casse du texte dans le document source. Si la valeur de l'attribut est en majuscule, certaines lettres sont en majuscule, mais il n'est pas clairement défini comment déterminer quelles lettres sont en majuscule, c'est à l'agent utilisateur de reconnaître les "mots" individuels.

Voyons comment la valeur de l'attribut text-transform peut contrôler les majuscules et les minuscules des caractères :

capitaliser : Définir le texte Chaque mot commence par une lettre majuscule, c'est-à-dire que la première lettre de chaque mot est en majuscule.

majuscule : définit uniquement les lettres majuscules, en définissant chaque lettre du texte à afficher en majuscule.

minuscules Définissez aucune lettre majuscule, uniquement des lettres minuscules, et définissez chaque lettre du texte pour qu'elle soit affichée en minuscule.

Nous utilisons un exemple de code simple pour en savoir plus sur la façon d'implémenter les valeurs d'attribut ci-dessus.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Text-transform属性设置大小写</title>
		<style type="text/css">
			h1 {text-transform: uppercase}
			
			p.uppercase {text-transform: uppercase}
			
			p.lowercase {text-transform: lowercase}
			
			p.capitalize {text-transform: capitalize}
		</style>
	</head>
	<body>
		<h1>Text-transform属性设置大小写</h1>
		<p class="uppercase">Text-transform属性设置全大写</p>
		<p class="lowercase">Text-transform属性设置全小写</p>
		<p class="capitalize">Text-transform属性设置首字母大写</p>
	</body>
</html>

Rendu :

Comment définir la majuscule des lettres en CSS ? La propriété text-transform définit la capitalisation des lettres (introduction)

Remarque : tous les navigateurs prennent en charge l'attribut text-transform.

Résumé : Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun. Pour plus de didacticiels connexes, veuillez visiter le Tutoriel vidéo CSS !

Recommandations associées :

Tutoriel vidéo de formation sur le bien-être public php

Manuel en ligne CSS

Tutoriel graphique div/css

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!

php css transform

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：CSS3 implémente l'effet lumineux de la police (exemple de code)Article suivant：CSS3 implémente l'effet lumineux de la police (exemple de code)

Articles Liés

Voir plus