Ta strona korzysta z plików cookie, abyśmy mogli zapewnić jak najlepszą obsługę. Informacje o plikach cookie są przechowywane w przeglądarce i wykonują takie funkcje, jak rozpoznawanie cię po powrocie do naszej witryny i pomaganie naszemu zespołowi w zrozumieniu, które sekcje witryny są dla Ciebie najbardziej interesujące i przydatne.
10 sztuczek Design Studio – część 2
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”);