样式表必须是内联的答案

【问题标题】：Style sheet must be inline样式表必须是内联的
【发布时间】：2020-09-02 02:26:25
【问题描述】：

我创建了一个精美的按钮和两个文本样式。这些样式在 html 的头部内联很好，但是当我链接到外部 css 文件时，它会失败。只有文本样式看起来不错或按钮样式，但它们一起不起作用。似乎有些东西阻止了另一种风格以某种方式发挥作用......

提前致谢

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>thanks</title>

    <style>

    .button4 {
    background-color: #ff6600;
    border: none;
    color: #ffffff;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    display: block;
    font-size: 22px;
    margin: 4px 2px;
    transition-duration: 0.9s;
    cursor: pointer;

    -webkit-border-top-left-radius:8px;
    -moz-border-radius-topleft:8px;
    border-top-left-radius:8px;
    -webkit-border-top-right-radius:8px;
    -moz-border-radius-topright:8px;
    border-top-right-radius:8px;
    -webkit-border-bottom-right-radius:8px;
    -moz-border-radius-bottomright:8px;
    border-bottom-right-radius:8px;
    -webkit-border-bottom-left-radius:8px;
    -moz-border-radius-bottomleft:8px;
    border-bottom-left-radius:8px;  

}



.button4:hover {
  background-color: #ff9900;
  color: white;
}

.button4:focus {
    outline: none;

}

.title {
    text-align: center;
    font: 600 65px/120% Helvetica, Arial;
    text-transform: uppercase;
    color: #666666;
    padding-top: 200px;
    padding-bottom: 40px;
    vertical-align: top;
    margin: 0px;
}

.text {
    text-align: center;
    font: 600 20px/120% Helvetica, Arial;
    text-transform: uppercase;
    color: #666666;
    padding-top: 50px;
    padding-bottom: 40px;
    vertical-align: top;
    margin: 0px;

}   

</style>    
</head>


<body>

    <p class="title">title</p>
    <div class="text">text</div>

<button class="button4" id="buttonId" >Button</button>


</body>
</html>

【问题讨论】：

标签： html css hyperlink styles inline

【解决方案1】：

尝试使用“！important”。因为它会加载默认样式。我认为这就是为什么使用内联时它起作用的原因。使用如下

background-color: #ff6600 !important;

【讨论】：

【解决方案2】：

要检查外部 CSS 是否影响您的代码，请使用网络浏览器的开发人员工具。从开发人员工具中，您将能够看到不同的 CSS 行如何影响您的页面元素并更正您的代码。

【讨论】：