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>

列印頁面