html学习笔记(2)-字母大小写转换练习

主要应用了text-transform属性值：

uppercase：所有单词的字母都大写；

lowercase：所有单词的字母都小写；

capitalize：每个单词的首字母都大写；

none：默认值显示；

 <head runat="server">

     <title>应用text-transform属性</title>

     <style type="text/css">

         h2

         {

             font-family: 黑体;

             font-size: 18pt;

             text-align: center;

         }

         .p1

         {

             font-size: 15px;

             text-transform: uppercase;

         }

         .p2

         {

             font-size: 15px;

             text-transform:lowercase;

         }

         .p3

         {

             font-size: 15px;

             text-transform:capitalize;

         }

         .p4

         {

             font-size: 15px;

             text-transform:none;

         }

     </style>

 </head>

 <body>

     <form id="form1" runat="server">

     <div>

         <h2>

             转换英文大小写</h2>

         <p class="p1">

             Welcome to China......所有单词的字母都大写</p>

         <p class="p2">

             Welcome to China......所有单词的字母都小写</p>

         <p class="p3">

             Welcome to China......所有单词的字母首字母都大写</p>

         <p class="p4">

             Welcome to China......默认值</p>

     </div>

     </form>

 </body>

效果图：

巴特西

html学习笔记(2)-字母大小写转换练习

最新文章

热门文章