Zad 1

Utworzyć dokument XML zawierający dane osobowe kilku grup osób, np.:

    <lista>
        <emeryci>
               <osoba>
                     ..........
               </osoba>
               <osoba>
                     ..........
               </osoba>
               .............
        </emeryci>
        <pracownicy>
              <osoba>
                     ..........
              </osoba>
              <osoba>
                     ..........
              </osoba>
              ..............
        </pracownicy>
        <studenci>
              <osoba>
                    ...........
              </osoba>
              <osoba>
                     ...........
              </osoba>
              ............
        </studenci>
    </lista>

Utworzyć arkusz CSS, który spowoduje, że imiona i nazwiska osób należących do różnych grup będą wyświetlone przy użyciu różnych kolorów czcionki.
Użyć selektorów o postaci: nazwa_grupy>osoba .....

Zad 2

Sprawdź na przykładzie z zadania powyżej jak działa selektor postaci emeryt osoba {color : blue} (tj. nazwy elementów po spacji)
Zobacz czym różni się ten selektor od selektora z zadania powyżej tutaj: selektory

Zad 3

Utworzyć dokument XML zawierający dane kilku osób, przy czym każdy element <osoba> powinien mieć atrybut plec o wartości "m" lub "k".

<osoba plec="k">

Utworzyć arkusz CSS, który dane mężczyzn wyświetli na niebieskim tle, a dane kobiet - na czerwonym tle. Użyć selektorów: osoba[plec="m"] i osoba[plec="k"]

Zad 4

Utworzyć dokument XML zawierający listę kilku elementów, których zawartościami są teksty o długościach przekraczających 100 znaków. Utworzyć formatujący go arkusz CSS, który ustawia dość dużą czcionkę dla całego dokumentu, a następnie przy jego użyciu wypróbować działanie selektorów o postaci element:first-letter oraz element:first-line . Zmieniając rozmiar czcionki i / lub wielkość okna przeglądarki przekonać się, że dla selektora element:first-line długość wyróżnionej pierwszej linii jest zmienna i zależy od w/w parametrów.

Zad 5

Utworzyć dokument XML zawierający wymieszaną listę elementów typu <pierwszy> i <drugi>. Utworzyć arkusz CSS, który spowoduje, że element typu <drugi> będzie wyświetlony w kolorze czerwonym, jeśli jest bezpośrednio poprzedzony przez element typu <pierwszy>, zaś w kolorze zielonym, jeśli nie jest. Użyć selektora o postaci pierwszy + drugi .

Zad 6

Dla dowolnego z użytych wcześniej dokumentów XML utworzyć arkusz CSS, który spowoduje, że kolor elementu, nad którym przesuwa się kursor myszy, zmienia się na inny. Użyć selektora o postaci element:hover .

Zad 7

Wzbogacić arkusz CSS dla zad. 1 o funkcję automatycznej numeracji osób na liście - oddzielnie dla każdej z grup (tj. zaczynając w każdej grupie od 1). Użyć właściwości o postaci:

        nazwa_grupy { counter-reset: numer; ..................; }
                    
        osoba { counter-increment: numer; ..................; }

        osoba:before { content: counter(numer)"."; }      /* żeby każdą osobę poprzedzić numerem i kropką */

Uwaga: pseudoklasy :before i :after służą do tego, żeby w widoku sformatowanego dokumentu XML umieszczać automatycznie dodatkowe znaki nie występujące w samym dokumencie (odpowiednio przed i po danym elemencie).

Zad 8 - Projekt

Dla pliku xml o sporej objętości utwórz arkusz CSS formatujący go w czytelny sposób.
Ocenie podlegają selektory oraz właściwości elementów CSS, im większy plik CSS tym więcej punktów. Plik XML powinien mieć co najmniej 5 elementów tego samego typu. Głębokość drzewa XML powinna być conajmniej 4 Uwaga: treść XML powinna być przekonywująca np. imię i nazwisko powinny być rozróżnialne, a nie postaci Aaaa Bbbb