通过动态选择CSS文件，让您的StyleVision设计发挥更大的价值

StyleVision 的一大优点在于其灵活性。使用 StyleVision，您可以 设计外观精美的样式表和报告，并将其输出到多种格式，包括 HTML、PDF 以及电子表格等。现在，StyleVision 进一步简化了在单个设计中满足不同格式需求的过程，通过动态选择 CSS 文件这一新功能——该功能在 StyleVision 2012 中首次推出。

虽然您仍然可以在 StyleVision 设计界面中完成几乎所有格式化任务，但动态选择 CSS 文件意味着您可以创建一个模板，并在多种情况下重复使用。为了演示，我们创建了一份虚构的 Nanonull 公司发票，其设计会根据发票开具日期和到期日之间的天数而发生变化。虽然我们本可以使用 XPath 来根据经过的天数更改每个元素的格式，但在这种情况下，创建单独的 CSS 文件，使其适用于不同的场景，效率更高。

以下是我们在StyleVision中设计的发票。请注意，除了加粗的标题外，它的格式几乎是空白的。我们将通过CSS文件，根据发票开具日期和到期日之间的天数来应用格式。

现在，我们可以在 XMLSpy，Altova 公司的产品中创建 CSS 文件 XML 编辑器 它集成了对CSS2和CSS3编辑的支持。

首先，我们将创建一个 CSS 文件，用于设置那些到期日晚于发票日期（即，未逾期的发票）的样式。在这里，我们简单地创建了一个 body 选择器，设置了淡黄色背景，以及 Nanonull 的 logo 和一个头部样式类。

现在，我们将创建一个更精细的 CSS 样式，用于显示逾期发票。在主体选择器中，我们将添加一张逾期提醒的图片；在段落选择器中，我们将使用 20 磅的粗体红色字体；而在标题和小型标题类中，我们将使用不同大小的粗体红色字体。

现在，我们可以将CSS文件分配给StyleVision设计，然后将类分别分配给不同的设计元素。

在StyleVision中，我们只需在“设计概览”中点击“添加新的CSS文件”，然后导航到我们在XMLSpy中创建的CSS文件。StyleVision支持在同一个设计中使用多个CSS文件。

我们的设计现在呈现如下——请注意，来自“CSSRegular”和“CSSOverdue”的格式设置已在StyleVision的设计视图中应用。

但是，我们希望根据发票开具日期与到期日之间的距离来选择不同的CSS文件。因此，我们将在设计概览中，右键点击CSS文件旁边的箭头，然后选择“使用XPath选择单个CSS文件”（如下所示）。

这将打开“使用 XPath 选择 CSS 文件”对话框（如下所示）。我们可以在此对话框中使用 XPath，根据动态输入选择合适的 CSS 文件。在这里，我们指示 StyleVision 在发票到期日早于发票开具日时，使用 CSSOverdue.css 文件；而在其他所有情况下，使用 CSSRegular.css 文件。

以下是我们在“使用 XPath 选择 CSS 文件”对话框中输入的完整 XPath 表达式。

现在，我们可以将CSS文件中定义的类应用于StyleVision设计中的各个设计元素。

在这里，我们将包含“Invoice”（发票）文本的段落，在样式窗格中分配到了“header”（标题）类别。根据我们的CSS文件，对于逾期发票，这段文字将以红色、20号、加粗字体显示；对于即将到期的发票，则以黑色、20号、加粗字体显示。

同样，我们将把发票的到期日设置为“小标题”类别

现在，我们可以预览发票了。

以下是逾期发票的HTML预览效果：请注意，“发票”一词和到期日均为红色加粗字体显示，并且“逾期”字样以图章的形式印在中间。

现在，让我们来看同一张发票，但这次的付款日期设定在未来。请注意，背景是黄色的，Nanonull的logo清晰可见，并且“发票”一词和付款日期都以黑色显示。

根据动态输入选择CSS文件，为您的StyleVision设计带来了无限的可能性，使其更加灵活。借助此功能，您可以直接通过与设计相关的CSS文件进行格式调整，尤其适用于包含大量元素的复杂设计。

如果您使用 StyleVision 样式表和报表设计器，或者 Altova 的其他工具，创建了一个出色的项目，并且想展示您的成果，请通过评论这篇博文，与其他的 Altova 用户分享您的经验。

如果您认为您的案例非常适合作为研究案例，请访问 Altova 案例研究 页面。如果我们将您的故事采用，您将获得一张价值 200 美元的亚马逊礼品卡。我们期待您的来信！