所有 jQuery UI 插件的设计初衷都是为了让开发人员能够将 UI 小部件无缝集成到其网站或应用程序的外观风格中。每个插件都使用 CSS 进行样式设计，并包含两层样式信息：标准的 jQuery UI CSS 框架 样式和插件特定的样式。
jQuery UI CSS 框架提供了语义化的表现层类名，用于指示小部件内元素的作用，例如页眉（header）、内容区（content area）或可点击区域（clickable region）。这些类名在所有小部件中始终保持一致，因此可点击的标签页、折叠面板或按钮都会应用相同的 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 组件不同，或者更改图标精灵图的路径以使用自定义图标集。通过一定的样式作用域（scoping）处理，您甚至可以在单个 UI 中同时使用多个主题。为了保持维护简单，建议仅对jquery-ui.theme.css文件和图像进行限制性修改。 - 编写完全自定义的 CSS：为了获得最大的控制权，可以从头开始编写每个插件的 CSS，而不使用框架类或插件特定的样式表。如果通过修改 CSS 无法实现所需的外观，或者使用了高度自定义的标记，则可能有必要采取这种方法。此方法要求具备深厚的 CSS 专业知识，并且需要对未来的插件进行手动更新。