CSS 数据类型

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>这是具有不同样式和颜色的自定义默认字体大小。</p>
    <p class="small">此文本稍小且为斜体。</p>
    <p class="large">此文本稍大且粗体。</p>
    <p class="x-large">此文本超大，呈蓝色。</p>
    <p class="xx-large">此文本为双特大号，带下划线。</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>这是默认字体大小。</p>
    <p class="smaller">此文本相对于默认文本较小。</p>
    <p class="larger">此文本相对于默认文本更大。</p>
    <p class="custom-relative">此文本具有自定义相对大小 (120%)。</p>
</div>
</body>
</html>