造型精灵应用程序

层叠样式表（CSS）是一种为 HTML 文档设计样式的语言，可使开发人员将设计与内容分离开来。CSS 可增强网站的视觉效果，改善加载时间，实现响应式设计和跨浏览器兼容性。

在 Genie 应用程序中，您可以使用内联 CSS 样式属性，也可以在`public/` 文件夹中定义自己的样式表，并通过以下方式导入它们

Stipple.Layout.add_css("froop.css", "bootstrap.css")

如果您在`public/css/genieapp.css` 中编写样式，这些样式会自动导入到您的应用程序页面中。此外，您还可以使用 Quasar 框架提供的预定义类。

下面是一个使用了多种 CSS 样式和类的页面示例：

 [h1(class="blue-text", "Heading"),
 p(style="color: green; background: cyan", "Inline styled paragraph."),
 p(class="red-text","Paragraph with class.")]

这些类在`public/css/genieapp.css` 文件中定义，其中特定元素使用选择器作为目标：

/* Class Selector */
.red-text {
  color: red;
}

/* Element Selector */
p {
  font-size: 14px;
}

/* Class Selector */
.blue-text {
  color: blue;
}

使用类星体

Quasar 组件自带预定义的 CSS 类。这些类被添加到 HTML 元素中，用于样式化布局、填充等。例如，q-pa-sm 类可以为元素添加小填充，而`col-12` 类则可以设置 12 列网格布局中的列宽：

cell(class="q-pa-sm col-12",
    p("This paragraph has small padding and takes the full width of the container."))

请查阅 Quasar 官方文档，查看可用类的完整列表：https://quasar.dev/style/typography[Quasar CSS Helpers]。

使用尾风 CSS

Tailwind CSS 是一个广受欢迎的框架，它提供了一套用于设计页面样式的实用类。有了它，你几乎可以定制应用程序设计的方方面面，而无需定义自己的样式表。有关可用类的列表，请参见本页。要使用 Tailwind，请将必要的 JavaScript 与

Stipple.Layout.add_script("https://cdn.tailwindcss.com")

下面是之前使用 Tailwind 类的示例：

cell(class="p-4 w-full bg-blue-100 border border-blue-200 rounded shadow",
    p(class="text-blue-800 font-semibold", "This paragraph has moderate padding, a blue background, a rounded border, and a shadow, taking the full width of the container."))