位置：首頁 > 軟件操作教程 > 編程開發(fā) > CSS > 問題詳情

CSS 文本轉(zhuǎn)換 text-transform

提問人：劉團(tuán)圓發(fā)布時(shí)間：2020-11-17

    在網(wǎng)頁中編寫文本時(shí)，經(jīng)常遇到一些英文段落，如果不注意大小寫的變換：這樣就會(huì)造成不太友好的閱讀體驗(yàn)。CSS的文本text-transform屬性就能很好地解決這個(gè)問題。

    這個(gè)屬性會(huì)改變元素中字母的大小寫，而不考慮源文檔中文本的大小寫。如果值為capitalize,則要對某些字母大寫，但是并沒有明確定義哪些字母要大寫，這取決于用戶代理如何識別出各個(gè)“詞”。

    text-transform屬性的值可以是以下幾種：

    ?none：默認(rèn)。定義帶有小寫字母和大寫字母的標(biāo)準(zhǔn)文本。

    ?capitalize：文本中的每個(gè)單詞以大寫字母開頭。

    ?uppercase：定義僅有大寫字母。

    ?lowercase：定義無大寫字母，僅有小寫字母。

    ?inherit：規(guī)定應(yīng)該從父元素繼承text-transform屬性的值。

    【例題】設(shè)置文本轉(zhuǎn)換

    代碼如下：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

body{

font-size: 20px;

}

p{

text-transform: none;

}

dive{

text-transform: capitalize;

}

a{

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>

image.png

繼續(xù)查找其他問題的答案？

相關(guān)視頻回答
回復(fù)(0)
返回頂部