个人随笔
技术改变世界

CSS 改变字母大小写

示例

CSS-Text-transform    在CSS中可以控制字母文本的大小写一共有三种方式,如图中的第一种THIS IS UPPERCASE很显然是全大写的样式,第种则是全小写样式,第三种则比较有意思首字母大写样式。实际上我们输入的仅仅是整个文本的首字母大写而已,以上的样式都是由CSS的作用改变的。并且您在浏览网页时复制文本,会复制原始的文本,而不是改变后样式文本。 也就是说原本是大写就是大写 原本是小写就是小写。可以自己试试吧!

本示例的完整代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS 控制字母大小写</title>
<style type="text/css">
h1 {text-transform:uppercase}
p.uppercase{text-transform:uppercase}
p.lowercase{text-transform:lowercase}
p.capitalize{text-transform:capitalize}
</style>
</head>

<body>
<h1>This Is H1 Tag</h1>
<p class="uppercase">This is uppercase</p>
<p class="lowercase">This is lowercase</p>
<p class="capitalize">This is capitalize</p>
</body>
</html>

转载请注明出处王旭博客 » CSS 改变字母大小写

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址