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> 与 custom 属性结合使用。这里我们使用 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 配置文件

将 <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 规则，然后使用 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>

打印本页