Dzisiaj przedstawiamy plik XML za pomocą CSS w przeglądarce

O CSS można poczytać tutaj: CSS na w3schools
Większość poniższych zadań jest autorstwa dr J. Skurczyńskiego.

Zad 1

Utworzyć prosty dokument XML example.xml i formatujący jego wygląd arkusz CSS mystyle.css:

    <?xml version="1.0"?>
    <?xml-stylesheet type="text/css" href="mystyle.css"?>
    <test>
       <header>To jest naglowek</header>
       <cont> To jest jakis napis </cont>
       <cont> i to tez jest napis </cont>
       <cont> a to jest jeszcze inny napis </cont>
    </test>


    mystyle.css

    test {
       display:block;
       color:red;
       border:thick black solid;
    }

    header {
       display:block;
       font-size:20pt;
       color:green;
    }

    cont {
       display:block;
       background:blue;
       font-size:10pt;
    }

Umieścić je w jednym katalogu i obejrzeć plik example.xml przy użyciu przeglądarki. Spróbować zmienić zawartość arkusza stylów (czcionka, tło itd.), po każdej zmianie oglądając sformatowany dokument XML

Zad 2

Dla pliku XML z ostatniego zadania z poprzednich zajęć napisz prosty CSS który wykorzystuje mechanizm zmiany rozmiaru czcionki względem rozmiaru czcionki rodzica. W tym celu w elemencie który jest rodzicem, ustal rozmiar czcionki, a w elemencie który jest dzieckiem użyj jednego z poniższych przypisań:

 
NAZWA_ELEMENTU {font-size:smaller}
NAZWA_ELEMENTU {font-size:larger}

Uwaga: nie wszystkie przeglądarki stosują tą regułę (Mozilla tak, IE nie) oraz ustalanie reguł dla wielu elementów na raz:

NAZWA_ELEMENTU_1, NAZWA_ELEMENTU_2
{display: block;
marign-top: 12pt
font-size: 10pt}

Zad 3

Wypróbuj wstawianie komentarzy w CSS postaci /* treść_komentarza */ opisując działanie wybranego selektora.

zad 4

Przenieś część zawartości arkusza stylów z zad 1 do nowego arkusza zewnetrzny.css

a w akruszu wyjściowym umieścić odsyłacz:

 @import url(zewnetrzny.css);

Sprawdzić, że wygląd sformatowanego dokumentu XML nie zmieni się. Wprowadzić zmianę w arkuszu zewnetrzny.css i sprawdzić, że będzie ona miała wpływ na prezentację dokumentu XML w przeglądarce.
Uwaga: trzeba załączyć importowany plik na początku pliku css.

Zad 5

Sprawdź, że działa również zamieszczenie kilku (con. 2 ) różnych arkuszy css tak samo jak zamieszcza się jeden. Podziel w tym celu jeden arkusz css na 2 i załączyć wpisując dwukrotnie

<?xml-stylesheet type="text/css" href="nazwa_arkuasza_stylu.css"?>

Zad 6 (kolor, właściwości tekstu)

Napisz XML dla poetów: wiersz: tutuł, autor, rok, zwrotka, wers
oraz CSS w którym m.in. zaprezentujesz użycie następujących właściwości:

 
kolor:

AKAPIT {color: red}
AKAPIT {color rgb(255,0,0)}
AKAPIT {color:rgb(100%,0%,0%)}

tło:
     background-color wartości: red, green ...
     background-image  użycie:   nazwa_elementu {background-image:url(obraz.bmp)}
     background-repeat  wartości: repeat-x, repeat-y,repeat, no-repeat
     background-position wartości: 
     (położenie obrazu wewn elementu w kier. pozi i pion ) 15mm 6mm lub top bottom center right left

tekst decoration:

letter-spacing 25em lub 5pt

text-align  (wyrównanie do lewa i prawa)
text-indent np. 3em (wcięcie w pierwszym wersie)
line-height  2em odl. między liniami bazowymi
text-transform capitalize, uppercase, lowercase
text-decoration overline, underline, linethrough

Możesz użyć następującego obrazka: tło

Zad 7

(obramowanie)

Utworzyć dokument XML dla biblioteki

(pola wypożyczający - adres, imię nazwisko, książka -

miejsce - czytelnia lub wypożyczalnia,

status wypożyczenia, autor, data wypożyczenia itp.) z conajmniej 6 różnymi elementami równorzędnymi.

napisać do niego CSS oraz zaprezentować użycie następujących właściwości:

marginesy:

margin-top
margin-right
margin-left
margin-bottom

krawędzie:

border-style solid, dotted, double, groove,ridge, inset, outset, none
border-width thin, medium, thick
border-color kolor lub 
border-top: kolor1  border-right kolor2 border-bottom kolor3 border-left kolor4

Zad 8

Sprawdź które z użytych przez Ciebie na tych ćwiczeniach właściwości CSS są dziedziczone w drzewie XML (tj. że dziecko dostaje tą samą właściwość co rodzic i wtedy dla dziecka nie trzeba już jej definiować). Odpowiedz na pytanie: która z własności: display i font-size jest dziedziczona ?