首頁 > web前端 > css教學 > 解析text-transform的用法及實例教程

解析text-transform的用法及實例教程

零下一度
發布: 2017-06-19 11:24:13
原創
2831 人瀏覽過

語法: 
text-transform : none | capitalize | uppercase | lowercase 
#參數: 
#n :  無
capitalize :  將每個單詞的第一個字母轉換成大寫,其餘無轉換發生
uppercase :  轉換成大寫
lowercase :  轉換成小寫 
說明: 
檢索或設定物件中的文字的大小寫。 
對應的腳本特性為textTransform。請參閱我所寫的其他書目。 

text-transform和font-variant區別

text-transform和font-variant都能把英文文字轉換大小寫。但是font-variant唯一的作用就是把英文文本轉換成“小型”大寫字母文本,注意這是“小型”的。一般極少用到​​font-variant屬性,對於英文的大小寫轉換,我們用的是text-transform屬性,而不是用font-variant屬性。

範例

編輯

div { text-transform : none; }
div { text-transform : capitalize; }
div { text-transform : uppercase; }
div { text-transform : lowercase; }
登入後複製

注意:1.用text-transform只對英文起作用對於漢字時失效

2.用text-transform可以用dreamweaver看到即時的效果

text-transform的實例

<!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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板