0

Pure CSS フレームワークを使用した HTML にスタイル タグを含める必要があるのはなぜですか? ドキュメントにもありますhttp://purecss.io/buttons/「角の丸い色付きボタン: 成功ボタン」セクションを見ています。

(このCodepenを見てください -左下の編集ペンをクリックしてください)

動作するhtmlのスタイルタグのコメントを外していますか?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>
4

1 に答える 1

2

CSS ルールは、読み込まれた順序に基づいて割り当てられます。その CodePen の内部に<body>Yahoo Pure CSS ファイルの読み込みを配置しますが、 CSS セクションに入力した CSS はその前に読み込まれます( <head>)。これにより、後の方が上書きして、設定をデフォルトに戻すことができます。

純粋なファイルを他のファイルの前にロードするだけです(ただし、もちろんフォントの後)。

于 2014-01-25T05:32:51.050 に答える