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>

打印页面