web-dev-qa-db-ja.com

同じWebページの異なる部分に異なるCSSスタイルシートを適用する

それぞれに異なるcssスタイルシートを適用する必要があるさまざまなパーツを含むWebページがあります。私が知りたいのは、Webページの各部分に使用するcssスタイルシートを指定する方法です。まとめると、コンポーネントが正しく表示されません。

cssstylesheet
22
C..

ページの異なる部分に異なるスタイルシートを適用することはできません。いくつかのオプションがあります。

最善の方法は、ページのさまざまな部分をdivでクラス名でラップすることです。

<div class='part1'>
    ....
</div>

<div class='part2'>
    ....
</div>

次に、part1 CSSで、すべてのCSSルールの前に「.part1」を付け、part2 CSSで、すべてのCSSルールの前に「.part2」を付けます。クラスを使用することにより、多くの異なる「part1」または「part2」divを使用して、ページのどの部分がどのCSSルールの影響を受けるかを柔軟に区切ることができることに注意してください。

20
Ned Batchelder

理由により、Cascadingスタイルシート（CSS）と呼ばれます。

cSSの specificity ルールを使用して、各セクションをターゲットにします。

すなわち.

#section1 a{color:red}
#section2 a{color:blue}

これにより、ID section1の要素内のすべてのリンクが赤になり、ID section2の要素内のすべてのリンクが青になります。

<div id="section1">
 <a href="#">i will be red</a>
</div>
<div id="section2">
 <a href="#">i will be blue</a>
</div>
5
Gabriele Petrioli

外部スタイルシートはHTMLページ全体に適用されます。異なるスタイルシートを異なる部分に適用するには、最初に htmlタグを使用してhtmlページを異なるセクションに分割する必要があります（各html divに一意のIDまたはクラスを割り当てる）2番目に各divに適用される外部スタイルシートは、それに割り当てられたID /クラスに従って設計する必要があります

上記のGaby別名G. Petrioliによる例...

1
kapil

Webページのパーツごとに異なるクラスを使用し、各クラスのCSSコードをカスタマイズします。

0
Ahmed Aman