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>

打印页面