CSS 数据类型 - system-color

CSS 数据类型 <system-color>通常链接到网页上不同组件的默认颜色选择。

用户代理能够应用强制颜色模式，这是一种辅助功能，通过将颜色限制在预定的调色板中，覆盖作者在特定属性中的颜色选择。
<system-color> 提供选定的颜色，以便在强制颜色模式下跨页面集成。Windows 的高对比度设置起到说明作用。
对于在强制颜色模式下未覆盖的特征，编写器应使用 <system-color> 来保持一致性。
强制颜色媒体功能允许检测强制颜色模式。有趣的是，<color> 和<system-color>是等效的。

语法


 <systemcolorkeyword>

可以使用以下 <system-color> 关键字：

AccentColor - 带重音的用户界面控件的背景
AccentColorText - 带重音的用户界面控件的文本
ActiveText - 活动链接的文本
ButtonBorder - 控件的基本边框颜色
ButtonFace - 控件的背景颜色
ButtonText - 控件的文本颜色
Canvas - 应用程序内容或文档的背景
CanvasText - 应用程序内容或文档中的文本颜色
Field - 输入字段的背景
FieldText - 输入字段中的文本
GrayText - 禁用项（例如，禁用的控件）的文本颜色
Highlight - 所选项目的背景
HighlightText - 所选项目的文本颜色
LinkText - 非活动、未访问的链接的文本
Mark - 已特别标记的文本的背景（例如由 HTML 标记元素标记）
MarkText - 已特殊标记的文本（例如由 HTML 标记元素标记）
VisitedText - 访问过的链接的文本

CSS <system-color> - 系统颜色关键字

以下示例演示了 <system-color> 关键字（如 ButtonFace、ButtonBorder 和 ActiveText）的用法，这些关键字分别负责设置按钮的面部和边框的系统颜色以及锚链接的颜色。添加了两个按钮，一个按钮具有用户定义的背景颜色和边框样式，另一个按钮的值为 ButtonFace。


<html>
<head>
<style>
	 	a.linkColor {
	 	 	 color: ActiveText;
	 	}
	 	button{
	 	 	 background-color: aqua;
	 	 	 border: 2px inset red;
	 	}

	 	button.sysColor {
	 	 	 background-color: ButtonFace;
	 	 	 border: 2px ButtonBorder solid;
	 	}
</style>
</head>
<body>
	 	<div>
	 	 	 <h3>Button related keywords</h3>
	 	 	 <button>User defined Color</button>
	 	 	 <button class="sysColor">ButtonFace</button>
	 	</div>
	 	<div>
	 	 	 <h3>Link related keywords</h3>
	 	 	 <a href="#" class="linkColor">ActiveText</a>
	 	</div>
</body>
</html>

打印本页