Prime CSS 营销链接颜色

cssweb developmentfront end technology更新于 2024/5/30 9:48:17

Prime CSS 是一个框架，允许用户向 HTML 元素添加预定义样式。我们可以使用 Prime CSS 来设置各种 HTML 元素的样式，例如按钮、链接、表单等。

在本教程中，我们将学习如何使用 Prime CSS 为 HTML 链接设置各种颜色的样式。

语法

用户可以按照以下语法使用 Prime CSS 来设置 HTML 链接的样式。

<a class="Link--primary" href="#url">Primary Link </a>

在上面的语法中，我们使用了"Link-primary"类名和"a"标签来设置链接样式。

示例 1

我们可以使用 Prime CSS 的各种类名来设置 HTML 链接的样式。在下面的示例中，我们使用了"Link—primary"类名，当用户将鼠标悬停在链接上时，链接颜色会更改为主颜色(蓝色)。

此外，我们还使用了"Link—secondary"类名将链接颜色更改为次要颜色。同样，当我们将鼠标悬停在链接上时，链接颜色也会更改为蓝色。

<html>
<head>
   <link href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" rel="stylesheet" />
   <style>
      a {
         font-size: 1.6rem;
      }
   </style>
</head>
<body>
   <h1>Using the <i> primer CSS </i> to style links</h1> <br>
   <div> <a class="Link--primary" href="https://www.cainiaomax.com/javascript/index.htm"> Primary Link </a> </div>
   <div> <a class="Link--secondary" href="https://www.cainiaomax.com/codingground.htm"> Secondary link </a> </div>
</body>
</html>

示例 2

在下面的示例中，我们通过在锚标记中添加"color-fg-muted"类名来使链接静音。此外，我们还添加了带有"Link—onHover"类名的嵌套链接，以便仅在嵌套链接上添加悬停效果。

通过这种方式，我们可以管理嵌套链接上的悬停效果。

<html>
<head>
   <link href = "https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" rel = "stylesheet" />
   <style>
      a {
         font-size: 1.8rem;
      }
   </style>
</head>
<body>
   <h2>Using the <i> primer CSS </i> to style links</h2>
   <br>
   <a class = "color-fg-muted no-underline" href="https://www.cainiaomax.com/javascript/index.htm">
      No hover --- <span class = "Link--onHover"> Hover on this</span>
   </a>
</body>
</html>

示例 3

在下面的示例中，我们使用了 Primer CSS 中的"no-underline"类，将链接的下划线移除。此外，我们还使用了"color-fg-default"类来设置链接的默认颜色。

在此示例中，我们在链接内部添加了嵌套链接。

<html>
<head>
   <link href = "https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" rel = "stylesheet" />
   <style>
      a {
         font-size: 1.8rem;
      }
   </style>
</head>
<body>
   <h2>Using the <i> primer CSS </i> to style nested links.</h2>
   <br>
   <a class = "color-fg-default no-underline" href = "https://www.cainiaomax.com/javascript/index.htm">
      parent link <span class = "Link"> nested link </span>
   </a>
</body>
</html>

示例 4

在下面的示例中，我们将 SVG 图标插入到锚标记内。此外，我们还添加了锚文本。在输出中，用户可以看到带有 SVG 图标作为锚文本的链接。

<html>
<head>
   <link href = "https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" rel = "stylesheet" />
   <style>
      a {
         font-size: 1.7rem;
      }
   </style>
</head>
<body>
   <h1>Using the <i> primer CSS </i> to style nested links</h1>
   <br>
   <a class = "Link--primary text-bold" href="https://www.cainiaomax.com/codingground.htm">
      <svg xmlns = "http://www.w3.org/2000/svg" width = "20" height = "20" fill = "currentColor" class = "bi bi-code"
         viewBox = "0 0 16 16">
         <path
         d = "M5.854 4.854a.5.5 0 1 0-.708-.708l-3.5 3.5a.5.5 0 0 0 0 .708l3.5 3.5a.5.5 0 0 0 .708-.708L2.707 8l3.147-3.146zm4.292 0a.5.5 0 0 1 .708-.708l3.5 3.5a.5.5 0 0 1 0 .708l-3.5 3.5a.5.5 0 0 1-.708-.708L13.293 8l-3.147-3.146z" />
      </svg>
      <span class = "color-fg-muted"> Coding Ground </span>
   </a>
</body>
</html>

用户学习了如何使用 Primer CSS 来设置链接样式。基本上，开发人员只需将类名与常规 HTML 元素结合使用即可为特定元素设置样式。用户可以从 Primer CSS 官方网站参考所有与链接相关的类名，并自定义链接。