CSS 資料型別 - <dashed-ident>

CSS 資料型別<dashed-ident>表示任何用作識別符號的字串，通常格式為帶連字元。

語法

<dashed-ident> 的語法類似於 CSS 識別符號，例如屬性名稱，但它區分大小寫。它以兩個連字元開頭，後跟使用者定義的識別符號。示例如下所示

body {
   --green-color: green;
   --pink-color: pink;
   --blue-color: blue;
}

CSS 程式碼塊開頭的雙連字元使其易於識別，並防止與標準 CSS 關鍵字發生名稱衝突。

像 <custom-ident> 一樣，<dashed-ident> 由使用者定義，但 CSS 未定義 <dashed-ident>。

CSS <dashed-ident> - 使用自定義屬性

以下示例演示瞭如何使用 <dashed-ident> 與自定義屬性。這裡我們使用var() 函式來訪問它的值 -

<html>
<head>
<style>
   body {
      --green-color: green;
      --pink-color: pink;
      --blue-color: blue;
   }
   h1,h4 {
      color: var(--green-color);
   }
   h2,h5 {
      color: var(--pink-color);
   }
   h3,h6 {
      color: var(--blue-color);
   }
</style>
</head>
<body>
   <h6>Heading h6</h6>
   <h5>Heading h5</h5>
   <h4>Heading h4</h4>
   <h3>Heading h3</h3>
   <h2>Heading h2</h2>
   <h1>Heading h1</h1>
</body>
</html>

CSS <dashed-ident> - 使用 @color-profile

當使用 <dashed-ident> 與 CSS color() 函式時，必須首先宣告@color-profile at-rule -

@color-profile --my-color-profile {
   src: url(""https://example.com/your-color-profile.icc");
}
.box {
   background-color: color(--my-color-profile 0% 60% 30% 0%);
}

CSS <dashed-ident> - 使用 @font-palette-values

以下示例演示瞭如何使用 <dashed-ident> 與@font-palette-values at-rule，首先宣告 at-rule，然後用於設定font-palette 屬性 -

<html>
<head>
<style>
   @font-palette-values MyCustomFontPalette {
      primary-font: 'Arial', sans-serif;
      accent-font: 'Georgia', serif;
      heading-font: 'Helvetica', sans-serif;
   }
   h1,h2,h3,h4 {
      font-palette: MyCustomFontPalette;
      font: 20px MyCustomFontPalette('primary-font');
      color: red;
   }
</style>
</head>
<body>
   <h1>This is a heading</h1>
   <h2>Another heading</h2>
   <h3>Yet another heading</h3>
   <h4>One more heading</h4>
</body>
</html>

列印頁面