html - CSSで異なる背景色を使用するいくつかの方法は何ですか？

Question

5つのWebページがあり、各Webページで背景色を変えたいとします。私は1つのcssファイルのみを使用しています。各Webページは次のようにアクセスされます：domain.com/page1

5つの異なるCSSファイルを使用して、本文の背景色を変更するだけですか、それともこれを実現するためのより簡単な方法がありますか？

score 1 · Accepted Answer

サイトごとに異なるclassものを追加し、そのクラスを使用して適切な背景色を取得します。<body>

もちろん、すべてのサイトに共通するコードを乗算する必要はありません。

score 1 · Accepted Answer

例えば：

「page1」：

<body id="page1">

「page2」：

<body id="page2">

あなたのCSS：

body#page1 {
    background: red;
}

body#page2 {
    background: blue;
}

score 1 · Accepted Answer

すべてのページが同じcssファイルを使用している場合、同じ背景がすべてに使用されます...

これを行う簡単な方法の1つは、ボディの既存の背景色を無効にすることです。したがって、以下を含むcssファイルが好きな場合：

body
{
   background-color: aqua;
}

次に、その下（cssファイルが実装された後）で、ページ上で新しい色を使用する必要があります。次のようにして、それを無効にすることができます。

<style type="test/css">
body
{
    background-color: blue;
}
</style>

score 1 · Accepted Answer

このような各ページの本文タグにシンプルなインラインスタイルを追加してみませんか？

ページ01

    <body style="background-color:#111;">

ページ02

    <body style="background-color:#222;">

ページ03

    <body style="background-color:#333;">

デザインに関して、そのような提案された配色のバリエーションはしばしば悪い考えであることを心に留めておいてください。あなたのアイデアの背後には意味のある機能があるかもしれませんが、そうでなければ、デザインプロセス全体の一貫性と組み合わせたミニマリズムをお勧めします。

4 に答える 4