Pico CSS 初学者使用指南

作者
Tweet
Share
Share
Pin
0 Shares

CSS 是一项广泛应用且功能强大的样式技术，但有时使用起来可能颇具挑战性。因此，人们会借助诸如 Tailwind CSS 之类的 CSS 框架，以及 Less CSS 和 Sass 等预处理器来简化工作。

MUO 当日精选视频

请继续滚动查看内容

然而，有时这些框架或 CSS 的 “风格” 对于你正在进行的项目来说可能显得过于复杂。有时，你可能仅仅需要一个框架，它能提供最基本的功能来设计你的网站。这时候，Pico CSS 就派上用场了。Pico 是一个极简的 CSS 框架，它可以让你轻松地为原生的 HTML 元素设置样式。

在您的项目中安装 Pico CSS

在你的项目中启动并运行 Pico CSS 最常见的方式是使用内容分发网络 (CDN)。Pico CSS 在 jsDelivr CDN 上可用，你只需要指向托管在那里的 pico.min.css 文件即可：

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

另外，你也可以使用 Node 包管理器来安装 Pico CSS。要使用这种方式，请确保你的电脑上已经安装了 Node.js。 你可以通过运行以下命令来验证你的电脑上 Node.js 是否可用：

 node -v

如果 Node.js 可用，终端会显示它的版本。 如果你尚未安装，你可以查找如何在你的电脑上安装 Node.js。 通过运行以下命令安装 Pico CSS:

 npm install @picocss/pico

使用 Pico CSS 创建网站

在设置网站布局时，Pico CSS 提供了两个核心类：container 和 grid。创建一个新的文件夹，在该文件夹中创建 index.html 文件和一个 style.css 文件。在 index.html 文件中，添加以下样板代码：

 <!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css"
    />
    <link rel="stylesheet" href="https://wilku.top/a-beginners-guide-to-using-pico-css/style.css" />
    <title>Pico 网站</title>
  </head>
  <body>
    <div class="container">
      <h2>值得阅读的文章...</h2>
    </div>
  </body>
</html>

Pico CSS 网格系统

Pico CSS 中的网格系统非常简洁。你可以使用 grid 类来定义一个网格。在 Pico CSS 中，网格列在宽度小于 992 像素的设备上会自动折叠。

在 index.html 文件 body 标签内，紧接着 h2 标签的下方，创建一个包含四列的网格。

 <div class="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

网格中的每一个 div 都应该有两个类：container 和 card。 container 类是 Pico CSS 原生的类，用于启用居中视口。 接下来，使用一些示例内容来填充网格，如下所示：

 <div class="grid">
  <div class="container card">
    <img
      src="https://images.pexels.com/photos/70069/pexels-photo-70069.jpeg"
    />
    <h4 class="title">为什么鸟儿在早晨歌唱？</h4>
    <div class="metadata">
      <span>David Uzondu</span>
      <span>13 分钟前</span>
    </div>
  </div>
  <div class="container card">
    <img
      src="https://images.pexels.com/photos/1024510/pexels-photo-1024510.jpeg"
    />
    <h4 class="title">小鸭子的秘密生活</h4>
    <div class="metadata">
        <span>Sam Holland</span>
        <span>53 分钟前</span>
    </div>
  </div>
  <div class="container card">
    <img
      src="https://images.pexels.com/photos/2152/sky-earth-space-working.jpg"
    />
    <h4 class="title">NASA 的新任务：派遣地平论者到
    地球边缘以证明他们是错的</h4>
    <div class="metadata">
      <span>Simon Peterson</span>
      <span>1 小时前</span>
    </div>
  </div>
  <div class="container card">
    <img
      src="https://images.pexels.com/photos/12086689/pexels-photo-12086689.jpeg"
    />
    <h4 class="title">当地奶奶赢得国际嘻哈舞蹈比赛，
    证明年龄只是一个数字</h4>
    <div class="metadata">
      <span>匿名</span>
      <span>2 天前</span>
    </div>
  </div>
