CSS 数据类型

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>