Klasa CSS to zestaw skryptów i stylów napisanych w języku CSS, którą chcemy przypisać naszemu elementowi. Możemy myśleć o nich jak o globalnych funkcjach, ułatwiających nam pracę nad wieloma elementami. Przy użyciu klas CSS wystarczy tylko ustalić jej nazwę dla elementu, zamiast przepisywać cały kod. Na dodatek możemy zmieniać klasy skryptami – daje to możliwość tworzenia naprawdę ciekawych przemian.

 

Przykład zastosowania: w zależności od tego, czy liczba dni nieobecności wybranego pracownika jest poniżej lub powyżej średniej działu, w którym pracuje, możesz zmienić kolor tekstu na zielony lub czerwony.

 

 

 

 

 

 

 

 

 

 

 

Edycja klas CSS odbywa się na dodatkowym ekranie, do którego możemy przejść naciskając odpowiedni przycisk znajdujący się w górnym panelu opcji aplikacji:

 

 

W zależności od naszej aplikacji i szablonu, na którym ją utworzyliśmy, naciśnięcie przycisku otworzy przypisany już plik .css lub poprosi o wskazanie ścieżki do pliku. 

 

Jeśli znajdujemy się w tej drugiej sytuacji, możemy utworzyć pusty plik tekstowy, zapisać  go w formacie .css, a następnie wskazać aplikacji. Jeśli nie mamy żadnego doświadczenia z pisaniem dokumentów tego typów, dla ułatwienia możemy skopiować zawartość już istniejącego np. z aplikacji utworzonej na jakimś szablonie.

 

Ekran edycji CSS po stronie aplikacji prezentuje się następująco:

 

 

Możemy zauważyć, że nasz ekran Outline wskazuje teraz zarys wszystkich klas i właściwości naszego pliku. Poniżej przykład ich działania na elemencie tekstowym.

Tworzymy nową klasę myTekstClear odpowiednio ustawiając w pliku tę linijkę:

 

.myTekstClear{

      

       font-size:160%;

 

}

 

Miejsce między nawiasami wypełniamy wartościami, które chcemy przypisać dla elementów korzystających z naszej klasy. Element font-size pozwala na zmianę wielkości czcionki.

 

Żeby ustawić klasę dla naszego elementu należy przejść do jego właściwości, a następnie w dziale Display wpisać odpowiednią nazwę w polu CSS Class.

 

 

Możemy zauważyć, że wygląd elementu uległ modyfikacji pod wpływem zmiany klasy. Przed jej ustawieniem:

 

Po jej ustawieniu:

 

 

Następnie będziemy dodawać pojedynczo nowe linijki do naszej klasy i przedstawiać efekt każdej z nich.

Uwaga! Plik CSS należy zapisywać na bieżąco po każdej zmianie by móc je podejrzeć.

 

1. Zmiana koloru

 

color:darkgray;

 

Spowoduje zmianę koloru tekstu z czarnego na szary:

 

 

2. Dodanie obramowania

 

text-shadow:-1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

 

Spowoduje dodanie czarnego obramowania wokół naszego tekstu:

 

     

3. Wyśrodkowanie tekstu

 

text-align:center !important;

      

 

Spowoduje wyśrodkowanie tekstu w zależności od ustawienia elementu:

 

 

Nasza funkcja powinna ostatecznie wyglądać tak jak poniżej:

 

.myTekstClear{

       font-size: 160%;

       color:darkgray;

       text-shadow:-1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

       text-align:center !important;

}

 

Co w przypadku kiedy chcielibyśmy np. dynamicznie zmienić koloru tekstu, w zależności od różnych czynników? Nic prostszego! W tym wypadku możemy utworzyć drugą, identyczną klasę, a następnie zmienić w niej kolor oraz nazwę, np. tak jak tutaj:

 

.myTekstGreen{

       font-size: 160%;

       color:lightgreen;

       text-shadow:-1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

       text-align:center !important;

}

 

      

Żeby zmienić kolor naszego tekstu, w interesującym nas momencie skryptu należałoby wpisać tę linijkę:

 

TEXT_1.setCSSClass("myTekstGreen");