作为前端开发工作者，经常需要使用各种样式库来美化页面。而在众多的 CSS 样式库中，papir.css 是一个新的力量。papir.css 是一个非常简洁、易用、易扩展的 CSS 框架，它具有不依赖任何框架的特点，但是又非常强大。本文将介绍 papir.css 的使用方法，包括如何安装和使用此库，以及如何根据自己的需要自定义样式。
安装 papir.css
papir.css 是通过 npm 包来管理的，所以安装它的方式很简单。你可以通过命令行来安装它：
npm install papir.css
使用 papir.css
安装完 papir.css 后，你就可以在你的项目中使用了。只需要在 HTML 页面头部引入 CSS 文件即可：
<link rel="stylesheet" href="/path/to/papir.min.css">
papir.css 是分组织的，每个组件都有自己的样式类名，因此你只需在需要的元素上添加对应的样式类就好了。下面是一些常用的样式类：
布局
papir.css 提供了多个布局样式。其中最常用的是 flex，它能快速设置元素的弹性布局。
<div class="flex"> <div class="item">左边元素</div> <div class="item">中间元素</div> <div class="item">右边元素</div> </div>
栅格化
papir.css 还提供了用于栅格化的样式类。使用栅格化可以将页面的布局分为多个等宽的列，从而使得布局更加清晰。
<div class="row"> <div class="column-4">1/3</div> <div class="column-4">1/3</div> <div class="column-4">1/3</div> </div>
按钮
papir.css 也提供了多个按钮样式类。使用这些样式类可以快速创建各种按钮。
<button class="button">默认按钮</button> <button class="button is-primary">主要按钮</button> <button class="button is-secondary">次要按钮</button>
表格
papir.css 还提供了一些简单的表格样式，让你的表格更加美观。
-- -------------------- ---- -------
------ --------------
-------
----
-----------
-----------
-----------
-----
--------
-------
----
-----------
--------------------
-------------------------
-----
----
-----------
--------------------
-------------------------
-----
--------
--------自定义 papir.css 样式
除了使用 papir.css 提供的样式类外，你还可以根据自己的需要来扩展 papir.css 样式。papir.css 使用了 PostCSS 构建工具来编译样式，这使得样式开发变得非常简单。
例如，如果您想要扩展 papir.css 的颜色主题，可以创建一个 custom.css 文件，并在其中添加以下代码：
@import "papir.css";
:root {
--primary-color: #79BD9A;
--secondary-color: #FFAD5C;
}在 HTML 页面头部引入这个 custom.css 文件，就可以使用这些自定义的颜色样式了。当然，你还可以对 papir.css 中的其他样式进行扩展和自定义。
<link rel="stylesheet" href="/path/to/custom.css">
总结
papir.css 是一个非常实用的 CSS 框架，它提供了许多有用的样式类，可以帮助你更快地美化页面。本文介绍了如何安装和使用 papir.css，并提供了一些样式类的示例。如果你需要更多细节，可以查看 papir.css 的文档。通过扩展 papir.css 样式，你可以根据自己的需要来定制页面样式，使得页面的样式更符合你的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005583b81e8991b448d56c5