CSS TEXT TRANSFORMATION 属性允许你修改文本的大小写形式。
一、text-transform: uppercase;
text-transform: uppercase;属性被用来把文本转换成全部大写字母。
p {
text-transform: uppercase;
}
在上面的例子中，<p> 标签中的文本会被全部转换成大写字母。这个属性的值为 uppercase。
使用这个属性可以很容易地让一个段落或标题在页面上更加显眼：
<h3><span style="text-transform: uppercase;">categories</span></h3>
上面的 HTML 代码将 “categories” 转换成了大写，同时将它放到了一个页面标题中。
二、text-transform: lowercase;
text-transform: lowercase;属性被用来把文本转换成全部小写字母。
p {
text-transform: lowercase;
}
在上面的例子中，<p> 标签中的文本会被全部转换成小写字母。这个属性的值为 lowercase。
一般来说，小写字母在页面上很少用到。这个属性只要在希望强调一些大写字母时才会用到。
三、text-transform: capitalize;
text-transform: capitalize;属性被用来把每个单词的第一个字母转换成大写字母。
p {
text-transform: capitalize;
}
在上面的例子中，<p> 标签中的文本被转换成了每个单词的首字母大写形式。这个属性的值为 capitalize。
这个属性往往用在标题和段落中，可以使文本看起来更加优雅：
<h2><span style="text-transform: capitalize;">a tale of two cities</span></h2>
这个例子的结果是，标题 “a tale of two cities” 变成了 “A Tale Of Two Cities”，使得它更加显眼。
四、text-transform: none;
text-transform: none;属性用于取消 text-transform 的值，使用文本的原始大小写。
p {
text-transform: none;
}
在上面的例子中，<p> 标签中的文本会使用文本的原始大小写。
这个属性很少用到，因为 text-transform 属性默认值为 none，所以文本的大小写不会被修改。
五、text-transform: initial;
text-transform: initial;属性用于把 text-transform 属性重置为它的默认值。
p {
text-transform: initial;
}
在上面的例子中，<p> 标签中的文本会使用原始大小写，这也是 text-transform 的默认值。
这个属性常用于取消一个继承过来的 text-transform 属性。例如：
<div style="text-transform: uppercase;">
<p>This is a paragraph</p>
<p style="text-transform: initial;">This is another paragraph</p>
</div>
这个例子中，第二个段落取消了继承的全部大写字母属性，从而使用文本的原始大小写。
六、text-transform: inherit;
text-transform: inherit; 属性用于继承父元素的 text-transform 的值。
p {
text-transform: inherit;
}
在上面的例子中，父元素的 text-transform 值会被使用到 <p> 标签中的文本中。这个例子中使用的是默认值，即 text-transform: none;。
这个属性一般很少用到，因为 text-transform 默认值为 None，也就是文本大小写不会被修改。
七、总结
通过上述例子，我们了解到 CSS TEXT TRANSFORMATION 属性各个取值的特点和使用场景。
text-transform: uppercase;，把文本全部转化为大写字母，适用于强调和提示文本。
text-transform: lowercase;，把文本全部转化为小写字母，一般用于少见的罕见单词等场合。
text-transform: capitalize;，将每个单词的首字母大写，适用于标题和段落等需要一定格式的文本。
text-transform: none;，取消所设值，使用文本本身的大小写形式。
text-transform: initial;，重置为默认值，也就是文本的原始大小写形式。
text-transform: inherit;，继承父元素的 text-transform 的值。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/293129.html
微信扫一扫 
支付宝扫一扫 