</div>

为了处理样式，请打开 style.css 文件并添加以下内容：

 img {
    width: 100%;
    background-size: cover;
    border-radius: 10px;
    height: 200px;
}
.card {
    background-color: rgb(244, 244, 244);
    border-radius: 10px;
    padding: 10px;
    cursor: pointer;
    margin-top: 10px;
}
.card:hover {
    transform: scale(1.03);
}
.metadata {
    margin-top: -30px;
    margin-bottom: 10px;
}
.title {
    margin-top: 10px;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.metadata {
    font-size: 14px;
}
span:nth-child(1)::after {
    content: " -";
}

当你在浏览器中打开该页面时，你应该能看到以下内容：

如何在 Pico CSS 中使用按钮

Pico CSS 提供了各种预设样式的 HTML 元素和组件。任何网站中最常见的元素之一就是按钮。

传统上，不同的浏览器呈现的按钮略有不同。Pico CSS 中的按钮元素可以创建一个在跨浏览器中具有一致样式的按钮。要使用它，只需像平常一样添加一个 button 元素即可：

 <button>这是一个按钮</button>

默认情况下，在 Pico CSS 中，按钮会占据其容器的全部宽度。如果你不希望这样，请确保在内联 HTML 元素上将 role 属性设置为“button”：

 <a href="https://www.google.com" role="button">前往 Google</a>

如何使用 Pico CSS 中的加载实用程序

在 Pico CSS 中，如果你在任何元素上将 aria-busy 设置为 “true”，它将自动添加一个加载指示器。如果你想告知用户某些元素尚未准备好与之交互，或者浏览器正在获取某些资源，你会发现这个功能非常有用。

 <a href="#" aria-busy="true">正在生成一次性密码，请稍候...</a>

以上代码将产生以下结果：

工具提示的实现可能有些棘手，但 Pico CSS 可以解决这个问题。它能轻松地在任何元素上创建工具提示，而无需任何复杂的 JavaScript。在 Pico CSS 中创建工具提示时，你需要使用两个属性：

  • data-tooltip：定义工具提示的内容。
  • data-placement：定义工具提示的位置。你可以将此属性设置为四个值之一：“top”、“right”、“bottom” 和 “left”。

以下代码向你展示了如何使用这个实用程序：

 <button data-tooltip="顶部" data-placement="top">顶部</button>
<button data-tooltip="右侧" data-placement="right">右侧</button>
<button data-tooltip="底部" data-placement="bottom">底部</button>
<button data-tooltip="左侧" data-placement="left">左侧</button>

当你在浏览器中运行它时，你应该能看到以下内容：

Pico CSS 中的手风琴

手风琴允许用户通过展开或折叠内容部分来切换内容部分的可见性，类似于手风琴乐器展开和收缩的方式。要在 Pico CSS 中实现此功能，请使用 details 元素：

 <details>
  <summary>这是一个手风琴</summary>
  <p>
      Taciti ac condimentum dapibus luctus volutpat ligula nec et mattis
      arcu ridiculus? Non posuere bibendum libero diam tempus nec odio non
      mauris elit! Euismod suspendisse pellentesque donec vestibulum dapibus
      iaculis. Cursus mollis quis praesent purus pulvinar pellentesque
      vulputate integer elit sodales? Egetnunc pellentesque eu eget
      consequat condimentum praesent nec auctor sapien luctus at, donec ac
      ex sit magna amet in.
  </p>
</details>

当浏览器显示此标记时，它应该提供一种显示或隐藏内容的方法，在本例中是一个下拉箭头：

什么时候应该使用 CSS 框架

CSS 框架可以帮助你简化 Web 应用程序的构建和样式设计流程。如果你想节省重复任务的时间并利用预构建的组件，你应该考虑使用 CSS 框架。

框架提供了一组预定义的 CSS 样式、布局网格和组件，这让你能够专注于应用程序的逻辑和功能。许多 CSS 框架都附带了详尽的文档和社区支持，这会在你遇到困难时非常有用。