css - 内联 CSS 不工作

Question

我在 <a> 中有 CSS标签。
为什么是color没有应用？

HTML:

    <a href="example.com" style="
     .button {  
       color: red;  
     }
     .button:hover {
       color: blue;
     }">text</a>

Answer 1

在当前形式中，您的 HTML 无效，因为您的 style 属性试图使用伪类(:active、:hover)并且类选择器 (.button)。 style 属性只能包含声明 block (不带大括号)。

The value of the style attribute must match the syntax of the contents of a CSS declaration block (excluding the delimiting braces)

CSS 样式属性 ( http://www.w3.org/TR/css-style-attr/)

CSS 声明 block 定义为:

A declaration block starts with a left curly brace ({) and ends with the matching right curly brace (}). In between there must be a list of zero or more semicolon-separated (;) declarations.

语法和基本数据类型 ( http://www.w3.org/TR/CSS21/syndata.html#rule-sets )

理想情况下，样式规则将移动到包含在页面 head 中的单独样式表中，但您可以将规则提取到 style 标记中。

<style>
  .button {
    text-decoration: none;
    text-align: center;
    padding: 6px 16px;
    border: outset 5px #005072;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    font: 18px Verdana, Geneva, sans-serif;
    font-weight: bold;
    color: #000000;
    background-color: #a62152;
    background-image: -moz-linear-gradient(top, #a62152 0%, #4326b5 100%);
    background-image: -webkit-linear-gradient(top, #a62152 0%, #4326b5 100%);
    background-image: -o-linear-gradient(top, #a62152 0%, #4326b5 100%);
    background-image: -ms-linear-gradient(top, #a62152 0%, #4326b5 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#4326b5', endColorstr='#4326b5', GradientType=0);
    background-image: linear-gradient(top, #a62152 0%, #4326b5 100%);
    -webkit-box-shadow: 0px 0px 2px #d11abc, inset 0px 0px -1px #ffffff;
    -moz-box-shadow: 0px 0px 2px #d11abc, inset 0px 0px -1px #ffffff;
    box-shadow: 0px 0px 2px #d11abc, inset 0px 0px -1px #ffffff;
    text-shadow: 1px -1px 2px #ffffff;
    filter: dropshadow(color=#ffffff, offx=1, offy=-1);
    -webkit-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
    -o-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in;
  }
  .button:hover {
    padding: 6px 16px;
    border: outset 5px #005072;
    font: 18px Verdana, Geneva, sans-serif;
    font-weight: bold;
    color: #ffffff;
    background-color: #573bc7;
    background-image: -moz-linear-gradient(top, #573bc7 0%, #a5194c 100%);
    background-image: -webkit-linear-gradient(top, #573bc7 0%, #a5194c 100%);
    background-image: -o-linear-gradient(top, #573bc7 0%, #a5194c 100%);
    background-image: -ms-linear-gradient(top, #573bc7 0%, #a5194c 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#a5194c', endColorstr='#a5194c', GradientType=0);
    background-image: linear-gradient(top, #573bc7 0%, #a5194c 100%);
    -webkit-box-shadow: 0px 0px 2px #d11abc, inset 0px 0px -1px #ffffff;
    -moz-box-shadow: 0px 0px 2px #d11abc, inset 0px 0px -1px #ffffff;
    box-shadow: 0px 0px 2px #d11abc, inset 0px 0px -1px #ffffff;
    text-shadow: 1px -1px 3px #2fb5b1;
    filter: dropshadow(color=#2fb5b1, offx=1, offy=-1);
  }
  .button:active {
    padding: 6px 16px;
    border: inset 5px #005072;
    font: 18px Verdana, Geneva, sans-serif;
    font-weight: bold;
    color: #ffffff;
    background-color: #4326b5;
    background-image: -moz-linear-gradient(top, #4326b5 0%, #a62152 100%);
    background-image: -webkit-linear-gradient(top, #4326b5 0%, #a62152 100%);
    background-image: -o-linear-gradient(top, #4326b5 0%, #a62152 100%);
    background-image: -ms-linear-gradient(top, #4326b5 0%, #a62152 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#a62152', endColorstr='#a62152', GradientType=0);
    background-image: linear-gradient(top, #4326b5 0%, #a62152 100%);
    -webkit-box-shadow: 0px 0px 2px #d11abc, inset 0px 0px -1px #ffffff;
    -moz-box-shadow: 0px 0px 2px #d11abc, inset 0px 0px -1px #ffffff;
    box-shadow: 0px 0px 2px #d11abc, inset 0px 0px -1px #ffffff;
    text-shadow: 1px -1px 9px #36cfb0;
    filter: dropshadow(color=#36cfb0, offx=1, offy=-1);
  }
</style>
<a target="_blank" href="http://www.youtube.com/user/danielspringermusic?sub_confirmation=1" class="button">Subscribe</a>

总而言之，您需要:

• 将style block 添加到您的页面(最好在head 中)
• 将 CSS 代码从 a 中的 style 属性移动到此 style block
• 将class="button" 添加到a

将样式应用于元素是构建网页的基础之一，因此我建议您按照一些教程自学这些基础知识。 Learning the Web看起来是个不错的起点。

相反，您似乎在使用 Blogger。您可以按照以下步骤添加自定义 CSS:

1. Sign in on blogger.com.
2. Click on your blog.
3. On the left side of the page, click Templates > Customize > Advanced.
4. From here, you can change colors and fonts.
5. To make changes using custom CSS, click Add CSS.

使用 CSS 更改您博客的格式 ( https://support.google.com/blogger/answer/41954?hl=en )