首页 > 代码库 > html学习笔记-字母大小写转换练习
html学习笔记-字母大小写转换练习
主要应用了text-transform属性值：
uppercase：所有单词的字母都大写；
lowercase：所有单词的字母都小写；
capitalize：每个单词的首字母都大写；
none：默认值显示；
1 <head runat="server"> 2 <title>应用text-transform属性</title> 3 <style type="text/css"> 4 h2 5 { 6 font-family: 黑体; 7 font-size: 18pt; 8 text-align: center; 9 }10 .p111 {12 font-size: 15px;13 text-transform: uppercase;14 }15 .p216 {17 font-size: 15px;18 text-transform:lowercase;19 }20 .p321 {22 font-size: 15px;23 text-transform:capitalize;24 }25 .p426 {27 font-size: 15px;28 text-transform:none;29 }30 </style>31 </head>32 <body>33 <form id="form1" runat="server">34 <div>35 <h2>36 转换英文大小写</h2>37 <p class="p1">38 Welcome to China......所有单词的字母都大写</p>39 <p class="p2">40 Welcome to China......所有单词的字母都小写</p>41 <p class="p3">42 Welcome to China......所有单词的字母首字母都大写</p>43 <p class="p4">44 Welcome to China......默认值</p>45 </div>46 </form>47 </body>
效果图：
html学习笔记-字母大小写转换练习
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。