CSS text-transform设置文本中字母的大小写属性笔记

原创 国哥笔记  2018-09-15 16:24  阅读 940 views 次

text-transform属性定义即用法

text-transform属性是用来定义文本中字母的大小写,如果要改变文本中的字母或英文单词的格式(如:单词都有大写字母开头),就可以用该属性。

text-transform属性值

  • none:文本中的字母不做任何改变(默认);
  • capitalize:定义文本中的每一个单词都以大写字母开头;
  • uppercase:定义全部为大写字母,即文本中小写字母变为大写字母,大写字母不变;
  • lowercase:定义全部为小写字母,即将文本中的大写字母转换为小写字母,原小写字母不变;
  • Inherit:继承父元素中text-transform的属性的值。

text-transform语法格式:

css语法:text-transform:none  / capitalize / uppercase / lowercase Inherit;

JavaScript语法:object.style.textTransform="uppercase";

实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS text-transform设置文本中字母的大小写属性笔记</title>
<style type="text/css">
body{background: #ddd;}
#a{text-transform:capitalize;}/*单词以大写字母开头*/
#b{text-transform:uppercase;}/*字母全为大写字母*/
#c{text-transform:lowercase;}/*字母全部为小写字母*/
</style>
</head>
<body>
<div>none默认不会做任何转换</div>
<div id = "a">capiTALize属性值演示</div>
<div id = "b">upperCASE属性值演示</div>
<div id = "c">lowerCASE属性值演示</div>
</body>
</html>

运行结果:

CSS text-transform设置文本中字母的大小写属性笔记

更多css属性请移步到——>css属性大全

本文地址:https://www.ggbiji.com/css-text-transform.html
版权声明:本文为 国哥笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情