Pure.CSS教程

Pure.css是Yahoo公司开源的纯CSS框架，它非常轻量级，大小仅约3.8KB，且不依赖于任何JavaScript框架。Pure.css主要用于构建响应式的Web页面，它提供了一组通用的CSS类，可用于快速布局、排版、颜色和响应式设计等。

特点

• 纯CSS框架，无需JavaScript
• 超轻量级，大小仅约3.8KB
• 简单易用，提供了一组通用的CSS类
• 响应式设计，适应不同的屏幕尺寸和设备类型
• 支持标准浏览器和移动设备浏览器

使用

使用Pure.css非常简单，只需在HTML文件中引入相关的CSS文件即可。

CDN

您可以通过以下方式获取Pure.css：

<!-- 官方CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss/ds/pure-min.css" integrity="sha256-EZgCw/pnn0Vs3vT8soNp16EAkymO/zpVz+FvF8fDLWQ=" crossorigin="anonymous">

<!-- bootcdn -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/pure/2.0.3/pure-min.css" integrity="sha384-MB8TX+50iKz9VIcQPJq3HBY4/V91lPJ6UFiJeb1YBL2nMPF6S5U+E2DWU5ue5U5k" crossorigin="anonymous">

NPM

您也可以使用npm包管理器安装Pure.css：

npm install purecss

然后在项目中引入相关的CSS文件即可。

布局

Pure.css提供了一组布局类，可用于快速布局页面：

<div class="pure-g">
  <div class="pure-u-1-2">
    <p>这是左侧区域</p>
  </div>
  <div class="pure-u-1-2">
    <p>这是右侧区域</p>
  </div>
</div>

在上面的代码中，.pure-g表示一个网格容器，.pure-u-1-2表示一个网格单位，代表该元素占据一行中的一半宽度。通过这种方式，我们可以方便地将页面布局划分成若干列。

标题

Pure.css提供了一组标题类，可用于设置页面标题：

<h1 class="pure-h1">一级标题</h1>
<h2 class="pure-h2">二级标题</h2>
<h3 class="pure-h3">三级标题</h3>
<h4 class="pure-h4">四级标题</h4>
<h5 class="pure-h5">五级标题</h5>
<h6 class="pure-h6">六级标题</h6>

在上面的代码中，.pure-h1表示一级标题样式，.pure-h2表示二级标题样式，以此类推。

表格

Pure.css提供了一组表格类，可用于设置表格样式：

<table class="pure-table">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>

  <tbody>
    <tr class="pure-table-odd">
      <td>Row 1, Column 1</td>
      <td>Row 1, Column 2</td>
      <td>Row 1, Column 3</td>
    </tr>
    <tr>
      <td>Row 2, Column 1</td>
      <td>Row 2, Column 2</td>
      <td>Row 2, Column 3</td>
    </tr>
    <tr class="pure-table-odd">
      <td>Row 3, Column 1</td>
      <td>Row 3, Column 2</td>
      <td>Row 3, Column 3</td>
    </tr>
  </tbody>
</table>

在上面的代码中，.pure-table表示表格样式，.pure-table-odd表示奇数行的背景颜色。

按钮

Pure.css提供了一组按钮类，可用于设置按钮样式：

<button class="pure-button">普通按钮</button>
<button class="pure-button-primary">主要按钮</button>
<button class="pure-button-secondary">次要按钮</button>
<button class="pure-button-success">成功按钮</button>
<button class="pure-button-error">错误按钮</button>
<button class="pure-button-warning">警告按钮</button>

在上面的代码中，.pure-button表示普通按钮样式，.pure-button-primary表示主要按钮样式，以此类推。

表单

Pure.css提供了一组表单类，可用于设置表单样式：

<form class="pure-form">
  <fieldset>
    <legend>表单标题</legend>

    <input type="text" placeholder="请输入用户名">
    <input type="password" placeholder="请输入密码">

    <label for="checkbox" class="pure-checkbox">
      <input id="checkbox" type="checkbox"> 记住我
    </label>

    <button type="submit" class="pure-button pure-button-primary">提交</button>
  </fieldset>
</form>

在上面的代码中，.pure-form表示表单样式，.pure-checkbox表示复选框样式。

结束语

Pure.css是一个轻量级、简单易用的CSS框架，适用于快速搭建响应式Web页面。您可以通过官方网站了解更多信息：https://purecss.io/。