別のhtmlの複数のインスタンスを別のhtmlの中に埋め込んでいますが、スタイルは異なります

Question

GUIモックアップの可能な視覚的状態の多くを単一のビューで表示するためにいくつかの設計テストを行いたいと思います。そのために、私はブラウザベースのテクニックを使用/学習しています。

そのために、これらの可能な状態のスタックを表示する必要がある「ウィンドウ」htmlファイルと、このコントロールのデフォルト状態を含む「mywidget」htmlファイルがあります。

私の質問は、この同じレイアウトの複数のインスタンスを作成（埋め込み/インクルード）できますが、CSSを使用してそれぞれ異なるスタイルを設定するにはどうすればよいですか。

計画は、各インスタンスを取り、いくつかの要素のクラスを変更し、クラス指向のスタイリングを持つ単一のスタイルシートを持つことです。

私はIFrameを使用することを考えていましたが、CSSスタイリングの埋め込み物にアクセスする方法はわかりません。

私はjavascript以外の回答を希望します。

また、FFを排他的に使用して、ダブルクリックで直接マスターファイルを開くこのローカル/オフライン（サーバー経由ではない）を使用します。

Answer 1

あなたのスタイルが自分のラッパーから継承することを許可：

<div class="sample1"> 
    <h1>some text</h1> 
</div> 

<div class="sample2"> 
    <h1>some text</h1> 
</div> 

CSS：あなたはすべてのものにクラス名を追加することなく、同じHTMLを使用することができます

.sample1 h1 { 
    font-size:14px; 
} 

.sample2 h1 { 
    font-size:22px; 
} 

この方法です。ラッパークラスを変更し、CSS宣言のセットをそのクラスと一緒にするだけです。

本当に必要な場所にクラス名を追加します。できるだけクリーンでシンプルにしてください。

Answer 2

iframeで簡単にはうまくいかないでしょう。私はその目的のためにajaxを使用し、それは魅力のように機能します。