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
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}
Wypróbuj wstawianie komentarzy w CSS postaci /* treść_komentarza */ opisując działanie wybranego selektora.
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.
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"?>
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
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
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 ?