告别复杂CSS！pico.css让网页开发回归本质，语义化、零类名也能做出精美界面

还在为复杂的 CSS 框架而烦恼吗？Pico CSS 来拯救你！这是一个专为语义化 HTML 设计的极简 CSS 框架，让你的网页变得优雅而无需复杂的类名！

什么是 Pico CSS？

Pico CSS 是一个极简主义的 CSS 框架，专为语义化 HTML 设计。它让你可以：

极简设计：只需 HTML 标签，无需复杂类名
响应式布局：自动适配所有设备尺寸
深色模式：自动支持明暗主题切换
轻量级：文件小，加载快
高度可定制：130+ CSS 变量，轻松定制

想象一下，你只需要写 HTML，就能得到美观的网页！

快速开始

安装方式

1. CDN 方式（推荐新手）

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css"
/>

2. NPM 安装

# 使用 npm
npm install @picocss/pico

# 或使用 pnpm
pnpm add @picocss/pico

核心特性

1. 极简设计理念

Pico CSS 遵循”少即是多”的设计理念：

<!-- 传统CSS框架需要大量类名 -->
<div class="container display-flex my-md mx-sm">
  <form class="form shadow-md my-md mx-sm align-center">
    <div class="input-wrapper border-radius-sm">
      <input
        type="text"
        class="input text-color-gray placeholder-color-light-gray"
      />
    </div>
    <button class="button bg-color-blue text-color-white">提交</button>
  </form>
</div>

<!-- Pico CSS 只需要语义化HTML -->
<form>
  <input type="text" placeholder="输入内容" />
  <button type="submit">提交</button>
</form>

2. 响应式设计

所有元素都自动响应式，无需额外配置：

<!-- 自动响应式的网格布局 -->
<div class="grid">
  <div>项目 1</div>
  <div>项目 2</div>
  <div>项目 3</div>
  <div>项目 4</div>
</div>

3. 深色模式支持

自动支持用户的系统主题偏好：

<!-- 自动适配明暗主题 -->
<html lang="zh-CN">
  <!-- 内容会自动根据用户系统设置切换主题 -->
</html>

<!-- 手动指定主题 -->
<article data-theme="dark">
  <h2>深色主题内容</h2>
</article>

布局系统

容器

<!-- 居中容器 -->
<main class="container">
  <h1>居中内容</h1>
</main>

<!-- 流体容器 -->
<main class="container-fluid">
  <h1>全宽内容</h1>
</main>

网格系统

<!-- 自动网格布局 -->
<div class="grid">
  <div>列 1</div>
  <div>列 2</div>
  <div>列 3</div>
  <div>列 4</div>
</div>

响应式断点

设备	断点	视口宽度
超小屏	<576px	100%
小屏	≥576px	540px
中屏	≥768px	720px
大屏	≥992px	960px
超大屏	≥1200px	1140px

按钮组件

<button>主要按钮</button>
<button class="secondary">次要按钮</button>
<button class="contrast">对比按钮</button>
<button class="outline">轮廓按钮</button>
<button class="secondary outline">次要轮廓按钮</button>

表单组件

基础表单

<form>
  <label for="login-method"
    >选择登录方式
    <select id="login-method" name="login-method" required>
      <option value="" disabled selected>请选择</option>
      <option value="email">邮箱登录</option>
      <option value="phone">手机号登录</option>
      <option value="wechat">微信登录</option>
    </select>
  </label>
  <label for="name"
    >帐号
    <input
      type="text"
      id="name"
      name="name"
      placeholder="请输入帐号"
      required
    />
  </label>
  <label for="password"
    >密码
    <input
      type="password"
      id="password"
      name="password"
      placeholder="请输入密码"
      required
    />
  </label>
  <label for="read">
    <input type="checkbox" id="read" name="read" required />
    我已阅读并同意相关条款
  </label>
  <button type="submit">提交</button>
</form>

其他输入类型

<!-- 文件上传 -->
<label for="file"
  >文件上传
  <input type="file" id="file" name="file" />
</label>

<!-- 范围滑块 -->
<label for="range"
  >范围滑块
  <input type="range" min="0" max="100" value="50" id="range" name="range" />
</label>

<!-- 日期选择 -->
<label for="date"
  >日期
  <input type="date" id="date" name="date" />
</label>

<!-- 时间选择 -->
<label for="time"
  >时间
  <input type="time" id="time" name="time" />
</label>

<!-- 颜色选择 -->
<label for="color"
  >颜色
  <input type="color" id="color" name="color" value="#0eaaaa" />
</label>

表格组件

<!-- 条纹表格 -->
<table role="grid">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">姓名</th>
      <th scope="col">邮箱</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>张三</td>
      <td>zhangsan@example.com</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>李四</td>
      <td>lisi@example.com</td>
    </tr>
  </tbody>
</table>

高级组件

手风琴

<!-- 可折叠内容 -->
<details>
  <summary>可折叠内容 1</summary>
  <p>这里是可折叠的内容。点击标题可以展开或收起。</p>
</details>

<details open>
  <summary>可折叠内容 2</summary>
  <ul>
    <li>列表项 1</li>
    <li>列表项 2</li>
    <li>列表项 3</li>
  </ul>
