样式表必须内联

问题描述 投票：0回答：2

我创建了一个精美的按钮和两种文本样式。这些样式在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
2个回答
0
投票

尝试使用“！重要”。因为它将加载默认样式。我认为这就是使用内联时起作用的原因。用法如下

background-color: #ff6600 !important;
0
投票

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.