Licznik elementów i zmienne CSS

Rozwiń szablon prezentacji do kilku wariantów kolorystycznych niezależnych od rozkładu elementów. Każdy wariant powinien być reprezentowany przez oddzielny plik arkusza CSS dołączany do pliku głównego. Plik wariantu oraz plik układu elementów powinny tworzyć spójny szablon prezentacji.

Przygotowanie struktury

Część CSS powinna składać się z:

• arkusza z układami prezentacji oraz slajdów
• arkusza z wariantami kolorystycznymi.

Dokumenty elektroniczne dają dodatkowe możliwości, których nie miały ich papierowe odpowiedniki – automatyzację i zliczanie. Dziś już nie trzeba ręcznie liczyć i numerować elementów: tabel, rysunków, stron. Wystarczy znać mechanizm zliczania w danym rodzaju dokumentu (programie), by móc ten proces „zlecić” komputerowi.

Język CSS został uzupełniony o liczniki (zmienne) od wersji 2.1 dodając dwie reguły: counter-reset i counter-increment oraz metodę content: counter(). Należy pamiętać, że w regule counter-reset deklarujemy rodzaj zmiennej, która będzie przechowywać zwiększająca się liczbę występowania wskazanego elementu, np. znacznika SECTION.

Zamiany, które należy wprowadzić do poszczególnych istniejących elementów:

1. Deklaracja licznika o wskazanej nazwie deklarowana w korzeniu dokumentu:

   body { …
     counter-reset: slide;
   }

2. Dodaj element Licznika slajdów zaraz za węzłem, który należy policzyć:

   section::after {
   /* właściwości elementu: */
     position: absolute;
     bottom: 0.5em;
     right: 0.5em;
     counter-increment: slide;
     content: counter(slide);
     display: block;
     float: right;
     margin-top: -1em;
     height: 1.6em;
     width: 1.6em;
   
   /* właściwości tekstu w elemencie: */
     background-color: #E9D8AD;
     border-radius: 50%;
     color: #fff;
     font-size: 1.2em;
     font-style: italic;
     font-weight: 800;
     text-align: center;
     line-height: 1.4em;
   }

3. Nadanie pozycjonowania względnego dla węzła (przyda się do ulokowania licznika):

   section {
     position: relative;
   … }

Element który raczej jest częścią języków programowania został dodany do specyfikacji CSS od roku 2013. Wraz ze zwiększaniem się liczby reguł, a więc rozrostem pliku arkusza może pojawić się potrzeba skorzystania z powtarzających się właściwości. Dlatego też wprowadzono składnię właściwości niestandardowych --* wraz z metodą var(). Od tego momentu można nazywać CSS językiem programowania, który pozwala tworzyć szablony.

1. Deklaracja niestandardowej właściwości (zmiennej)

   body {
     --main-color: #fff;
     --accent-color: #02AA33;
     --text-color: #000;
     --bgcolor: #eee;
     --text-size: 2rem;
   }

2. Zastosowanie zmiennej

   section {
     background-color: var(--bgcolor);
     color: var(--accent-color);
   }
   section header {
     background-color: var(--accent-color);
     color: var(--main-color);
     font-size: var(--text-size);
   }
   section p {
     background-color: var(--main-color);
     color: var(--text-color);
   }

Na podstawie zdobytej wiedzy o zmiennych w Zadaniu 2 oraz regule @import utwórz dwa szablony kolorystyczne (bazujące na jednym, wspólnym arkuszu zawierającym układ elementów - Layout):

• alizarin
• midnight

Nie odnaleziono pliku!