CSS 数据类型 - <system-color>

CSS 数据类型 <system-color> 通常与网页上不同组件的默认颜色选择相关联。

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

语法

<systemcolorkeyword>

可以使用以下系统颜色关键字

AccentColor - 加强型用户界面控件的背景
AccentColorText - 加强型用户界面控件的文本
ActiveText - 活动链接的文本
ButtonBorder - 控件的基本边框颜色
ButtonFace - 控件的背景颜色
ButtonText - 控件的文本颜色
Canvas - 应用程序内容或文档的背景
CanvasText - 应用程序内容或文档中的文本颜色
Field - 输入字段的背景
FieldText - 输入字段中的文本
GrayText - 禁用项目的文本颜色（例如，禁用的控件）
Highlight - 选定项目的背景
HighlightText - 选定项目的文本颜色
LinkText - 非活动、未访问链接的文本
Mark - 已特别标记的文本的背景（例如，HTML mark 元素）
MarkText - 已特别标记的文本（例如，HTML mark 元素）
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>

打印页面