CSS2.1鮮為人知的功能之一是能夠定義基礎(chǔ)操作系統(tǒng)主題正在使用的字體和顏色。在需要更緊密的OS集成時(shí)，這在情況下可能很有用，例如HTML幫助文件，Adobe Air或離線Web應(yīng)用程序。 在我們開始之前，有一些警告：

• 不依賴於所有OS/瀏覽器組合中的這些屬性。如果您的申請必須在Beos上的Opera中使用，則建議您先對其進(jìn)行測試！
>
• >該屬性已在CSS3中棄用，有利於外觀值類型（儘管此時(shí)瀏覽器支持極為有限）。
• >沒有什麼可以阻止用戶在其操作系統(tǒng)中定義異常，衝突或醜陋的配色方案。頁面將反映他們的選擇 - 而不是您的設(shè)計(jì)師的選擇。

>系統(tǒng)字體

使用“字體”屬性分配系統(tǒng)字體。請注意，家庭，大小和樣式均被適當(dāng)分配，例如

body
{
	font: caption;
}

以下字體值可用。 “示例”列顯示您的操作系統(tǒng)設(shè)置的當(dāng)前字體。 屬性 description 示例 字幕Controls字體（按鈕，下拉列表等）ABC ABC 123 Iconicon標(biāo)籤Fontabc ABC 123 Menumenu fontabc ABC 123 消息-BoxDialog盒Fontabc ABC 123 小型控制符號labelsABC ABC 123 狀態(tài) - 巴爾斯塔圖斯酒吧fontabc ABC 123

>系統(tǒng)顏色

系統(tǒng)顏色可以分配給任何期望顏色值的屬性，例如

body
{
	color: WindowText;
	background-color: Window;
	border: 2px solid ActiveBorder;
}

可用以下顏色值。它們在駱駝箱中顯示以具有可讀性，但任何外殼都是有效的。 “示例”列顯示OS設(shè)置的顏色。 屬性 description 示例 ActiveBorderActive窗口邊框? ActiveCaptionActive窗口標(biāo)題? 多個(gè)文檔接口的AppWorkSpaceBackground顏色? BackgroundDesktop背景? Batterface For 3D顯示元素? 3D顯示元素的butthhighhighdark陰影（遠(yuǎn)離光線）? ButtonShadowShadow顏色3D顯示元素? 按鈕上的buttonTextText? 字幕TextText在標(biāo)題，尺寸框和滾動(dòng)條箭頭框中? GrayTextGrayed（禁用）文本（＃000，如果不支持OS）? 在控件中選擇的燈光? 在控件中選擇的項(xiàng)目的亮點(diǎn)文本? 無效的窗口邊框? InactiveCaptioniNActive窗口標(biāo)題? 不活動(dòng)標(biāo)題中文本的intactivecaptiontextcolor? 工具提示控件的Infobackgroundbackground顏色? 用於工具提示控件的InfotextText顏色? Menumenu背景? MenutextText在菜單中? 捲軸滾動(dòng)圓形灰色區(qū)域? 3D顯示元素的ThreeddarkShadowdark陰影? 3D顯示元素的Threedfaceface顏色? 3D顯示元素的Threedhighlighthighlight顏色? 3D顯示元素的Threedlightshadowlight顏色（面向光）? 3D顯示元素的Threedshadowdark陰影? WindowWindow背景? WindowFrameWindow框架? Windows中的WindowTextText? 這些屬性對您的下一個(gè)項(xiàng)目有用嗎？

>關(guān)於CSS系統(tǒng)樣式的常見問題

>什麼是CSS系統(tǒng)樣式，為什麼它們很重要？它們很重要，因?yàn)樗鼈冊试S開發(fā)人員創(chuàng)建可以適應(yīng)用戶系統(tǒng)偏好的網(wǎng)頁，從而提供更具個(gè)性化和易於訪問的用戶體驗(yàn)。例如，如果用戶將其係統(tǒng)設(shè)置為“黑模式”，則使用CSS系統(tǒng)樣式樣式的網(wǎng)頁可以自動(dòng)調(diào)整以匹配此設(shè)置。

> CSS系統(tǒng)樣式與常規(guī)CSS樣式有何不同？

>常規(guī)CSS樣式是由開發(fā)人員定義的，並且無論用戶的系統(tǒng)設(shè)置如何保持相同。另一方面，CSS系統(tǒng)樣式是動(dòng)態(tài)的，可以根據(jù)用戶的系統(tǒng)偏好進(jìn)行更改。這使它們成為創(chuàng)建適應(yīng)性和用戶友好的Web設(shè)計(jì)的強(qiáng)大工具。

>

>如何在網(wǎng)絡(luò)設(shè)計(jì)中使用CSS系統(tǒng)樣式？

CSS系統(tǒng)樣式可以像其他任何樣式一樣在CSS代碼中使用。主要區(qū)別在於，您使用系統(tǒng)顏色關(guān)鍵字而不是指定固定值。例如，為了設(shè)置背景顏色以匹配用戶的系統(tǒng)窗口背景，您將使用代碼背景色：窗口;。

CSS系統(tǒng)樣式的一些示例是哪些示例？

是否由所有瀏覽器支持的CSS系統(tǒng)樣式？

>

我可以將CSS系統(tǒng)樣式與其他CSS樣式使用嗎？

>是的，可以與其他CSS樣式組合使用CSS系統(tǒng)樣式。這使您可以創(chuàng)建一種既具有適應(yīng)性又與您的品牌一致的設(shè)計(jì)。

> CSS系統(tǒng)樣式如何改善可訪問性？ >，通過允許Web頁面適應(yīng)用戶的系統(tǒng)偏好來改善可訪問性。這可以使有視覺障礙的用戶更容易導(dǎo)航您的網(wǎng)站，因?yàn)樗麄兛梢哉{(diào)整系統(tǒng)設(shè)置以滿足他們的需求。 我可以覆蓋CSS系統(tǒng)樣式嗎？ 是的，您可以通過在CSS代碼中指定其他樣式來覆蓋CSS系統(tǒng)樣式。但是，請記住，這將否定使用系統(tǒng)樣式的適應(yīng)性好處。 >>使用CSS系統(tǒng)樣式有任何缺點(diǎn)嗎？ >>使用CSS系統(tǒng)樣式的一個(gè)潛在缺陷，它們可以導(dǎo)致不同系統(tǒng)跨不同系統(tǒng)的不一致設(shè)計(jì)。但是，可以通過結(jié)合系統(tǒng)樣式和常規(guī)CSS樣式來減輕這種情況。 >我在哪裡可以了解有關(guān)CSS系統(tǒng)樣式的更多信息？ >在線可以在線學(xué)習(xí)許多有關(guān)CSS系統(tǒng)樣式的資源。一些推薦的站點(diǎn)包括Mozilla開發(fā)人員網(wǎng)絡(luò)，W3C和Sitipoint。 >

以上是如何在CSS中使用操作系統(tǒng)樣式的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！