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 ?
