如何更改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>