# CSS 框架（CSS Framework） 下面是 jQuery UI 使用的 Class 名稱列表。這些 Class 用來創建跨應用程序的視覺一致性，且允許組件通過 [jQuery UI ThemeRoller](http://jqueryui.com/themeroller/) 進行主題化。下面的 CSS 類根據樣式是否是固定的結構化的，或者是否是可主題化的（顏色、字體、背景等），分別定義在 ui.core.css 和 ui.theme.css 兩個文件中。 ### 布局助手 * `.ui-helper-hidden`：對元素應用 `display: none`。 * `.ui-helper-hidden-accessible`：對元素應用訪問隱藏（通過頁面絕對定位）。 * `.ui-helper-reset`：UI 元素的基本樣式重置。重置的元素比如：`padding`、`margin`、`text-decoration`、list-style，等等。 * `.ui-helper-clearfix`：對父元素應用浮動包裝屬性。 * `.ui-helper-zfix`：對 `<iframe>` 元素應用 iframe "fix" CSS。 * `.ui-front`：應用 z-index 來管理屏幕上多個小部件的堆疊，如需了解更多詳情，請查看 [堆疊元素（Stacking Elements）](/jqueryui/api-stacking-elements.html) 頁面。 ### 小部件容器 * `.ui-widget`：對所有小部件的外部容器應用的 Class。對小部件應用字體和字體尺寸，同時也對自表單元素應用相同的字體和 1em 的字體尺寸，以應對 Windows 瀏覽器中的繼承問題。 * `.ui-widget-header`：對標題容器應用的 Class。對元素及其子元素的文本、鏈接、圖標應用標題容器樣式。 * `.ui-widget-content`：對內容容器應用的 Class。對元素及其子元素的文本、鏈接、圖標應用內容容器樣式。（可應用到標題的父元素或者同級元素） ### 交互狀態 * `.ui-state-default`：對可點擊按鈕元素應用的 Class。對元素及其子元素的文本、鏈接、圖標應用 "clickable default" 容器樣式。 * `.ui-state-hover`：當鼠標懸浮在可點擊按鈕元素上時應用的 Class。對元素及其子元素的文本、鏈接、圖標應用 "clickable hover" 容器樣式。 * `.ui-state-focus`：當鍵盤聚焦在可點擊按鈕元素上時應用的 Class。對元素及其子元素的文本、鏈接、圖標應用 "clickable hover" 容器樣式。 * `.ui-state-active`：當鼠標點擊可點擊按鈕元素上時應用的 Class。對元素及其子元素的文本、鏈接、圖標應用 "clickable active" 容器樣式。 ### 交互提示 Cues * `.ui-state-highlight`：對高亮或者選中元素應用的 Class。對元素及其子元素的文本、鏈接、圖標應用 "highlight" 容器樣式。 * `.ui-state-error`：對錯誤消息容器元素應用的 Class。對元素及其子元素的文本、鏈接、圖標應用 "error" 容器樣式。 * `.ui-state-error-text`：對只有無背景的錯誤文本顏色應用的 Class。可用于表單標簽，也可以對子圖標應用錯誤圖標顏色。 * `.ui-state-disabled`：對禁用的 UI 元素應用一個暗淡的不透明度。意味著對一個已經定義樣式的元素添加額外的樣式。 * `.ui-priority-primary`：對第一優先權的按鈕應用的 Class。應用粗體文本。 * `.ui-priority-secondary`：對第二優先權的按鈕應用的 Class。應用正常粗細的文本，對元素應用輕微的透明度。 ### 圖標 #### 狀態和圖像 * `.ui-icon`：對圖標元素應用的基本 Class。設置尺寸為 16px 方塊，隱藏內部文本，對 "content" 狀態的精靈圖像設置背景圖像。**注意：** _`.ui-icon` class 將根據它的父容器得到一個不同的精靈背景圖像。例如，`ui-state-default` 容器內的 `ui-icon` 元素將根據 `ui-state-default` 的圖標顏色進行著色。_ #### 圖標類型 在聲明 `.ui-icon` class 之后，接著您可以聲明一個秒速圖標類型的 class。通常情況下，圖標 class 遵循語法 `.ui-icon-{icon type}-{icon sub description}-{direction}`。 例如，一個指向右側的三角形圖標，如下所示： `.ui-icon-triangle-1-e` jQuery UI 的 [ThemeRoller](http://jqueryui.com/themeroller) 在它的預覽一欄中提供了全套的 CSS 框架圖標。將鼠標懸浮在圖標上可查看 class 名稱。 ### 其他視覺效果 #### 圓角半徑助手 * `.ui-corner-tl`：對元素的左上角應用圓角半徑。 * `.ui-corner-tr`：對元素的右上角應用圓角半徑。 * `.ui-corner-bl`：對元素的左下角應用圓角半徑。 * `.ui-corner-br`：對元素的右下角應用圓角半徑。 * `.ui-corner-top`：對元素上邊的左右角應用圓角半徑。 * `.ui-corner-bottom`：對元素下邊的左右角應用圓角半徑。 * `.ui-corner-right`：對元素右邊的上下角應用圓角半徑。 * `.ui-corner-left`：對元素左邊的上下角應用圓角半徑。 * `.ui-corner-all`：對元素的所有四個角應用圓角半徑。 #### 覆蓋 & 陰影 * `.ui-widget-overlay`：對覆蓋屏幕應用 100% 寬度和高度，同時設置背景顏色/紋理和屏幕不透明度。 * `.ui-widget-shadow`：對覆蓋應用的 Class，設置了不透明度、上偏移/左偏移，以及陰影的 "厚度"。厚度是通過對陰影所有邊設置內邊距（padding）進行應用的。偏移是通過設置上外邊距（margin）和左外邊距（margin）進行應用的（可以是正數，也可以是負數）。