Question

我对编码很陌生，所以请温柔地对待我！我尝试将CSS代码添加到按钮中，我已经在Codepen中对其进行了测试，并将其显示为正常工作，但是当我在浏览器中尝试使用CSS代码时，它就会出现一个超链接，然后是它旁边的代码。

<a href="index.html" class="button">Home</a>

        .button 
        {padding: 10px 24px;
        font-family: trebuchet;
        Color: #E8DCEC;
        Background-color: #ed1c24;
        text-align: center;
        display: inline-block;
        font-size: 16px;
        border: 2px solid #8b52a1;
        border-radius: 4px;}

        .button:hover {
        background-color: #72bf44
        color: #E8DCEC; }

我确定我在这里错过了一些非常明显的东西，但是我已经看了很多，而且我看不到任何东西

Answer 1

CSS代码必须位于<style>中，或通过link标记链接到外部CSS文档中

<a href="index.html" class="button">Home</a>
<style>
.button {
  padding: 10px 24px;
  font-family: trebuchet;
  Color: #E8DCEC;
  Background-color: #ed1c24;
  text-align: center;
  display: inline-block;
  font-size: 16px;
  border: 2px solid #8b52a1;
  border-radius: 4px;
}

.button:hover {
  background-color: #72bf44 color: #E8DCEC;
}
</style>

代码适用于Codepen但不适用于浏览器

1 个答案: