CSS 数据类型

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

  • 用户代理能够应用强制颜色模式，一种辅助功能，通过将颜色限制为预定的调色板来覆盖作者在特定属性中的颜色选择。

  • <system-color> 提供了跨页面集成的选定颜色在强制颜色模式下。 Windows 的高对比度设置作为示例。

  • 对于在强制颜色模式下未覆盖的特性，编写者应使用 <system-color> 来保持一致性。

  • 强制颜色媒体功能允许检测强制颜色模式。有趣的是，<color> 和 <system-color> 是等效的。

语法

<systemcolorkeyword>

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

  • AccentColor - 重音用户界面控件的背景

  • AccentColorText - 重音用户界面控件的文本

  • ActiveText - 活动链接的文本

  • ButtonBorder - 控件的基本边框颜色

  • ButtonFace - 控件的背景颜色

  • ButtonText - 控件的文本颜色

  • Canvas - 应用程序内容或文档的背景

  • CanvasText - 应用程序内容或文档中的文本颜色

  • Field - 输入字段的背景

  • FieldText - 输入字段中的文本

  • GrayText - 禁用项目的文本颜色（例如禁用的项目） control)

  • 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>