--- title: "通过动态选择CSS文件，让您的StyleVision设计发挥更大的价值" date: "2012-01-10" description: 了解如何通过动态选择CSS文件，并根据输入条件进行调整，从而优化StyleVision的设计，简化不同场景下的格式设置。 --- Status: #blog Tags: Categories: [Altova](/blog/zh/category/altova.md) # 通过动态选择CSS文件，让您的StyleVision设计发挥更大的价值 StyleVision 的一大优点在于其灵活性。使用 StyleVision，您可以 [设计外观精美的样式表和报告](https://www.altova.com/zh/stylevision.html)，并将其输出到多种格式，包括 HTML、PDF 以及电子表格等。现在，StyleVision 进一步简化了在单个设计中满足不同格式需求的过程，通过动态选择 CSS 文件这一新功能——该功能在 [StyleVision 2012](https://www.altova.com/zh/whatsnew.html) 中首次推出。 虽然您仍然可以在 StyleVision 设计界面中完成几乎所有格式化任务，但动态选择 CSS 文件意味着您可以创建一个模板，并在多种情况下重复使用。为了演示，我们创建了一份虚构的 Nanonull 公司发票，其设计会根据发票开具日期和到期日之间的天数而发生变化。虽然我们本可以使用 XPath 来根据经过的天数更改每个元素的格式，但在这种情况下，创建单独的 CSS 文件，使其适用于不同的场景，效率更高。 [![](https://2.bp.blogspot.com/-2DH6jtpWGkA/TwtexsvmAJI/AAAAAAAAAN4/gktiYK30CEU/s1600/SVInvoiceOverdue.png)](https://2.bp.blogspot.com/-2DH6jtpWGkA/TwtexsvmAJI/AAAAAAAAAN4/gktiYK30CEU/s1600/SVInvoiceOverdue.png) 以下是我们在StyleVision中设计的发票。请注意，除了加粗的标题外，它的格式几乎是空白的。我们将通过CSS文件，根据发票开具日期和到期日之间的天数来应用格式。 [![](https://1.bp.blogspot.com/-1zncGKAhYGA/TwtfIXQ63CI/AAAAAAAAAOA/Ej58hobUyKg/s1600/SVInvoiceDesign.png)](https://1.bp.blogspot.com/-1zncGKAhYGA/TwtfIXQ63CI/AAAAAAAAAOA/Ej58hobUyKg/s1600/SVInvoiceDesign.png) 现在，我们可以在 XMLSpy，Altova 公司的产品中创建 CSS 文件 [XML 编辑器](https://www.altova.com/zh/xml-editor/) 它集成了对CSS2和CSS3编辑的支持。 首先，我们将创建一个 CSS 文件，用于设置那些到期日晚于发票日期（即，未逾期的发票）的样式。在这里，我们简单地创建了一个 `body` 选择器，设置了淡黄色背景，以及 Nanonull 的 logo 和一个头部样式类。 [![](https://4.bp.blogspot.com/-mbndpc9C_QA/TwtfdWUSlxI/AAAAAAAAAOI/uTo7_WMRFIs/s1600/XMLSpyCssRegular.png)](https://4.bp.blogspot.com/-mbndpc9C_QA/TwtfdWUSlxI/AAAAAAAAAOI/uTo7_WMRFIs/s1600/XMLSpyCssRegular.png) 现在，我们将创建一个更精细的 CSS 样式，用于显示逾期发票。在主体选择器中，我们将添加一张逾期提醒的图片；在段落选择器中，我们将使用 20 磅的粗体红色字体；而在标题和小型标题类中，我们将使用不同大小的粗体红色字体。 [![](https://1.bp.blogspot.com/-KgWFX2KQklg/TwtfzBAbJiI/AAAAAAAAAOQ/05Dqjw25TVE/s1600/CSSOverdue.png)](https://1.bp.blogspot.com/-KgWFX2KQklg/TwtfzBAbJiI/AAAAAAAAAOQ/05Dqjw25TVE/s1600/CSSOverdue.png) 现在，我们可以将CSS文件分配给StyleVision设计，然后将类分别分配给不同的设计元素。 在StyleVision中，我们只需在“设计概览”中点击“添加新的CSS文件”，然后导航到我们在XMLSpy中创建的CSS文件。StyleVision支持在同一个设计中使用多个CSS文件。 我们的设计现在呈现如下——请注意，来自“CSSRegular”和“CSSOverdue”的格式设置已在StyleVision的设计视图中应用。 [![](https://3.bp.blogspot.com/-Ul1kecAW_u0/TwtgdHO1BVI/AAAAAAAAAOY/5JlWVZTwldo/s1600/SVInvoicewithCSS.png)](https://3.bp.blogspot.com/-Ul1kecAW_u0/TwtgdHO1BVI/AAAAAAAAAOY/5JlWVZTwldo/s1600/SVInvoicewithCSS.png) 但是，我们希望根据发票开具日期与到期日之间的距离来选择不同的CSS文件。因此，我们将在设计概览中，右键点击CSS文件旁边的箭头，然后选择“使用XPath选择单个CSS文件”（如下所示）。 [![](https://1.bp.blogspot.com/-8HF6dn-DWoQ/TwtgpySS8RI/AAAAAAAAAOg/MR85xsCfxks/s1600/SelectOneCSS.png)](https://1.bp.blogspot.com/-8HF6dn-DWoQ/TwtgpySS8RI/AAAAAAAAAOg/MR85xsCfxks/s1600/SelectOneCSS.png) 这将打开“使用 XPath 选择 CSS 文件”对话框（如下所示）。我们可以在此对话框中使用 XPath，根据动态输入选择合适的 CSS 文件。在这里，我们指示 StyleVision 在发票到期日早于发票开具日时，使用 CSSOverdue.css 文件；而在其他所有情况下，使用 CSSRegular.css 文件。 [![](https://2.bp.blogspot.com/-HJJmqC87QSs/Twtg7ad728I/AAAAAAAAAOo/TmzbdKUP4_Y/s1600/SelectCSSdialog.png)](https://2.bp.blogspot.com/-HJJmqC87QSs/Twtg7ad728I/AAAAAAAAAOo/TmzbdKUP4_Y/s1600/SelectCSSdialog.png) 以下是我们在“使用 XPath 选择 CSS 文件”对话框中输入的完整 XPath 表达式。 [![](https://3.bp.blogspot.com/-wdZ5ui3cD-w/TwthFjH8e0I/AAAAAAAAAOw/aI3IE6NvJMQ/s1600/XPathSelectCSS.png)](https://3.bp.blogspot.com/-wdZ5ui3cD-w/TwthFjH8e0I/AAAAAAAAAOw/aI3IE6NvJMQ/s1600/XPathSelectCSS.png) 现在，我们可以将CSS文件中定义的类应用于StyleVision设计中的各个设计元素。 在这里，我们将包含“Invoice”（发票）文本的段落，在样式窗格中分配到了“header”（标题）类别。根据我们的CSS文件，对于逾期发票，这段文字将以红色、20号、加粗字体显示；对于即将到期的发票，则以黑色、20号、加粗字体显示。 [![](https://2.bp.blogspot.com/-RMtcQErqtU4/TwthWWeZRoI/AAAAAAAAAO4/jU-LSJfyNCw/s1600/SVAssignClass.png)](https://2.bp.blogspot.com/-RMtcQErqtU4/TwthWWeZRoI/AAAAAAAAAO4/jU-LSJfyNCw/s1600/SVAssignClass.png) 同样，我们将把发票的到期日设置为“小标题”类别 现在，我们可以预览发票了。 以下是逾期发票的HTML预览效果：请注意，“发票”一词和到期日均为红色加粗字体显示，并且“逾期”字样以图章的形式印在中间。 [![](https://2.bp.blogspot.com/-2DH6jtpWGkA/TwtexsvmAJI/AAAAAAAAAN4/gktiYK30CEU/s1600/SVInvoiceOverdue.png)](https://2.bp.blogspot.com/-2DH6jtpWGkA/TwtexsvmAJI/AAAAAAAAAN4/gktiYK30CEU/s1600/SVInvoiceOverdue.png) 现在，让我们来看同一张发票，但这次的付款日期设定在未来。请注意，背景是黄色的，Nanonull的logo清晰可见，并且“发票”一词和付款日期都以黑色显示。 [![](https://3.bp.blogspot.com/-g_Lak8SS2do/Twthzrq1LXI/AAAAAAAAAPA/augs6gYDtvY/s1600/SVInvoiceRegular.png)](https://3.bp.blogspot.com/-g_Lak8SS2do/Twthzrq1LXI/AAAAAAAAAPA/augs6gYDtvY/s1600/SVInvoiceRegular.png) 根据动态输入选择CSS文件，为您的StyleVision设计带来了无限的可能性，使其更加灵活。借助此功能，您可以直接通过与设计相关的CSS文件进行格式调整，尤其适用于包含大量元素的复杂设计。 如果您使用 StyleVision 样式表和报表设计器，或者 Altova 的其他工具，创建了一个出色的项目，并且想展示您的成果，请通过评论这篇博文，与其他的 Altova 用户分享您的经验。 如果您认为您的案例非常适合作为研究案例，请访问 [Altova 案例研究](https://www.altova.com/zh/case-studies.html) 页面。如果我们将您的故事采用，您将获得一张价值 200 美元的亚马逊礼品卡。我们期待您的来信！