但是，當我將我的 css 代碼移回 html 檔案中的正文（不使用 href=""）時，像填充和顏色這樣的編輯適用于前端，這是我的 css 代碼。
<style>
.subscribe-button {
background-color: rgb(204, 0, 0);
color:white;
border: none;
padding-top: 10px;
padding-left: 16px;
padding-right: 16px;
padding-bottom: 10px;
border-radius: 2px;
cursor: pointer;
margin-right: 5px;
margin-left: 10px;
transition: opacity 0.15s;
vertical-align: top;}
</style>
uj5u.com熱心網友回復：
看起來您已經將帶有 html 標記的 css 復制到了您的 .css 檔案中。確保您在 .css 檔案中擁有的唯一代碼是標簽之間的代碼。
Style.css 檔案內容應如下所示。
.subscribe-button {
background-color: rgb(204, 0, 0);
color:white;
border: none;
padding-top: 10px;
padding-left: 16px;
padding-right: 16px;
padding-bottom: 10px;
border-radius: 2px;
cursor: pointer;
margin-right: 5px;
margin-left: 10px;
transition: opacity 0.15s;
vertical-align: top;
}
.subscribe-button:hover {
opacity:0.8;
}
.subscribe-button:active {
opacity:0.4;
}
.join-button {
background-color: rgb(255, 255, 255);
border: 1px solid #065fd4;
border-radius: 2px;
border-style: solid;
border-width: 1px;
padding-top: 9px;
padding-left: 16px;
padding-right: 16px;
padding-bottom: 9px;
cursor: pointer;
margin-right: 5px;
transition: background-color .15s,
color .15s;
vertical-align: top;
}
.join-button:active {
opacity: 0.7;
}
.join-button:hover {
background-color: hwb(222 13% 3%);
color: rgb(255, 255, 255);
}
.tweet-button
{
color:rgb(255, 255, 255);
background-color: rgb(29, 155, 240);
border-style: solid;
border-color: rgb(3, 134, 216);
border-width: 1px;
padding-top: 7px;
padding-left: 16px;
padding-right: 16px;
padding-bottom: 7px;
border-radius: 50px;
cursor: pointer;
font-weight: bold;
font-size: 15;
transition: box-shadow .15s;
vertical-align: top;
}
.tweet-button:hover {
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.159);
}html 檔案內容應如下所示
<button class="subscribe-button">
SUBSCRIBE
</button>
<button class="join-button">
JOIN
</button>
<button class="tweet-button">
Tweet
</button>uj5u.com熱心網友回復：
您似乎誤解了 .css 檔案的作業原理。您不應該在其中包含任何 HTML 標記（例如<div>）。它應該是這樣的：https://www.webucator.com/article/how-to-create-a-css-external-style-sheet/僅使用選擇器.div{}和其中的代碼.div{color:red;}。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/528583.html