Question

我用CSS设置了这个按钮，但样式似乎没有应用于按钮。链接到网站。 http://randomstufffrommybrain.neocities.org/TheRandomPage.html

HTML：

<head>
<link rel="stylesheet" href=CSSFORTherandompage.css>
 </head>
<div id="Button5">
  <button><a href=Newsitetestcode/Newwebsitemainpage.html>New website</a> 
  </button>
</div>

CSS：

     #Button5 {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}

Answer 1

该样式未显示在按钮上，因为您在div#Button5但未按钮上添加了样式。

在css中应用此更改

button{
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}

JSFIDDLE

Answer 2

您需要将link标记放在HTML文件的head部分。

注意：此元素仅在head部分中出现，但它可以出现任意次。

Reference

Answer 3

所有<link>标记都应放在<head>
确保将外部CSS与HTML放在同一文件夹中，如link标记所示。如果它在另一个文件夹中，请提供相应的路径。

为了进一步调试，您可以使用一些JS：

function sheetLoaded() {
  // Do something interesting; the sheet has been loaded
}

function sheetError() {
  alert("An error occurred loading the stylesheet!");
}

<link rel="stylesheet" href="mystylesheet.css" onload="sheetLoaded()" onerror="sheetError()">

我用css设计的这个按钮不会样式

3 个答案: