DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS基礎知識 >> 4.3 文本大小寫text-transform
4.3 文本大小寫text-transform
編輯:CSS基礎知識     

一、text-transform屬性

在CSS中,使用text-transform屬性來轉換文本的大小寫,這個是針對英文而言,因為中文不存在大小寫之分。

語法:

text-transform:屬性值;

說明:

text-transform屬性取值如下表:

表1 text-transform屬性 屬性值 說明 none 默認值,無轉換發生 uppercase 轉換成大寫 lowercase 轉換成小寫 capitalize 將每個英文單詞的首字母轉換成大寫,其余無轉換發生

舉例:

在線測試
 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>text-transform屬性</title>
    <style type="text/css">
        #p1{text-transform:uppercase;}
        #p2{text-transform:lowercase;}
        #p3{text-transform:capitalize;}
    </style>
</head>
<body>
    <p id="p1">大寫:Rome was't built in a day.</p>
    <p id="p2">小寫:Rome was't built in a day.</p>
    <p id="p3">僅首字母大寫: Rome was't built in a day.</p>
</body>
</html>

在浏覽器預覽效果如下:

二、text-transform和font-variant區別

大家參考下一節的font-variant屬性就可以很清楚了,font-variant唯一的作用就是把英文文本轉換成“小型”大寫字母文本,這是“小型”的喔。一般極少用到font-variant屬性,對於英文的大小寫轉換,我們用的是text-transform屬性,而不是用font-variant屬性。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved