CSS에서 문자의 대문자를 설정하는 방법은 무엇입니까? text-transform 속성은 문자의 대문자 사용을 설정합니다(소개).-CSS 튜토리얼-php.cn

CSS에서 문자의 대문자를 설정하는 방법은 무엇입니까? text-transform 속성은 문자의 대문자 사용을 설정합니다(소개).

青灯夜游

풀어 주다： 2018-10-12 10:29:51

원래의

10260명이 탐색했습니다.

때때로 영어 단어나 병음의 첫 글자를 대문자로 표기해야 하거나 전체 텍스트의 모든 중국어 및 영어 단어를 대문자 또는 소문자로 만들어야 합니다. 그래서 효과는 무엇입니까? 이 글에서는 CSS에서 글자의 대소문자를 설정하는 방법을 소개하여 text-transform 속성이 글자의 대소문자를 설정하는 방법을 이해할 수 있도록 하겠습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

먼저 text-transform 속성에 대해 알아봅시다!

text-transform 속성은 텍스트의 대소문자를 제어할 수 있으며 소스 문서의 텍스트 대소문자에 관계없이 요소의 문자 대소문자를 변경합니다. 속성 값이 대문자인 경우 일부 문자는 대문자로 표시되지만 어떤 문자를 대문자로 표시할지 결정하는 방법은 명확하게 정의되어 있지 않으며 개별 "단어"를 인식하는 것은 사용자 에이전트의 몫입니다.

text-transform 속성의 속성 값이 문자의 대문자 사용을 어떻게 제어할 수 있는지 살펴보겠습니다.

capitalize: 텍스트의 각 단어가 대문자로 시작하도록 설정합니다. 각 단어의 첫 글자는 대문자로 표시됩니다.

uppercase: 대문자만 정의하고, 텍스트의 각 문자가 대문자로 표시되도록 설정합니다.

lowercase 대문자는 쓰지 않고 소문자만 정의하고, 텍스트의 각 글자가 소문자로 표시되도록 설정합니다.

위 속성 값을 구현하는 방법을 자세히 알아보기 위해 간단한 코드 예제를 사용합니다.

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

로그인 후 복사

Rendering:

CSS에서 문자의 대문자를 설정하는 방법은 무엇입니까? text-transform 속성은 문자의 대문자 사용을 설정합니다(소개).