极客笔记主要的CSS市场链接颜色
primer CSS是一个框架，允许用户向HTML元素中添加预定义的样式。我们可以使用primer CSS来为各种HTML元素，如按钮、链接、表单等添加样式。
在本教程中，我们将学习使用primer CSS为HTML链接添加不同颜色的样式。
语法
用户可以按照下面的语法使用primer CSS来为HTML链接添加样式。
<a class="Link--primary" href="#url">Primary Link </a>
在上面的语法中，我们使用了“Link-primary”类和“a”标签来进行样式设置。
示例1
我们可以使用primer 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.tutorialspoint.com/javascript/index.htm"> Primary Link </a> </div>
<div> <a class="Link--secondary" href="https://www.tutorialspoint.com/codingground.htm"> Secondary link </a> </div>
</body>
</html>
示例2
在下面的示例中，我们通过将“color-fg-muted” class添加到锚标签上，来使链接变为静音。同时，我们添加了一个嵌套链接，并为其添加了“Link—onHover” class，以仅对嵌套链接添加鼠标悬停效果。
通过这种方式，我们可以管理嵌套链接上的鼠标悬停效果。
<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.tutorialspoint.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.tutorialspoint.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.tutorialspoint.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 官方网站获取与链接相关的所有类名的参考，并对链接进行自定义。