将单个html的多个实例嵌入到另一个html中，但样式不同

我想做一些设计测试，即在单个视图中显示GUI模型的许多可能的视觉状态。为此，我还在使用/学习基于浏览器的技术

为此，我有一个“窗口”html文件，它应该显示这些可能状态的堆栈，然后是一个“mywidget”html文件，其中包含此控件的默认状态

我的问题是：如何创建（嵌入/包含）同一布局的多个实例，但通过CSS对每个实例进行不同的样式设置

计划是获取每个实例，更改某些元素的类，并拥有一个具有面向类样式的样式表

我正在考虑使用IFrame，但不知道如何访问嵌入的东西来进行CSS样式设计

我更喜欢非javascript的答案

---

此外，我将在本地/脱机（而不是通过服务器）使用FF，以独占方式使用FF，通过双击直接打开主文件。

允许从包装器继承您的样式：

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

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

通过这种方式，您可以使用相同的HTML，而无需向所有内容添加类名。只需更改包装器类并使CSS声明集与该类一起使用

---

只在您真正需要的地方添加类名-尽可能保持干净和简单。

使用iframes不会那么容易。我使用ajax来实现这一目的，它的工作非常有魅力。

我希望能够在一个地方修改html结构，因为我很可能不得不在其中添加或删除标记。有什么方法可以重复使用同一块html来执行您建议的操作吗？可以使用“display:none”来隐藏元素，而不是删除它们。或者您可以将类名添加到那些项目“hideMe”，然后声明.sample1.hideMe{display:none}我看到了。尽管如此，我不太倾向于有这么多重复的html代码…：o(

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

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