資料結構
網路
關係資料庫管理系統 (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.tw/javascript/index.htm"> Primary Link </a> </div>
<div> <a class="Link--secondary" href="https://tutorialspoint.tw/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.tw/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.tw/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.tw/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
廣告