CSSで文字の大文字と小文字を設定するにはどうすればよいですか? text-transform プロパティは文字の大文字化を設定します (はじめに)-CSSチュートリアル-php.cn

CSSで文字の大文字と小文字を設定するにはどうすればよいですか? text-transform プロパティは文字の大文字化を設定します (はじめに)

青灯夜游

リリース： 2018-10-12 10:29:51

オリジナル

10245 人が閲覧しました

英語の単語やピンインの最初の文字を大文字にする必要がある場合や、テキスト全体の中国語と英語の単語をすべて大文字または小文字にする必要がある場合があります。それで、その効果は何ですか？この記事では、text-transform 属性がどのように文字の大文字と小文字を設定するかを理解できるように、CSS で文字の大文字と小文字を設定する方法を紹介します。困っている友人は参考にしていただければ幸いです。

まずは、text-transform属性の関連知識を学びましょう!

text-transform 属性はテキストの大文字と小文字を制御でき、ソースドキュメント内のテキストの大文字と小文字に関係なく、要素内の文字の大文字と小文字が変更されます。属性値が大文字の場合、一部の文字が大文字になりますが、どの文字が大文字になるかを決定する方法は明確に定義されておらず、個々の「単語」を認識するのはユーザーエージェント次第です。

text-transform 属性の属性値を見てみましょう文字の大文字と小文字を制御する方法:

capitalize : テキストを設定します。の各単語は大文字で始まります。つまり、各単語の最初の文字が大文字になります。

uppercase: 大文字のみを定義し、テキスト内の各文字を大文字で表示するように設定します。

小文字 大文字を定義せず、小文字のみを定義し、テキスト内の各文字を小文字で表示するように設定します。

簡単なコード例を使用して、上記の属性値を実装する方法を詳しく学習します。

<!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>

ログイン後にコピー

レンダリング:

CSSで文字の大文字と小文字を設定するにはどうすればよいですか? text-transform プロパティは文字の大文字化を設定します (はじめに)