在HTML中，如何使用内部CSS添加不同类型的超链接，添加了许多超链接

因此，在html中我添加了许多超链接1.第一个我希望它是正常的2.第二个我想让它变成不同的颜色，当鼠标滑过它时。3.第三个我希望它是一个按钮式的超链接。

您可以使用类来设置超链接的样式。始终使用伪类来设置超链接的样式。记住LVHA(链接、已访问、悬停、活动(。

a：链接-一个正常的、未访问的链接。

a： visited-用户访问过的链接。

a：悬停-当用户将鼠标悬停在上面时的链接。

a：活动-单击时的链接。

https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Styling_links

.link {
display: inline-block;
cursor: pointer;
}
.links {
display: flex;
align-items: center;
gap: 25px;
}
.link1 {
text-decoration: underline;
}
.link2:hover {
color: red;
}
.link3 {
background: yellow;
border-radius: 20px;
padding: 10px;
}

.link3:hover {
background: red;

}

<div class="links">
<a class="link link1">Hyperlink1</a>
<a class="link link2">Hyperlink2</a>
<a class="link link3">Hyperlink3</a>
</div>

CSS有.class:hover语法，可以在鼠标悬停时更改颜色。

<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/* first hyperlink: normal one  */
.firstHyperLink {
}
/* second one change color when mouse hover  */
.secondHyperLink:hover {
color: cornflowerblue;
}
/* third one: button style  */
.thirdHyperLink {
background-color: cornflowerblue;
padding: 12px;
}
</style>
</head>
<body>
<a class="firstHyperLink" href="">First Hyperlink</a>
<a class="secondHyperLink" href="">Second Hyperlink</a>
<a class="thirdHyperLink" href="">Third Hyperlink</a>
</body>

相关内容

最新更新

热门标签：