CSS 文本转换 text-transform

提问人：刘团圆发布时间：2020-11-17

在网页中编写文本时，经常遇到一些英文段落，如果不注意大小写的变换：这样就会造成不太友好的阅读体验。CSS的文本text-transform属性就能很好地解决这个问题。

这个属性会改变元素中字母的大小写，而不考虑源文档中文本的大小写。如果值为capitalize,则要对某些字母大写，但是并没有明确定义哪些字母要大写，这取决于用户代理如何识别出各个“词”。

text-transform属性的值可以是以下几种：

•none：默认。定义带有小写字母和大写字母的标准文本。

•capitalize：文本中的每个单词以大写字母开头。

•uppercase：定义仅有大写字母。

•lowercase：定义无大写字母，仅有小写字母。

•inherit：规定应该从父元素继承text-transform属性的值。

【例题】设置文本转换

代码如下：

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

<style>

body{

font-size: 20px;

}

text-transform: none;

}

dive{

text-transform: capitalize;

}

text-transform: uppercase;

}

span{

text-transform: lowercase;

}

</style>

</head>

<body>

<p>hello world!</p>

<hr/>

<div>hello world!</div>

<hr/>

<a href="">hello world!</a>

<hr/>

<span>HELLOW WORLD!</span>

</body>

</html>

相关视频回答

点击加载更多评论>>