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

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

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

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

    這個(gè)屬性會(huì)改變?cè)刂凶帜傅拇笮?xiě)，而不考慮源文檔中文本的大小寫(xiě)。如果值為capitalize,則要對(duì)某些字母大寫(xiě)，但是并沒(méi)有明確定義哪些字母要大寫(xiě)，這取決于用戶(hù)代理如何識(shí)別出各個(gè)“詞”。

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

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

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

    ?uppercase：定義僅有大寫(xiě)字母。

    ?lowercase：定義無(wú)大寫(xiě)字母，僅有小寫(xiě)字母。

    ?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ù)查找其他問(wèn)題的答案？

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