如何更改CSS中的链接样式？

Question

我知道这听起来像是一个显而易见的问答，但是我花了很长时间试图弄清楚这一点，并且由于某种原因，没有一个答案对我不起作用。 老实说，这可能只是我无法理解的简单答案。 但这是问题所在：我正在使用HTML5，CSS和一些PHP创建网站。

问题是，我的链接显示为带下划线的蓝色和紫色。 我知道这是它们的外观，但是我尝试了许多不同的方法来重新设置带有text-decoration: none的链接的样式text-decoration: none和其他颜色，等等。

这是我的CSS和带有链接的HTML部分：

 * { padding: 0; margin: 0; } html, body { height: 100%; width: 100%; } a { text-decoration: none; color: brown; } .sidebar { width: 25%; height: 100%; float: left; background-color: #BC986A; overflow-y: scroll; } .side-option { width: 100%; height: 155px; background-color: #BC986A; } .side-option:hover, .side-option:focus { background-color: #DAAD86; } .side-name { font-family: "Indie Flower", cursive; font-size: 1.8em; margin: 2px 2px 0px 7px; padding: 5px 5px 0px 5px; } .side-image { width: 150px; height: 97px; margin: 0px 0px 0px 15px; border: 0.3em solid #FBEEC1; } .info { background-color: #659DBD; width: 75%; height: 100%; float: right; } #name { font-family: "Gloria Hallelujah", cursive; font-size: 50px; text-align: center; color: #FBEEC1; } #s-name { font-family: "Gloria Hallelujah", cursive; font-size: 20px; text-align: center; color: #FBEEC1; } #image { display: block; width: 384px; height: 256px; margin-left: auto; margin-right: auto; border: 0.5em solid #BC986A; margin-top: 10px; } #desc { font-family: "Rock Salt", cursive; font-weight: bold; font-size: 20px; text-align: center; color: #DAAD86; } 

 <div class="sidebar"> <a href="index.php?page=0"><div class="side-option"> <h2 class="side-name">Brown Bear</h2> <img src="http://maxpixel.freegreatpicture.com/static/photo/1x/Animal-Brown-Bear-Beast-Bear-Teddy-Bear-Mammal-422682.jpg" class="side-image" alt="Brown bear standing in tall plants."> </div></a> 

我不确定您是否需要所有这些，但是无论如何都可以。

Answer 1

对于悬停颜色更改，您可以使用此CSS

.sidebar a:hover{color:red; }

单击后保持颜色焦点

.sidebar a:focus{color:blue; }

Answer 2

1）您需要将代码从</div></a>最后更改为： </div></a></div>
2）链接的样式可以根据链接的状态而定。

    a:link - a normal, unvisited link
    a:visited - a link the user has visited
    a:hover - a link when the user mouses over it
    a:active - a link the moment it is clicked

您可以在以下网址了解更多信息： https : //www.w3schools.com/css/css_link.asp

 * { padding: 0; margin: 0; } html, body { height: 100%; width: 100%; } a, a:link, a:visited{ text-decoration: none; color: brown; } a:hover, a:active{ color: green; } .sidebar { width: 25%; height: 100%; float: left; background-color: #BC986A; overflow-y: scroll; } .side-option { width: 100%; height: 155px; background-color: #BC986A; } .side-option:hover, .side-option:focus { background-color: #DAAD86; } .side-name { font-family: "Indie Flower", cursive; font-size: 1.8em; margin: 2px 2px 0px 7px; padding: 5px 5px 0px 5px; } .side-image { width: 150px; height: 97px; margin: 0px 0px 0px 15px; border: 0.3em solid #FBEEC1; } .info { background-color: #659DBD; width: 75%; height: 100%; float: right; } #name { font-family: "Gloria Hallelujah", cursive; font-size: 50px; text-align: center; color: #FBEEC1; } #s-name { font-family: "Gloria Hallelujah", cursive; font-size: 20px; text-align: center; color: #FBEEC1; } #image { display: block; width: 384px; height: 256px; margin-left: auto; margin-right: auto; border: 0.5em solid #BC986A; margin-top: 10px; } #desc { font-family: "Rock Salt", cursive; font-weight: bold; font-size: 20px; text-align: center; color: #DAAD86; } 

 <div class="sidebar"> <a href="index.php?page=0"><div class="side-option"> <h2 class="side-name">Brown Bear</h2> <img src="http://maxpixel.freegreatpicture.com/static/photo/1x/Animal-Brown-Bear-Beast-Bear-Teddy-Bear-Mammal-422682.jpg" class="side-image" alt="Brown bear standing in tall plants."/> </div> </a> </div> 

Answer 3

a {
    text-decoration: none;
    color: brown;
}

您需要在此处进行更改以编辑<a href=""></a>链接

更改悬停选项：

a:hover {
    style it here
}

以及您网站上已访问的链接：

a:visited {
    style it here
}

Answer 4

您询问了如何设置链接样式 。

 a{ color: red; cursor: wait; font-size: 24px; transition: color 0.3s, text-shadow 0.3s; text-decoration: none; } a:hover{ color: green; text-shadow: 1px 2px 3px #000; text-decoration: overline; } a:active{ font-weight: 900; } 

 <a href="https://example.com" title="Does this annoy you?">Working link.</a>