一个极简主义的无类优先 CSS 框架。编写纯粹的、语义化的 HTML，它看起来已完成。仅在需要特定样式时才添加类。一个文件，无构建步骤。压缩和 gzipped 后 6.7 KB，没有 JavaScript 和依赖项。默认无类。标题、表单、表格、卡片、手风琴、模态框和导航仅通过 HTML 元素样式来呈现。支持明暗模式。它会自动遵循访客的系统设置，并且 data-theme 让你强制使用任意模式。易于主题定制。每种颜色、字体、大小和半径都是 CSS 自定义属性。易于覆盖。元素样式的特异性为零，因此你自己的 CSS 总是能够优先于 !important 。无障碍支持。可见的焦点环，基于 ARIA 的状态（aria-invalid, aria-busy, aria-current）以及对减少运动的支持。组件 · 教程 · 备忘单 内容 安装 快速入门 受样式的元素 类和属性 布局 排版 主题 深色模式 覆盖样式 浏览器支持 文件 许可证 安装 下载。将 sumi.min.css 复制到你的项目中并链接它：< link rel ="stylesheet" href ="sumi.min.css" > CDN。通过 jsDelivr 从这个库加载它。< link rel ="stylesheet" href ="https://cdn.jsdelivr.net/gh/vladocar/Sumi.css/sumi.min.css" > 在开发过程中使用 sumi.css（未压缩）。它的注释解释了每个部分。快速入门<!doctype html >< html lang ="en">< head>< meta charset ="utf-8">< meta name ="viewport" content ="width=device-width, initial-scale=1">< title > 我的页面 </ title >< link rel ="stylesheet" href ="sumi.min.css" ></ head>< body>< header>< nav>< ul>< li>< strong > 我的站点 </ strong ></ li ></ ul >< ul >< li >< a href ="/" aria-current ="page"> 首页 </ a > </ li >< li >< a href ="/about"> 关于 </ a > </ li ></ ul ></ nav ></ header>< main>< hgroup >< h6 > 欢迎 </ h6 >< h1 > 你好，墨水。 </ h1 ></ hgroup >< p class ="lead"> 这个页面几乎无类地由 Sumi 样式化。 </ p >< a href ="#start" role ="button"> 开始 </ a ></ main >< footer>< p> © 2026 我的站点 </ p ></ footer ></ body ></ html ><header> , <main> 和 <footer> 在作为 <body> 的直接子元素时会自我居中。保留针对手机的视口元标签，并设置 lang 以便浏览器能够正确地断字长文本。受样式的元素 元素 结果 h1 – h6, p, 列表, blockquote, code, kbd, pre, mark 流动的字体比例和一致的垂直间距 <nav> 与两个 <ul> 导航栏，左右两组。 垂直内 <aside> <button> , [type=submit] , <a role="button"> 按钮 <input>, <select>, <textarea>, <label>, <fieldset> 全宽字段，带焦点环和辅助文本 type="checkbox", type="radio", type="range", type="file", type="color" 自定义控件，匹配主题 <table> 清晰的规则和表格数字 <article> 卡片。一个直接的 <header> 和 <footer> 变成阴影带 <details> / <summary> 手风琴，带动画的切换 <dialog> 带模糊背景的模态框 <progress>, <meter> 确定和不确定的条 Classes and attributes Sumi 对常规 HTML 之外的所有反应： 类或属性 作用 效果 .container .container-fluid .narrow 任何块 居中页面宽度（72rem），全宽，阅读宽度（44rem） .grid 外框 自适应列，每列至少宽 --s-grid-min（14rem） .cols-2 .cols-3 .cols-4 .cols-6 .cols-12 .grid 从 48rem 开始的固定列，下面一个列 .span-2 … .span-9, .span-full grid 子元素 跨越多个列 .row .spread .stack 外框 包装的灵活行，有间距的行，垂直堆叠 .display .lead 标题，段落 英雄标题，更大的介绍段落 .prose .serif 文本包裹 长格式阅读列，衬线字体 .secondary .contrast .outline 按钮 按钮颜色和轮廓样式 .small .large .full 按钮 大小，全宽 role="button" <a> 链接样式化为按钮 role="group" 外框 连接按钮，或输入和按钮 role="switch" checkbox 切换开关 aria-invalid="true" / "false" 字段 红色或绿色验证状态 aria-busy="true" 任何元素 正在加载的旋转器 aria-current="page" nav 链接 突出当前页面 data-tooltip="…" data-placement="bottom" 任何元素 工具提示，上下 data-theme="light" / "dark" <html> 或任何元素 强制颜色模式 .dropdown .right <details> 下拉菜单，右对齐 .callout + .success .warning .danger 块 消息框 .striped <table> 条纹行 .muted .small .center .sr-only .overflow-auto 任何元素 实用功能 一些示例 <!-- 按钮 --> < button > 保存 </ button > < button class ="secondary outline"> 取消 </ button > < button aria-busy ="true"> 正在保存 </ button > <!-- 带辅助文本和验证的字段 --> < label > 邮箱 < input type ="email" name ="email" aria-invalid ="true" aria-describedby ="email-help"> < small id ="email-help"> 输入有效的电子邮件地址。 </ small > </ label > <!-- 开关 --> < label > < input type ="checkbox" r