首頁 > web前端 > css教學 > 如何使用CSS改變字體大小?

如何使用CSS改變字體大小?

PHPz
發布: 2023-09-23 21:05:03
轉載
1449 人瀏覽過

如何使用CSS改變字體大小?

CSS(即層疊樣式表)是控制網頁視覺呈現的強大工具。其一方面是能夠調整頁面上文字元素的字體大小。這可以透過使用 font-size 屬性來完成。

要為特定元素設定特定字體大小,我們將類別或 ID 選擇器與 font-size 屬性結合使用。

在本文中,我們將看到多個使用 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 屬性允許精確控制網頁上文字元素的大小。無論我們是想為特定元素設定特定的字體大小、根據父元素的字體大小調整字體大小還是針對特定的單詞,CSS 都提供了必要的工具來完成此操作。

以上是如何使用CSS改變字體大小?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:tutorialspoint.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板