CSS：为什么样式标签需要包含在带有Pure CSS框架的html中？

Question

Why do the style tags need to be included in the HTML with Pure CSS framework? 为什么样式标签需要包含在Pure CSS框架的HTML中？ The documentation has it too http://purecss.io/buttons/ I'm looking at the section "Colored buttons with rounded corners: Success Button" 文档也有它http://purecss.io/buttons/我正在看“带圆角的彩色按钮：成功按钮”部分

(look in this Codepen - in bottom left click on edit pen) （看看这个Codepen - 在左下角点击编辑笔）

notice is you uncomment the style tags in html it works? 注意你是否取消注释它工作的HTML中的样式标签？ why can't it pick it up from the css file? 为什么不能从css文件中取出它？

<style scoped>

    .button-success,
    .button-error,
    .button-warning,
    .button-secondary {
        color: white;
        border-radius: 4px;
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    }

    .button-success {
        background: rgb(28, 184, 65); /* this is a green */
    }

    .button-error {
        background: rgb(202, 60, 60); /* this is a maroon */
    }

    .button-warning {
        background: rgb(223, 117, 20); /* this is an orange */
    }

    .button-secondary {
        background: rgb(66, 184, 221); /* this is a light blue */
    }

</style>

<div>
    <button class="button-success pure-button">Success Button</button>
    <button class="button-error pure-button">Error Button</button>
    <button class="button-warning pure-button">Warning Button</button>
    <button class="button-secondary pure-button">Secondary Button</button>
</div>

Answer 1

CSS rules are assigned based on the order in which they are loaded. CSS规则是根据它们的加载顺序分配的。 You put the Yahoo Pure CSS file loading inside the <body> of that CodePen but the CSS you have typed in the CSS section is loaded before it (in the <head> ). 您将Yahoo Pure CSS文件加载到该 CodePen 的<body>中，但是您在CSS部分中键入的CSS在它之前加载 （在<head> ）。 This lets the later one overwrite it, reverting the settings to their defaults. 这允许后者覆盖它，将设置恢复为默认值。

CSS：为什么样式标签需要包含在带有Pure CSS框架的html中？

问题描述

1 个解决方案

解决方案1
2 已采纳 2014-01-25 05:32:51

Just load the pure file before the other files (but after fonts of course). 只需在其他文件之前加载纯文件（但当然是在字体之后）。

CSS：为什么样式标签需要包含在带有Pure CSS框架的html中？

问题描述

1 个解决方案

解决方案1 2 已采纳 2014-01-25 05:32:51

Just load the pure file before the other files (but after fonts of course). 只需在其他文件之前加载纯文件（但当然是在字体之后）。

解决方案1
2 已采纳 2014-01-25 05:32:51