数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法学研究Primer 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://tutorialspoint.com/javascript/index.htm"> Primary Link </a> </div>
<div> <a class="Link--secondary" href="https://tutorialspoint.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://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://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://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的官方网站参考所有与链接相关的类名，并自定义链接。
更新于：2023年5月5日
浏览量：114
广告