CSS(即層疊樣式表)是控制網(wǎng)頁視覺呈現(xiàn)的強大工具。其一方面是能夠調(diào)整頁面上文本元素的字體大小。這可以通過使用 font-size 屬性來完成。
要為特定元素設置特定字體大小,我們將類或 ID 選擇器與 font-size 屬性結(jié)合使用。
在本文中,我們將看到多個使用 CSS 更改字體大小的示例 –
通過使用 font-size 屬性,我們可以為特定元素或類設置特定的字體大小。例如,要將 元素的字體大小設置為 18 像素,我們將使用以下代碼 –
P{ font-size:18px; }
登錄后復制
示例
<html> <head> <title>How to change the font size using CSS</title> <style> .p1{ font-size:20px; } </style> </head> <body> <h1>Welcome to tutorialspoint</h1> <p class="p1">Change the font size using CSS</p> <p>This is normal paragraph</p> </body> </html>
登錄后復制
我們還可以使用 font-size 屬性來設置相對字體大小,例如更大或更小,這將更改相對于父元素字體大小的字體大小。為此,我們將使用以下代碼 –
P{ font-size:larger; }
登錄后復制
示例
<html> <head> <title>How to change the font size using CSS</title> <style> .p1{ font-size:large; } .p2{ font-size:small; } </style> </head> <body> <h1>Welcome to tutorialspoint</h1> <p class="p1">Change the font size using CSS - Large font</p> <p class="p2">Change the font size using CSS - Small font</p> <p>This is normal paragraph</p> </body> </html>
登錄后復制
另一種定位特定單詞的方法是使用 :not css 選擇器。這允許定位元素中除唯一單詞之外的所有單詞。例如 –
CSS
p span:not(.unique) { font-size: 18px; }
登錄后復制
HTML
<p>This is a <span class="not-unique">not unique</span> word, but this <span class="not-unique">word</span> is <span class="unique">unique</span>.</p>
登錄后復制
示例
<html> <head> <title>How to change the font size using CSS</title> <style> p span:not(.unique) { font-size: 20px; } </style> </head> <body> <p>Lorem Ipsum is simply dummy text of <span class="notunique">not unique</span> the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, <span class="not-unique">not unique</span> when an unknown printer took a galley of type and scrambledg,</p> </body> </html>
登錄后復制
CSS 中的 font-size 屬性允許精確控制網(wǎng)頁上文本元素的大小。無論我們是想為特定元素設置特定的字體大小、根據(jù)父元素的字體大小調(diào)整字體大小還是針對特定的單詞,CSS 都提供了必要的工具來完成此操作。
以上就是如何使用CSS改變字體大小?的詳細內(nèi)容,更多請關注www.92cms.cn其它相關文章!