PICO-CN DOCS · V2.1.1 · 中文文档

HTML
就够了。

Pico 为原生标签提供开箱即用的响应式样式与明暗模式。零依赖,一行 CSS 即可起步。

  • 约 15 KBgzip 轻量
  • 零依赖无 JS 运行时
  • 双模式浅色 / 深色
  • MIT开放许可
picocss.ndjp.net/docs/实时渲染

Hello world!

语义即样式:标题、链接、表单开箱可用。

手风琴:原生 details,零 JS

卡片、弹窗、提示条同理,开箱即用。

以上全部由原生 HTML 渲染,可直接交互试试

classless 可用20 套预编译主题
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
v2.1.1 · 另有手动下载与 Composer 安装手动安装 ·Sass 定制 ·版本选择器

恰到好处的一切

Pico 是「加强版 HTML 重置」,也是干净设计系统的起点:先给好默认,再留足定制空间。

20 套配色,开箱即换

预编译调色板走 CDN 引入,Indigo 为默认,组合超过 100 种。

查看颜色 →

明暗模式跟手

跟随系统偏好,顶栏可手动钉住选择,首帧写入防闪烁。

配色方案 →

容器与栅格

居中容器、流式区块与 12 列栅格,各断点自动适配。

栅格文档 →

语义排版,自带层级

标题、引用、表格、代码无需类名,行高与中文回退已调好。

排版文档 →

12 行起步

pico.min.css 挂进 <head>,剩下的交给语义标签。

index.html
<!doctype html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="color-scheme" content="light dark">
    <link rel="stylesheet" href="…/pico.min.css">
    <title>Hello world!</title>
  </head>
  <body>
    <main class="container"></main>
  </body>
</html>

实时效果

Hello world!

语义即样式

这是一段普通的 HTML。表单、表格、卡片开箱可用。

表单文档 →

按需直达文档

39 页中文文档,与官方 URL 一一对应,锚点保留英文 slug。

从第一行语义标签开始

中文翻译遵循 MIT 许可,与上游文档结构保持同步。

阅读文档