所有 jQuery UI 插件都旨在允许开发人员将 UI 小部件无缝集成到其网站或应用程序的外观中。每个插件都使用 CSS 设置样式，并包含两层样式信息：标准 jQuery UI CSS 框架 样式和特定于插件的样式。
jQuery UI CSS 框架提供了语义表示类，以指示小部件中元素的作用，例如标题、内容区域或可点击区域。这些类在所有小部件中始终如一地应用，因此可点击的选项卡、手风琴或按钮都将应用相同的 ui-state-default 类来表示它可点击。当用户将鼠标悬停在其中一个元素上时，此类将更改为 ui-state-hover，然后在选择时更改为 ui-state-active。这种级别的类一致性可以轻松确保在所有小部件中具有相似角色或交互状态的所有元素看起来都相同。
CSS 框架样式封装在一个名为 theme.css 的文件中，这是由 ThemeRoller 应用程序修改的文件。框架样式仅包括影响外观的属性（主要是颜色、背景图像和图标），因此这些是“安全”样式，不会影响各个插件的功能。这种分离意味着开发人员可以通过修改 theme.css 文件中的颜色和图像来创建自定义外观，并知道随着未来插件或错误修复的推出，这些插件或错误修复应在无需修改的情况下与主题配合使用。
由于框架样式仅涵盖外观，因此特定于插件的样式表是分开的。它们包含使小部件具有功能所需的所有其他结构样式规则，例如尺寸、填充、边距、定位和浮动。在下载 jQuery UI 时，可以在 jquery-ui.structure.css 中找到它们。
我们鼓励所有创建 jQuery 插件的开发者利用 jQuery UI CSS 框架，因为它可以让最终用户更轻松地设置主题和使用您的插件。
链接 入门
为 jQuery UI 插件设置主题有三种通用方法
- 下载 ThemeRoller 主题：构建主题最简单的方法是使用 ThemeRoller 生成并下载主题。此应用程序将创建一个新的
jquery-ui.theme.css文件和一个包含所有必要的背景图像和图标精灵的images目录，可以简单地将其放入您的项目中。此方法是最容易创建和维护的，但会将自定义限制为 ThemeRoller 中提供的选项。 - 修改 CSS 文件：为了更好地控制外观，您可以选择从默认主题（Smoothness）或 ThemeRoller 生成的主题开始，然后调整
jquery-ui.theme.css文件或任何单个插件样式表。例如，您可以轻松调整所有按钮的圆角半径，使其与其他 UI 组件不同，或更改图标精灵的路径以使用自定义集。通过一些样式限定，您甚至可以在单个 UI 中同时使用多个主题。为了简化维护，建议仅将更改限制在jquery-ui.theme.css文件和图像中。 - 编写完全自定义的 CSS：为了获得最大的控制权，每个插件的 CSS 可以从头开始编写，而不使用框架类或特定于插件的样式表。如果无法通过修改 CSS 或使用高度自定义的标记来实现所需的外观，则可能需要这样做。此方法需要对 CSS 有深入的了解，并且需要为将来的插件进行手动更新。