2

初心者からのアドバイスの直後に、CSSを適切に配置する方法について教えてください。

私は基本的な3ページのウェブサイトを持っています。各ページの下部にフッターが表示されます。フッターは各ページでメインスタイル（幅、高さなど）を同じに保ちますが、表示しているページ（背景色、フォント色）に応じて他のスタイルを変更したいと思います。私はこれができることを知っていますが、使用する正しい構文に関するいくつかのヒントを探しているので、もちろんこれがすでに正しい場合を除いて、悪い習慣を使用することを学ばないでください？

私がCSSに持っているのは：

.footer
{
    width: 100%;
    height: 100px;
    border: 1px solid black;
    text-align: center;
}

#footer_page1
{
    background-color: red;
    font-color: white;
}

#footer_page2
{
    background-color: blue;
    font-color: white;
}

#footer_page3
{
    background-color: white;
    font-color: black;
}

...そして私が持っているHTMLでそれを呼び出すために：

<div class="footer" ID="footer_page1">
    Some text here
</div>

これは大丈夫ですか、それとももっと良い方法で行う必要がありますか？

どうもありがとう。

4

4 に答える 4

4

id#footerやclass.page1, .page2, .page3などを使用する必要があります-同じフッターを取得し（IDは同じである必要があります）、何かを変更したいだけなので（異なるクラスを使用して実行できます）、より良い試みです。

編集：そして私からの簡単なヒント：設定に注意してください。プロパティを設定width: 100%しborder: 1px solid blackない限り、境界線はアイテムの幅で計算されないためです。box-sizing: border-box

つまり、1024ピクセルのワイド画面がある場合、提示したcssのフッターは1026ピクセルの幅になり、右側に2ピクセルがトリミングされます。

于 2013-02-13T22:46:26.603 に答える
1

役立つ場合もありますが、CSS で ID を使用することはお勧めできません。実際、私は、クラスと疑似クラス、および場合によっては属性セレクター以外は使用しないことをお勧めします (ただし、個人的にはほとんど怠惰から ID セレクターと要素セレクターを常に使用しています)。この理由は、カスケード内の 1 つのレベルで作業するだけでよく、特にスタイルシートが非常に大きくなった場合に、スタイルシートの作業が大幅に簡素化されるためです。

.footer { /* default styles */ }
.page1 { /* this is already after the .footer ruleset, so it overrides
    the earlier rules automatically (by the nature of CSS */ }
.page2 { /* and so on */ }

<div class="footer page1">
    Some text here
</div>

クラスをページ全体または何かのコンテナに追加することもできます。これはより理にかなっています。そうすれば、ヘッダーとフッターのルールセットを同時に操作できます。

.footer {}
.header {}
.page1 .footer {}
.page1 .header {}
于 2013-02-13T22:50:54.167 に答える
1

css で ID またはクラスを参照するときは、選択しているクラスまたは ID の完全な名前を使用する必要があります。たとえば、この div を id で参照するようにスタイルシートに記述しなければならないdiv要素を参照したい場合。id="someid"#someid {

とにかく、あなたはそれについて正しく考えていますが、構文は少しずれています。探しているものは次のとおりです。

/* common footer code goes here */
.footer
{
    width: 100%;
    height: 100px;
    border: 1px solid black;
    text-align: center;
}

/* code specific for each page goes here */
#page1.footer
{
    background-color: red;
    font-color: white;
}

#page2.footer
{
    background-color: blue;
    font-color: white;
}

#page3.footer
{
    background-color: white;
    font-color: black;
}

同じ行で 2 つのセレクターを使用することを、セレクター チェーンと呼びます。この場合、id セレクターをクラス セレクターとチェーンします。

編集： これは jsfiddleです。

page1あなたのコードを見ると、id 、page2、およびpage3がすべてこれらのページのフッターにあるという明らかな「悪い習慣」が見つかりdivます。これは、「ページ」がフッターを一意に定義するわけではないため、少し混乱します。どのページでも同じ名前の ID を 1 つだけ使用するようにしてください。ID を使用する場合は、その要素を一意に記述する必要があります。

他の人が言ったように、最近ではIDの使用を避けることが良い習慣になっていることに注意してください（JavaScript機能を除く）。可能な限りクラスのみを使用することが現在の標準です。セレクタ チェーンを実行する方法を知っておくとよいでしょう。もちろん、適切な構文は常に重要です。

于 2013-02-13T22:53:38.003 に答える
0

<div class="footer" ID="page1">で選択する必要があります.footer#page1。ID は 1 つのページで一意である必要があるため、page# には class を使用することをお勧めしますが、ID="page1" は頻繁に使用される可能性があります。

最終的に結果は

.footer
{
    width: 100%;
    height: 100px;
    border: 1px solid black;
    text-align: center;
}

.footer.page1
{
    background-color: red;
    font-color: white;
}

.footer.page2
{
    background-color: blue;
    font-color: white;
}

.footer.page3
{
    background-color: white;
    font-color: black;
}

と

<div class="footer page1">
    Some text here
</div>
于 2013-02-13T22:51:51.343 に答える