text-transform의 사용법과 예제 튜토리얼 분석-CSS 튜토리얼-php.cn

text-transform의 사용법과 예제 튜토리얼 분석

零下一度

풀어 주다： 2017-06-19 11:24:13

원래의

2831명이 탐색했습니다.

구문: 
text-transform : 없음 | 대문자 | 소문자
매개변수:
none : 변환이 발생하지 않습니다.
capitalize: 각 단어의 첫 글자가 대문자로 변환되고 나머지는 변환되지 않습니다.
uppercase: 대문자로 변환
lowercase: 소문자로 변환
설명:
object에서 텍스트의 대소문자를 검색하거나 설정합니다.
해당 스크립트 기능은 textTransform입니다. 제가 쓴 다른 책들도 참조해 주세요.

text-transform과 font-variant

text-transform과font-variant의 차이점은 영어 텍스트를 대문자와 소문자로 변환할 수 있습니다. 그러나 글꼴 변형의 유일한 기능은 영어 텍스트를 "작은" 대문자 텍스트로 변환하는 것입니다. 일반적으로 글꼴 변형 속성은 거의 사용되지 않습니다. 영어 대소문자 변환의 경우 글꼴 변형 속성 대신 텍스트 변환 속성을 사용합니다. Example

Edit

div { text-transform : none; }
div { text-transform : capitalize; }
div { text-transform : uppercase; }
div { text-transform : lowercase; }

로그인 후 복사

참고: 1. 텍스트 변환은 영어에서만 작동하고 중국어에서는 작동하지 않습니다.

2 텍스트 변환을 사용하면 Dreamweaver를 사용하여 즉각적인 효과를 볼 수 있습니다

예 텍스트 변환

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>text-transform_CSS参考手册_web前端开发参考手册系列</title>
<style>
.capitalize span{text-transform:capitalize;}
.uppercase span{text-transform:uppercase;}
.lowercase span{text-transform:lowercase;}
</style>
</head>
<body>
<ul>
<li>
<strong>将每个单词的首字母转换成大写</strong>
<div>原　文： <span>how do you do.</span></div>
<div>转换后： <span>how do you do.</span></div>
</li>
<li>
<strong>转换成大写</strong>
<div>原　文： <span>how do you do.</span></div>
<div>转换后： <span>how do you do.</span></div>
</li>
<li>
<strong>转换成小写</strong>
<div>原　文： <span>HOW ARE YOU.</span></div>
<div>转换后： <span>HOW ARE YOU.</span></div>
</li>
</ul>
</body>
</html>

로그인 후 복사

위 내용은 text-transform의 사용법과 예제 튜토리얼 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!