学习Pure.CSS教程

Pure.CSS是一个轻量级的CSS框架，它只包含了最基本的CSS样式，没有像Bootstrap那样强大的组件，但适用于快速开发小型网站。

安装

你可以通过CDN引入Pure.CSS，也可以下载源码进行本地引用。在HTML文件中加入以下代码：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@2.0.3/pure-min.css">

使用

栅格系统

Pure.CSS的栅格系统只有5个类名，分别是.pure-g、.pure-u-1、.pure-u-1-2、.pure-u-1-3、.pure-u-2-3，其中.pure-g是最外层的容器，.pure-u-*指定了每个容器占据的宽度比例。

<div class="pure-g">
  <div class="pure-u-1">全屏宽度</div>
  <div class="pure-u-1-2">半屏宽度</div>
  <div class="pure-u-1-2">半屏宽度</div>
  <div class="pure-u-1-3">三分之一屏宽度</div>
  <div class="pure-u-2-3">三分之二屏宽度</div>
</div>

按钮

Pure.CSS提供了一些常用按钮的样式，包括.pure-button、.pure-button-primary、.pure-button-secondary，它们分别对应普通按钮、主按钮和次按钮。

<button class="pure-button">普通按钮</button>
<button class="pure-button-primary">主按钮</button>
<button class="pure-button-secondary">次按钮</button>

表单

Pure.CSS将表单元素的样式统一了一下，包括.pure-form、.pure-form-aligned、.pure-form-message、.pure-form-help-inline、.pure-form-help-block等。

<form class="pure-form">
  <fieldset>
    <legend>登录</legend>
    <label for="username">用户名：</label>
    <input id="username" type="text">
    <label for="password">密码：</label>
    <input id="password" type="password">
    <button type="submit" class="pure-button pure-button-primary">登录</button>
  </fieldset>
</form>

表格

Pure.CSS对表格的样式进行了统一，包括.pure-table、.pure-table-bordered、.pure-table-striped、.pure-table-horizontal等。

<table class="pure-table">
  <thead>
    <tr>
      <th>姓名</th>
      <th>性别</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jerry</td>
      <td>男</td>
      <td>24</td>
    </tr>
    <tr>
      <td>Jessica</td>
      <td>女</td>
      <td>22</td>
    </tr>
  </tbody>
</table>

总结

Pure.CSS是一个十分优秀的CSS框架，它提供了基本的样式和组件，可以让我们快速搭建一个小型网站，同时不影响自定义样式的使用。