異なるスタイルシートをページの異なる領域に適用する

Question

私はさまざまなCSSを基本的に持っています。たとえば、ナビゲーションバーにナビゲーションスタイルシートを使用してページの残りの部分メインスタイルシートを使用できます。何か案は？

Answer 1

これはできません。スタイルシートはページ全体に適用されます。スタイルが目的の要素にのみ適用されるように、セレクタを特定のものにするだけで十分です。

この例では、ナビゲーション項目を<ul id="nav">にすることがあります。

#nav li { color:#000; } 
#nav li.active_item { color:#f00; } 
/* etc */ 

Answer 2

のiframeを使用して、またはCSSクラスを使用するか：あなたのナビゲーション固有のスタイルのすべてのは、彼らが誤ってページ上の他の要素に適用されていないことを確認するために、#navセレクタで開始する必要があります。覚えておいて、CSSクラスを組み合わせることができます

<div class="class1 class2 and-so-on">...</div> 

したがってあなただけを対象とClass3にのみクラス1を対象に1つのスタイルシート、1を使用することができます...と正常にすべてのあなたのスタイルシートをインポートします。

Answer 3

CSSはページ全体に適用されるため、これはできません。必要なものを実現するには、ページを別々のセクションに分割し、各セクションに一意のIDを付けるなどしてください。こうすることで、ページのセクションを区切る別々のスタイルを適用することができます。お使いのナビゲーションのdivがid="navigation-bar"を持つことができ、その後、CSSにお書きます。例えば

：

#navigation-bar { 

    /* styles here will apply only to navigation-bar and elements inside it */ 

} 

のように...

Answer 4

あなたのCSSがあまりにも巨大ではない場合、あなたはそれを組み合わせる必要があります1つのファイルでこれにより、ダウンロード速度が向上し、ユーザーの操作が簡単になります。

スタイルを別々にしたい場合は、CSSのコメントを使用します。

#######NAV STYLES###### 

.nav li {something:something;} 
.nav li a {something:something;} 

######MAIN STYLES###### 

#main #wrapper {something:something;} 

Answer 5

あなたが管理しやすくするためにあなたのCSSを分けたければ。あなたは別のファイルにあなたのCSSを分離し、@import url();を使用して呼び出すことができます。たとえば：

core.cssはそうのように次のようになります。

//Navigation styles 
@import url("navigation.css"); 

//Banner styles 
@import url("banner.css"); 

//Footer styles 
@import url("footer.css"); 

しかしこれは別の参照先のものを含んでいる一つのスタイルシートを作成します。