---
title: "Wykorzystaj w pełni możliwości projektów StyleVision dzięki dynamicznemu doborowi plików CSS"
date: "2012-01-10"
description: Odkryj, jak ulepszyć projekty StyleVision, dynamicznie wybierając pliki CSS w zależności od określonych warunków, co usprawni formatowanie dla różnych scenariuszy.
---
Status: #blog

Tags: 

Categories: [Altova](/blog/pl/category/altova.md) 
# Wykorzystaj w pełni możliwości projektów StyleVision dzięki dynamicznemu doborowi plików CSS

  

Jedną z największych zalet programu StyleVision jest jego elastyczność. Dzięki StyleVision można [projektować wizualnie zaawansowane arkusze stylów i raporty](https://www.altova.com/pl/stylevision.html) do generowania w wielu formatach, w tym HTML, PDF oraz elektronicznych formularzy. Teraz StyleVision jeszcze bardziej ułatwia dostosowywanie się do różnych wymagań formatowania w ramach jednego projektu, dzięki dynamicznemu doborowi plików CSS – nowej funkcji wprowadzonej w [StyleVision 2012](https://www.altova.com/pl/whatsnew.html).

Chociaż nadal można wykonywać praktycznie wszystkie zadania związane z formatowaniem bezpośrednio w interfejsie StyleVision, dynamiczny wybór plików CSS umożliwia tworzenie pojedynczego szablonu, który można wykorzystywać w różnych sytuacjach. Jako przykład, stworzyliśmy fakturę dla fikcyjnej firmy Nanonull Corporation, w której wygląd zmienia się w zależności od liczby dni, które upłynęły między datą wystawienia faktury a datą płatności. Chociaż moglibyśmy użyć XPath do zmiany formatowania każdego elementu w zależności od liczby upłyniętych dni, w tym przypadku bardziej efektywne jest tworzenie oddzielnych plików CSS, które są stosowane w różnych scenariuszach.  
  

[![](https://2.bp.blogspot.com/-2DH6jtpWGkA/TwtexsvmAJI/AAAAAAAAAN4/gktiYK30CEU/s1600/SVInvoiceOverdue.png)](https://2.bp.blogspot.com/-2DH6jtpWGkA/TwtexsvmAJI/AAAAAAAAAN4/gktiYK30CEU/s1600/SVInvoiceOverdue.png)

  
  
Poniżej znajduje się faktura, którą zaprojektowaliśmy w programie StyleVision. Zauważcie, że poza pogrubionymi nagłówkami, faktura jest prawie pozbawiona formatowania – formatowanie zostanie zastosowane na podstawie liczby dni, które upłynęły między datą wystawienia faktury a datą płatności, za pomocą plików 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)

  
Teraz możemy tworzyć nasze pliki CSS w programie XMLSpy, który jest produktem firmy Altova [Edytor XML](https://www.altova.com/pl/xml-editor/) z wbudowanym wsparciem dla edycji CSS2 i CSS3. 
  
Najpierw utworzymy plik CSS dla faktur, których terminy płatności przypadały po dacie wystawienia (czyli faktur, które nie są przeterminowane). W tym przypadku po prostu zdefiniowaliśmy selektor dla elementu `body` z żółtym tłem, logo firmy Nanonull oraz klasę dla nagłówka.  
  

[![](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)

Teraz stworzymy bardziej rozbudowane style CSS dla faktur przeterminowanych. Wybiernik `body` będzie zawierał obrazek informujący o przeterminowaniu, wybieżnik paragrafów będzie miał pogrubioną, czerwoną czcionkę o wielkości 20 punktów, a klasy nagłówków i małych nagłówków będą miały pogrubioną, czerwoną czcionkę o różnych rozmiarach.

  

[![](https://1.bp.blogspot.com/-KgWFX2KQklg/TwtfzBAbJiI/AAAAAAAAAOQ/05Dqjw25TVE/s1600/CSSOverdue.png)](https://1.bp.blogspot.com/-KgWFX2KQklg/TwtfzBAbJiI/AAAAAAAAAOQ/05Dqjw25TVE/s1600/CSSOverdue.png)

Teraz możemy przypisać pliki CSS do projektu StyleVision, a następnie przypisać klasy do różnych elementów projektu.

W programie StyleVision, po prostu klikamy opcję "dodaj nowy plik CSS" w sekcji "Przegląd projektu" i przechodzimy do plików CSS, które utworzyliśmy w programie XMLSpy – StyleVision obsługuje wiele plików CSS w ramach jednego projektu.

  

Nasza aktualna wersja projektu wygląda tak – należy zauważyć, że formatowanie z plików CSSRegular i CSSOverdue zostało zastosowane w widoku projektowania w programie 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)

  

Chcielibyśmy przypisać plik CSS w zależności od odległości między datą wystawienia faktury a datą płatności. W związku z tym, klikniemy prawym przyciskiem myszy na strzałkę obok pliku CSS w sekcji "Przegląd wyglądu" i wybierzemy opcję "Wybierz jeden plik CSS za pomocą XPath" (poniżej).

  

[![](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)

To spowoduje wyświetlenie okna dialogowego "Wybierz plik CSS za pomocą XPath" (poniżej). Możemy użyć wyrażeń XPath w tym oknie dialogowym, aby wybrać odpowiedni plik CSS w zależności od dynamicznych danych wejściowych. W tym przypadku skonfigurowaliśmy StyleVision tak, aby używał pliku CSSOverdue.css, jeśli data płatności faktury jest wcześniejsza niż data wystawienia faktury, a w pozostałych przypadkach używał pliku 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)

Oto pełny wyrażenie XPath, które wprowadziliśmy do okna dialogowego "Wybierz plik CSS za pomocą XPath" pokazanego powyżej.

  

[![](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)

  

Teraz możemy przypisać klasy zdefiniowane w plikach CSS do poszczególnych elementów projektu w programie StyleVision.

  

W tym miejscu przypisaliśmy akapit zawierający tekst „Faktura” do klasy „nagłówek” w panelu stylów. Zgodnie z zawartością naszych plików CSS, ten tekst będzie wyświetlany na czerwono, pogrubioną czcionką o wielkości 20 punktów, w przypadku faktur przeterminowanych, a czarnym, pogrubionym fontem o wielkości 20 punktów, w przypadku faktur, których termin płatności przypada w przyszłości.

[![](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)

Podobnie, datę płatności faktury przypiszemy do klasy "mały nagłówek"

  

Teraz możemy przejrzeć projekt faktury.

Poniżej znajduje się podgląd HTML faktury przeterminowanej – należy zwrócić uwagę, że tekst "Faktura" oraz data płatności są wyświetlane czerwonym, pogrubionym fontem, a w środku znajduje się pieczęć z napisem "Przeterminowana".

  

[![](https://2.bp.blogspot.com/-2DH6jtpWGkA/TwtexsvmAJI/AAAAAAAAAN4/gktiYK30CEU/s1600/SVInvoiceOverdue.png)](https://2.bp.blogspot.com/-2DH6jtpWGkA/TwtexsvmAJI/AAAAAAAAAN4/gktiYK30CEU/s1600/SVInvoiceOverdue.png)

  

  
Teraz przyjrzyjmy się temu samemu rachunkowi, ale z datą płatności w przyszłości – zwróćcie uwagę na żółte tło, logo Nanonull oraz na to, że słowa „Rachunek” i data płatności są wyświetlane w kolorze czarnym.  
  

[![](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)

Możliwość wyboru pliku CSS w oparciu o dane wejściowe pozwala na wykorzystanie szerokiego zakresu możliwości i sprawia, że projekty tworzone w StyleVision stają się jeszcze bardziej elastyczne. Dzięki tej funkcji można wprowadzać zmiany w formacie w czasie rzeczywistym, korzystając z plików CSS powiązanych z danym projektem – co jest szczególnie przydatne w przypadku projektów zawierających wiele elementów.

Stworzyliście świetny projekt, wykorzystując arkusz stylów StyleVision i narzędzie do projektowania raportów, lub inne narzędzia firmy Altova, i chcielibyście się tym pochwalić? Prosimy podzielcie się swoją historią z innymi użytkownikami Altova, komentując ten wpis na blogu.

Jeśli uważasz, że Twoja historia mogłaby być świetnym przykładem, odwiedź stronę poświęconą [studium przypadku firmy Altova](https://www.altova.com/pl/case-studies.html) – jeśli wykorzystamy Twoją historię, otrzymasz kartę podarunkową Amazon o wartości 200 dolarów. Chcielibyśmy się z Tobą skontaktować!