ホームページ > 記事 > ウェブフロントエンド > text-transform の使用法とサンプル チュートリアルを分析する
text-transform の使用法とサンプル チュートリアルを分析する
- 零下一度オリジナル
- 2017-06-19 11:24:132748ブラウズ
構文:
text-transform : none |大文字 | 小文字
パラメータ:
none : 変換は行われません
capitalize : 各単語の最初の文字は大文字に変換されます
uppercase: 大文字に変換します。
小文字: 小文字に変換します。
説明:
オブジェクト内のテキストの大文字と小文字を取得または設定します。
対応するスクリプト機能は textTransform です。私が書いた他の本もご覧ください。
text-transformとfont-variant
text-transformとfont-variantの違いは、英語のテキストを大文字と小文字に変換できます。ただし、font-variant の唯一の機能は、英語のテキストを「小さい」大文字のテキストに変換することです。これは「小さい」という点に注意してください。一般に、font-variant 属性が使用されることはほとんどありません。英語の大文字と小文字の変換では、font-variant 属性の代わりに text-transform 属性を使用します。 例
編集
div { text-transform : none; }
div { text-transform : capitalize; }
div { text-transform : uppercase; }
div { text-transform : lowercase; }注: 1. text-transform は英語でのみ機能し、中国語の文字には機能しません
2. text-transform を使用すると、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 中国語 Web サイトの他の関連記事を参照してください。