資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法學研究如何在 CSS 中更改連結顏色？
在 CSS 中更改連結顏色是一個非常簡單的過程。我們將瞭解更改 CSS 中連結顏色的不同方法。在這篇文章中，我們有很多連結，我們的任務是使用 CSS 更改連結顏色。
更改 CSS 中連結顏色的方法
以下是我們將在這篇文章中逐步講解並提供完整示例程式碼的更改 CSS 中連結顏色的方法列表。
使用 CSS 選擇器更改連結顏色
要更改 CSS 中的連結顏色，我們將使用 CSS 選擇器，例如 **元素選擇器**、**ID 選擇器**和**類選擇器**來選擇連結，並使用 CSS color 屬性來更改其顏色。
- 我們在 HTML 文件中使用了 錨點 標籤來建立超連結。
- 在示例 1 中，我們使用了 **元素選擇器**來使用 CSS **color** 屬性更改連結顏色。
- 在示例 2 中，我們使用了 **id** 和 **class** 選擇器以及 CSS **color** 屬性來更改連結顏色。
示例 1
在這個示例中，我們使用了 **"a"** 選擇器來更改 CSS 中的連結顏色。
<html>
<head>
<style>
a{
color:#ab352c;
}
</style>
</head>
<body>
<h3>
To Change Link Color in CSS
</h3>
<p>
In this example, we are using <strong>element
</strong> selector to change link color in
CSS.
</p>
<h4>
Here is a list of tutorials of front-end
technologies available on <a href="/index.htm"
target="_blank">Tutorialspoint</a>.
</h4>
<ul>
<li><a href="/html/index.htm" target="_blank">
HTML</a></li>
<li><a href="/css/index.htm" target="_blank">
CSS</a></li>
<li><a href="/tailwind_css/index.htm" target="_blank">
Tailwind CSS</a></li>
<li><a href="/javascript/index.htm" target="_blank">
Javascript</a></li>
<li><a href="/reactjs/index.htm" target="_blank">
ReactJS</a></li>
</ul>
</body>
</html>
示例 2
在這個示例中，我們使用了 **id** 和 **class** 選擇器來更改 CSS 中的連結顏色。
<html>
<head>
<style>
#special-link {
color: red;
}
.special-link {
color: green;
}
</style>
</head>
<body>
<h3>
To Change Link Color in CSS
</h3>
<p>
In this example, we are using <strong>id
</strong> and <strong>class</strong> selector
to change link color in CSS.
</p>
<a id="links" href = "/index.htm">
Change the link color with ID Selector in CSS
</a>
<br>
<a class="links" href = "/index.htm">
Change the link color with CLASS Selector in CSS
</a>
</body>
</html>
基於狀態更改連結顏色
在這種更改 CSS 中連結顏色的方法中，我們將根據其不同的狀態更改連結顏色。連結有四種狀態：
示例
在這個示例中，我們使用 無序列表 (ul 和 li 標籤) 建立了一個技術連結列表，並且我們使用 CSS **color** 屬性根據連結的狀態更改連結顏色。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
a:link {
color: #04af2f;
text-decoration: none;
}
a:visited {
color: #eb2c4c;
}
a:hover {
color: #fdf91e;
}
a:active {
color: #c63af1;
}
</style>
</head>
<body>
<h3>
To Change Link Color in CSS
</h3>
<p>
In this example, we are representing each
state of link with different color.
</p>
<h4>
Here is a list of tutorials of front-end
technologies available on <a href="/index.htm"
target="_blank">Tutorialspoint</a>.
</h4>
<ul>
<li><a href="/html/index.htm" target="_blank">
HTML</a></li>
<li><a href="/css/index.htm" target="_blank">
CSS</a></li>
<li><a href="/tailwind_css/index.htm" target="_blank">
Tailwind CSS</a></li>
<li><a href="/javascript/index.htm" target="_blank">
Javascript</a></li>
<li><a href="/reactjs/index.htm" target="_blank">
ReactJS</a></li>
</ul>
</body>
</html>
結論
更改 CSS 中的連結顏色是增強網站視覺效果的一種簡單有效的方法。透過使用選擇器、偽類和屬性，我們可以定位特定的連結或連結狀態並更改其顏色以匹配設計。在這裡，我們使用了 **CSS 選擇器**和各種 **連結狀態**來更改連結顏色。
更新於：2024年9月9日
5K+ 次瀏覽
廣告