CSS 資料型別 - <integer>

CSS 資料型別<integer>是一種獨特的<number>型別，表示正或負整數。許多 CSS 屬性和描述符都使用此資料型別，例如column-count、counter-increment、grid-column、grid-row和z-index屬性以及range描述符。

語法

資料型別<integer>由一個或多個十進位制數字組成，包括 0 到 9。它前面可以選擇性地加上+或-符號。整數不帶單位。

注意：沒有官方有效的<integer>值的範圍。

/* Valid integers */
123         /* Positive integer without a + sign */

+123        /* Positive integer with a + sign */

-123        /* Negative integer */

0           /* Zero */

+0          /* Zero with + sign */

-0          /* Zero with - sign */

/*Invalid integers */
123.0        /* This is a <number>, not an <integer> */

123.         /* Decimal points are not allowed */

+--123       /* Only one leading +/- is allowed */

twenty       /* Letters are not allowed */

_2           /* Special characters like underscore are not allowed */

\35          /* Escaped Unicode characters are not allowed, even if they are an integer (here: 5) */

3e4          /* Scientific notation is not allowed */

CSS <integer> - 用於 column-count

以下示例演示瞭如何使用<integer>資料型別來定義 CSS 屬性column-count中的列數。

<html>
<head>
<style> 
   .multicol-col-count {
      column-count: 3;
   }
</style>
</head>
<body>
   <h1>column-count Property</h1>

   <div>
   <p class="multicol-col-count">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
   </p>
   </div>
</body>
</html>

CSS <integer> - 用於 grid-template-columns

以下示例演示瞭如何使用<integer>資料型別來定義 CSS 屬性grid-template-columns中的列數。

<html>
<head>
<style>
   .grid {
      display: grid;
      height: 50px;
      grid-template-columns: repeat(6, 1fr);
      grid-template-rows: 50px;
   }

   .col1 {
      background-color: aqua;
      border: 2px dashed black;
   }

   .col2 {
      background-color: lightgreen;
      grid-column: 2 / 4;
      border: 2px dashed black;
   }

   .col3 {
      background-color: teal;
      grid-column: span 2 / 7;
      border: 2px dashed black;
   }
</style>
</head>
<body>
   <div class="grid">
      <div class="col1"></div>
      <div class="col2"></div>
      <div class="col3"></div>
    </div>
</body>
</html>

列印頁面