--- title: "Haal meer uit uw StyleVision-ontwerpen met de dynamische selectie van CSS-bestanden" date: "2012-01-10" description: Ontdek hoe u StyleVision-ontwerpen kunt verbeteren door dynamisch CSS-bestanden te selecteren op basis van invoercondities, waardoor de opmaak voor verschillende scenario's wordt vereenvoudigd. --- Status: #blog Tags: Categories: [Altova](/blog/nl/category/altova.md) # Haal meer uit uw StyleVision-ontwerpen met de dynamische selectie van CSS-bestanden Een van de grote voordelen van StyleVision is de flexibiliteit die het biedt. Met StyleVision kunt u [visueel aantrekkelijke stylesheets en rapporten ontwerpen](https://www.altova.com/nl/stylevision.html) voor verschillende uitvoerformaten, waaronder HTML, PDF en elektronische formulieren. Nu maakt StyleVision het nog eenvoudiger om verschillende opmaakvereisten in één ontwerp te integreren, dankzij de dynamische selectie van CSS-bestanden – een nieuwe functie die is geïntroduceerd in [StyleVision 2012](https://www.altova.com/nl/whatsnew.html). Hoewel u nog steeds vrijwel alle opmaaktaakstellingen vanuit het StyleVision-ontwerp zelf kunt uitvoeren, maakt de dynamische selectie van CSS-bestanden het mogelijk om één sjabloon te maken dat in verschillende situaties kan worden gebruikt. Om dit te illustreren, hebben we een factuur gemaakt voor het fictieve bedrijf Nanonull Corporation, waarbij het ontwerp verandert op basis van het aantal dagen dat is verstreken tussen de factuurdatum en de vervaldatum. Hoewel we XPath hadden kunnen gebruiken om de opmaak van elk element te wijzigen op basis van het aantal dagen, is het in dit geval efficiënter om individuele CSS-bestanden te maken die van toepassing zijn op verschillende scenario's. [![](https://2.bp.blogspot.com/-2DH6jtpWGkA/TwtexsvmAJI/AAAAAAAAAN4/gktiYK30CEU/s1600/SVInvoiceOverdue.png)](https://2.bp.blogspot.com/-2DH6jtpWGkA/TwtexsvmAJI/AAAAAAAAAN4/gktiYK30CEU/s1600/SVInvoiceOverdue.png) Hieronder vindt u de factuur die we hebben ontworpen in StyleVision. Let op dat, afgezien van de vetgedrukte koppen, deze bijna geen opmaak bevat. We zullen de opmaak toepassen op basis van het aantal dagen dat is verstreken tussen de factuurdatum en de vervaldatum, via CSS-bestanden. [![](https://1.bp.blogspot.com/-1zncGKAhYGA/TwtfIXQ63CI/AAAAAAAAAOA/Ej58hobUyKg/s1600/SVInvoiceDesign.png)](https://1.bp.blogspot.com/-1zncGKAhYGA/TwtfIXQ63CI/AAAAAAAAAOA/Ej58hobUyKg/s1600/SVInvoiceDesign.png) Nu kunnen we onze CSS-bestanden maken in XMLSpy, de [XML-editor van Altova](https://www.altova.com/nl/xml-editor/), met geïntegreerde ondersteuning voor het bewerken van CSS2 en CSS3. Eerst maken we een CSS-bestand voor facturen met vervaldatums die ná de factuurdatum vallen (dus facturen die niet te laat zijn). Hier hebben we simpelweg de body-selector gemaakt met een lichtgele achtergrond, het Nanonull-logo en een header-klasse. [![](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) Nu gaan we een uitgebreidere CSS-stijl creëren voor openstaande facturen. De body-selector zal een afbeelding voor openstaande facturen bevatten, de paragraph-selector zal een vetgedrukt, rood lettertype van 20 punten hebben, en de header- en small-header-klassen zullen een vetgedrukt, rood lettertype in verschillende groottes hebben. [![](https://1.bp.blogspot.com/-KgWFX2KQklg/TwtfzBAbJiI/AAAAAAAAAOQ/05Dqjw25TVE/s1600/CSSOverdue.png)](https://1.bp.blogspot.com/-KgWFX2KQklg/TwtfzBAbJiI/AAAAAAAAAOQ/05Dqjw25TVE/s1600/CSSOverdue.png) Nu kunnen we de CSS-bestanden toewijzen aan het StyleVision-ontwerp en vervolgens klassen toewijzen aan verschillende ontwerpelementen. In StyleVision kunnen we eenvoudig een nieuw CSS-bestand toevoegen via het menu "Nieuw CSS-bestand" in het overzicht van het ontwerp. Vervolgens navigeren we naar de CSS-bestanden die we in XMLSpy hebben gemaakt. StyleVision ondersteunt meerdere CSS-bestanden binnen hetzelfde ontwerp. Ons ontwerp ziet er nu zo uit – let op dat de opmaak van zowel CSSRegular als CSSOverdue is toegepast in de ontwerpweergave van 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) Echter, we willen het CSS-bestand toewijzen op basis van de afstand tussen de factuurdatum en de vervaldatum. Daarom klikken we met de rechtermuisknop op de pijl naast het CSS-bestand in het ontwerpoverzicht en kiezen we "Eén CSS-bestand selecteren met XPath" (hieronder). [![](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) Dit opent het dialoogvenster "CSS-bestand selecteren met XPath" (zie hieronder). We kunnen XPath in dit dialoogvenster gebruiken om het juiste CSS-bestand te selecteren op basis van dynamische invoer. In dit geval hebben we StyleVision geïnstrueerd om het bestand CSSOverdue.css te gebruiken als de vervaldatum van de factuur vóór de factuurdatum valt, en het bestand CSSRegular.css in alle andere gevallen. [![](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) Hieronder staat de volledige XPath-expressie die we hierboven in het dialoogvenster "CSS-bestand selecteren met XPath" hebben ingevoerd. [![](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) Nu kunnen we de klassen die in de CSS-bestanden zijn gedefinieerd, toewijzen aan individuele designelementen in het StyleVision-ontwerp. Hier hebben we de alinea die de tekst "Factuur" bevat, toegewezen aan de klasse "header" in het paneel "Stijlen". Op basis van de inhoud van onze CSS-bestanden zal deze tekst rood en vetgedrukt in 20 punten worden weergegeven voor openstaande facturen, en zwart en vetgedrukt in 20 punten voor facturen waarvan de vervaldatum in de toekomst ligt. [![](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) Evenzo zullen we de vervaldatum van de factuur toewijzen aan de klasse "kleine koptekst" Nu zijn we klaar om de factuur te bekijken. Hieronder is een voorbeeld van hoe een te late factuur eruit kan zien in HTML. Let op dat de tekst "Factuur" en de vervaldatum in rode, vetgedrukte letters staan, en dat het beeld "Te laat" in het midden is geplaatst. [![](https://2.bp.blogspot.com/-2DH6jtpWGkA/TwtexsvmAJI/AAAAAAAAAN4/gktiYK30CEU/s1600/SVInvoiceOverdue.png)](https://2.bp.blogspot.com/-2DH6jtpWGkA/TwtexsvmAJI/AAAAAAAAAN4/gktiYK30CEU/s1600/SVInvoiceOverdue.png) Laten we nu dezelfde factuur bekijken, maar dan met een vervaldatum in de toekomst. Let op de gele achtergrond, het Nanonull-logo, en het feit dat "Factuur" en de vervaldatum in zwarte tekst staan. [![](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) De mogelijkheid om een CSS-bestand te selecteren op basis van dynamische invoer opent een breed scala aan mogelijkheden en maakt uw StyleVision-ontwerpen nog flexibeler. Met deze functie kunt u op elk moment wijzigingen aan de opmaak aanbrengen via de CSS-bestanden die aan een ontwerp zijn gekoppeld – vooral handig voor ontwerpen met veel elementen. Heeft u een geweldig project gemaakt met behulp van de StyleVision-stijlsheet- en rapportontwerptool, of een van de andere Altova-tools, en wilt u dit graag laten zien? Deel dan uw verhaal met andere Altova-gebruikers door een reactie achter te laten bij dit blogbericht. Als u denkt dat dit een interessante casestudy zou opleveren, kunt u de pagina "[Altova casestudies](https://www.altova.com/nl/case-studies.html)" bezoeken. Als we uw verhaal gebruiken, ontvangt u een cadeaubon van 200 dollar voor Amazon. We horen graag van u!