</details>

进度条

<!-- 进度条 -->
<progress value="25" max="100"></progress>

<!-- 不确定进度条 -->
<progress id="indeterminate-progress" max="100"></progress>

<script>
  // 设置为不确定状态
  document.getElementById("indeterminate-progress").indeterminate = true;
</script>

加载状态

<!-- 按钮加载状态 -->
<button aria-busy="true">请稍等...</button>

<!-- 文章加载状态 -->
<article aria-busy="true">
  <h3>加载中的文章</h3>
</article>

<!-- 链接加载状态 -->
<a href="#" aria-busy="true">生成链接中，请稍等...</a>

主题定制

/* 自定义主题 */
:root {
  /* 主色调 */
  --primary: #e91e63;
  --primary-hover: #c2185b;
  --primary-focus: rgba(233, 30, 99, 0.25);
  --primary-inverse: #fff;

  /* 背景色 */
  --background-color: #fff;
  --card-background-color: #fff;

  /* 文本色 */
  --color: #333;
  --h1-color: #000;
  --h2-color: #000;
  --h3-color: #000;
  --h4-color: #000;
  --h5-color: #000;
  --h6-color: #000;

  /* 边框 */
  --border-color: #e0e0e0;
  --border-radius: 0.375rem;

  /* 间距 */
  --spacing: 1rem;
  --typography-spacing-vertical: 1.5rem;

  /* 字体 */
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  --font-size: 16px;
  --line-height: 1.5;
}

/* 深色主题 */
[data-theme="dark"] {
  --primary: #f48fb1;
  --primary-hover: #f06292;
  --primary-focus: rgba(244, 143, 177, 0.25);
  --primary-inverse: #000;

  --background-color: #1a1a1a;
  --card-background-color: #2a2a2a;

  --color: #e0e0e0;
  --h1-color: #fff;
  --h2-color: #fff;
  --h3-color: #fff;
  --h4-color: #fff;
  --h5-color: #fff;
  --h6-color: #fff;

  --border-color: #404040;
}

常见问题解决

1. 样式不生效

<!-- 确保正确引入CSS -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css"
/>

<!-- 确保使用语义化HTML -->
<main class="container">
  <h1>标题</h1>
  <p>内容</p>
</main>

2. 深色模式不工作

<!-- 确保添加color-scheme meta标签 -->
<meta name="color-scheme" content="light dark" />

<!-- 或手动指定主题 -->
<article data-theme="dark">
  <h2>深色内容</h2>
</article>

总结

Pico CSS 是一个功能强大且极简的 CSS 框架，它让网页开发变得简单而优雅。

主要优势：

✅ 极简设计：只需 HTML，无需复杂类名
✅ 响应式：自动适配所有设备
✅ 轻量级：文件小，加载快
✅ 深色模式：自动支持明暗主题
✅ 高度可定制：130+ CSS 变量
✅ 语义化：遵循 HTML 语义标准

现在就开始使用 Pico CSS，让你的网页变得简洁而美观吧！

小贴士：

Pico CSS 遵循”少即是多”的设计理念，专注于语义化 HTML 和极简设计。如果你需要更复杂的功能，可以考虑结合其他 CSS 框架使用。

如果你觉得这篇文章对你有帮助，别忘了点赞和分享哦！有问题欢迎在评论区讨论～

相关链接：

官方文档：https://picocss.com/
GitHub 仓库：https://github.com/picocss/pico

原文链接：https://code.ifrontend.net/archives/1360，转载请注明出处。

什么是 Pico CSS？

快速开始

安装方式

1. CDN 方式（推荐新手）

2. NPM 安装

核心特性

1. 极简设计理念

2. 响应式设计

3. 深色模式支持

布局系统

容器

网格系统

响应式断点

按钮组件

表单组件

基础表单

其他输入类型

表格组件

高级组件

手风琴

进度条

加载状态

主题定制

常见问题解决

1. 样式不生效

2. 深色模式不工作

总结

主要优势：

评论0

在线客服

升级VIP

全屏浏览

夜间模式

返回顶部

告别复杂CSS！pico.css让网页开发回归本质，语义化、零类名也能做出精美界面

什么是 Pico CSS？

快速开始

安装方式

1. CDN 方式（推荐新手）

2. NPM 安装

核心特性

1. 极简设计理念

2. 响应式设计

3. 深色模式支持

布局系统

容器

网格系统

响应式断点

按钮组件

表单组件

基础表单

其他输入类型

表格组件

高级组件

手风琴

进度条

加载状态

主题定制

常见问题解决

1. 样式不生效

2. 深色模式不工作

总结

主要优势：

猜你喜欢

Nuxt DevTools 全面上手：一键启用、可视化调试与性能体检

别再“滥用” useState：这些高频需求更该交给 useRef

前端测试驱动开发：Vitest 助力 Vue 项目单元测试工程化实战

React表单架构深度解析，受控vs非受控组件的技术内幕

React + DOMPurify：高性能HTML安全渲染解决方案 – 零依赖安全防护

可视化布局编辑器必备！GridStack.js实现拖拽式页面构建器

评论0

在线客服

升级VIP

全屏浏览

夜间模式

返回顶部