CSS的text-transform 属性控制文本的大小写。

值 描述
none 默认。定义带有小写字母和大写字母的标准的文本。
capitalize 文本中的每个单词以大写字母开头。
uppercase 定义仅有大写字母。
lowercase 定义无大写字母，仅有小写字母。
inherit 规定应该从父元素继承 text-transform 属性的值。

 

 

 

 

 

 

下面是我做了一个小demo，大家可以参考一下

html:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript" src="/jquery/css/js/jquery-2.1.3.min.js"></script>
        <title>css text-transform</title>
    </head>
    <body>
        <div class="header">
            <div class="header-big-letter">
                <label>首字母大写:</label>
                <input type="text" class="first-big-letter">
            </div>
            <div class="all-big-letter">
                <label>只能输入大写字母:</label>
                <input type="text" class="big-letter">
            </div>
            <div class="all-small-letter">
                <label>只能输入小写字母:</label>
                <input type="text" class="small-letter">
            </div>
        </div>
    </body >
</html>

css:

<style>
.header{
    width:400px;
    height:400px;
    margin-left:400px;
    background-color:pink
}    
.header-big-letter{
    padding-top:50px;
    padding-bottom:20px;
}
.first-big-letter{
    text-transform:capitalize;
}
.all-big-letter{
    padding-bottom:20px;
}
.big-letter{
    text-transform:uppercase;
}
.all-small-letter{
    padding-bottom:20px;
}
.small-letter{
    text-transform:lowercase;
}
</style>

效果:

 

posted @ 2016-08-26 17:36  爱喝酸奶的吃货  阅读(901)  评论(1)  编辑  收藏  举报