CSS 資料型別 - <relative-size>

CSS 資料型別 <relative-size> 表示相對大小關鍵字。它定義相對於父元素計算大小的尺寸。

這些術語在屬性 font-size 和 font 簡寫中經常使用。

<relative-size> 關鍵字相對於當前元素大小。如果繼承的大小使用 <absolute-size> 關鍵字給出，則 <relative-size> 對應於 <absolute-size> 表格中的相鄰大小。

可能的值

<relative-size> 資料型別使用如下所示的值

smaller - 比繼承大小小一號的相對大小。
larger - 比繼承大小大一號的相對大小。

語法

<relative-size> = smaller | larger

CSS <relative-size> - 比較關鍵字值

以下示例演示了<relative-size>的不同值的用法及其比較

 
<html>
<head>
<style>
   .container {
      font-size: 20px;
      color: #333; 
      font-family: 'Arial', sans-serif; 
   }
   .small {
      font-size: smaller; 
      font-style: italic;      
      }
   .large {
      font-size: larger; 
      font-weight: bold;
   }
   .x-large {
      font-size: x-large; 
      color: #0066cc; 
   }
   .xx-large {
      font-size: xx-large; 
      text-decoration: underline; 
   }
</style>
</head>
<body>
<div class="container">
   <p>This is the custom default font size with different styles and colors.</p>
   <p class="small">This text is slightly smaller and in italic.</p>
   <p class="large">This text is slightly larger and bold.</p>
   <p class="x-large">This text is extra large with a blue color.</p>
   <p class="xx-large">This text is double extra large with underline.</p>
</div>
</body>
</html>

CSS <relative-size> - 比較關鍵字值

以下示例演示了<relative-size>的不同值的用法及其比較

 
<html>
<head>
<style>
   body {
      font-family: 'Arial', sans-serif;
      font-size: 16px; 
   }

   .container {
      margin: 20px;
   }

   .smaller {
      font-size: smaller;
   }

   .larger {
      font-size: larger;
   }

   .custom-relative {
      font-size: 120%; 
   }
</style>
</head>
<body>
<div class="container">
   <p>This is the default font size.</p>
   <p class="smaller">This text is smaller relative to the default.</p>
   <p class="larger">This text is larger relative to the default.</p>
   <p class="custom-relative">This text has a custom relative size (120%).</p>
</div>
</body>
</html>

列印頁面