CSS 資料型別 - <ident>

CSS 資料型別<ident>表示用作識別符號的任意字串。

語法

資料型別<custom-ident>的語法類似於 CSS 識別符號，例如屬性名稱。唯一的區別在於它是區分大小寫的。它可以包含一個或多個字元，這些字元可以是以下之一：

任何字母字元（A 到 Z，或 a 到 z），
任何十進位制數字（0 到 9），
連字元（-），
下劃線（_），
跳脫字元（以反斜槓開頭，\），
Unicode 字元，格式為反斜槓 (\)，後跟 1 到 6 個十六進位制數字。它表示 Unicode 程式碼點。

注意：由於<custom-ident>的語法區分大小寫，因此諸如ID1、id1、Id1和iD1之類的識別符號都是不同的識別符號。

/* Valid identifiers */
test1           /* A mix of alphanumeric characters and numbers */
test-sample     /* A mix of alphanumeric characters and numbers with a hyphen (-) */
-test1          /* A dash/hyphen followed by alphanumeric characters */
--test1         /* A custom-property like identifier */
_test1          /* An underscore followed by alphanumeric characters */
\11 test        /* A Unicode character followed by a sequence of alphanumeric characters */
test\.sample    /* A correctly escaped period */

/* Invalid identifiers */
25rem           /* Must not start with a decimal digit */
-25rem          /* Must not start with a dash/hyphen followed by a decimal digit */
test.sample     /* Only alphanumeric characters, _, and - needn't be escaped */
'test1'         /* No string allowed */
"test1"         /* No string allowed */

CSS <ident> - 用作變數的自定義識別符號

以下示例演示了使用<ident>資料型別宣告變數並在 css 樣式中使用它。

<html>
<head>
<style>
   :root {
      --body-background-color: peachpuff;
   }

   div {
      background-color: var(--body-background-color);
      width: 300px;
      height: 300px;
      border: 3px solid black;
   }
</style>
</head>
<body>
   <h1>custom-ident - example</h1>
   <div></div>
</body>
</html>

在上面的示例中，使用資料型別<custom-ident>聲明瞭一個自定義屬性，名為--body-background-color，用於設定 div 元素的顏色。這裡的語法使用兩個破折號開頭，後跟字母字元和連字元。

列印頁面