집 > 기사 > 웹 프론트엔드 > CSS에서 영어 소문자를 대문자로 변환하는 방법

CSS에서 영어 소문자를 대문자로 변환하는 방법

青灯夜游원래의: 2022-04-25 18:35:473807검색

변환 방법: 1. 영어 요소에 "text-transform:capitalize;" 스타일을 추가하여 모든 영어 문자를 대문자로 변경합니다. 영어 텍스트의 각 단어의 첫 글자는 대문자로 표시됩니다.

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

css는 영어 소문자를 대문자로 변환합니다

css에서는 text-transform 속성을 사용하여 영어 소문자(텍스트)를 대문자로 변환할 수 있습니다.

두 가지 상황으로 나눌 수 있습니다:

모든 영어 문자는 대문자가 됩니다. "text-transform: uppercase;" 스타일을 사용하세요. text-transform: uppercase;”样式
英文文本中每个单词的首字母变为大写：使用“text-transform: capitalize;

영어에서 각 단어의 첫 번째 단어 text 문자가 대문자로 변경됨: "text-transform: capitalize;" 스타일 사용

CSS에서 영어 소문자를 대문자로 변환하는 방법 구현 예:

<!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: text-transform 속성

text-transform 속성 제어 영어 텍스트의 경우. 설정 가능한 속성 값: 값 설명 none기본값. 소문자와 대문자로 표준을 정의하는 텍스트입니다. capitalize텍스트의 모든 단어는 대문자로 시작합니다. uppercase정의는 대문자로만 가능합니다. 소문자대문자는 정의하지 않고 소문자만 정의하세요.

(학습 영상 공유: css 영상 튜토리얼

, 🎜웹 프론트엔드🎜)🎜

위 내용은 CSS에서 영어 소문자를 대문자로 변환하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：es6에서 기호의 사용법은 무엇입니까다음 기사：es6에서 기호의 사용법은 무엇입니까