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

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

青灯夜游원래의: 2018-10-12 10:29:5210282검색

때때로 영어 단어나 병음의 첫 글자를 대문자로 표기해야 하거나 전체 텍스트의 모든 중국어 및 영어 단어를 대문자 또는 소문자로 만들어야 합니다. 그래서 효과는 무엇입니까? 이 글에서는 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 속성은 문자의 대문자 사용을 설정합니다(소개).

참고: 모든 브라우저는 text-transform 속성을 지원합니다.

요약: 위 내용이 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다. 더 많은 관련 튜토리얼을 보려면 CSS 비디오 튜토리얼을 방문하세요!

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

관련 기사