13.7.2020 Kursuse info – metshein.

com

 XML JA CSS KOOLITAJA

  30 MINUTES MARIO METSHEIN

04 XML vormindamine CSS’ga (Ülesanne

3)

Mis on CSS?
CSS (Cascading Style Sheets) on stiilileht, mis ütleb sisule kuidas too peab välja nägema. Näiteks määrame
ära fondi, värvi, teksti suuruse, tausta värvi jne jne. Enamasti kasutatakse seda kodulehekülgede
disainimisel, kuid see saab sama kenasti hakkama ka XML dokumentidega. Hetkel räägitakse CSS level 3 ja
level 4, mida täna juba arendatakse ja on jooksvalt kasutada kõigile soovijatele. CSS kirjutamiseks piisab
samuti tavalistest tekstiredaktoritest.

Üldine vormindus
Kasutame näitena klientide XML faili: kliendid.xml, mis võiks lõpus näha välja midagi sellist:

Alustame kõigepeal CSS faili sidumisest. Kui CSS fail asub XML failiga samas kataloogis, siis lisa xml-
stylesheet märgendisse css faili nimi.

<?xml version="1.0" encoding="UTF-8"?>

<?xml-stylesheet type="text/css" href="harjutus03.css" ?>
<kliendid>
<klient>
<id>1</id>
<eesnimi>Peadar</eesnimi>
<perenimi>Hickisson</perenimi>
...
https://www.metshein.com/kursus/# 1/6
13.7.2020 Kursuse info – metshein.com

Ja loo soovitud nimega CSS. Kui ühendamine õnnestus, siis veebilehitsejad ei loo sulle enam tuttavat XML
struktuuri. Kõik on ühes pikas reas.

CSS failis kasutame järgmist süntaksit, kus reeglid eraldame semikoolonitega:

elemendiNimi{
reegel1;
reegel2;
jne;
}

Kommentaarid lisame märkide /* ja */ vahele.

/* See on kommentaar */

Lisame CSS’i üldise kujunduse. Määrame ära juurelemendi tausta värvi ( background-color ) ning fondi
( font-family ). Fondi määramisel kasutasin kolme väärtust – kõige pealt määratakse fondiks Arial. Kui
seda kliendi arvutis pole, siis kuvatake Tahoma ja kui seda ka ei ole, siis kuvatakse mingi sellest
perekonnast. Kui font on mitmesõnaline, lisatakse too jutumärkide vahele. Näiteks “Times New Roman”.

Tausta värvi lisasin koodi abil, mis algab trellidega. Koodid leiad näiteks
siit: http://www.javascripter.net/faq/rgbtohex.htm

/* Üldine */

kliendid{
background-color: #F39C12;
font-family: Arial, Tahoma, sans-serif;
}

Üksikute blokkide vormindamine

Proovime nüüd vormindada igat blokki eraldi. Kuna üksikud blokid on sama nimega, saame ühe korraga kõik
vormindada.

display: block – kuvab kliendi elemendi blokkelemendina. Ehk saame talle vajadusel anda näiteks
kõrguse või laiuse.
padding: 10px – lisab 10px laiuse tühja ala kliendi elemendi ümber
margin: 4px – lisab 4px laiuse tühja ala kõikide klientide vahele
https://www.metshein.com/kursus/# 2/6
13.7.2020 Kursuse info – metshein.com

border: 1px solid #000000 – lisab ümber klient-elemendi 1px laiuse musta (#000000) pideva joone
(solid)
background-color: E67E22 – taustavärv

Ja et natuke midagi juurde õppida, siis täiendasin juurelementi käsuga column-count , mis muudab kogu
sisu veergude arvu.

/* Üldine */

kliendid{
background-color: #F39C12;
column-count: 4;
font-family: Arial, Tahoma, sans-serif;
}

/* Üksikud blokid */

klient{
display:block;
padding: 10px;
margin: 4px;
border: 1px solid #000000;
background-color: #E67E22;
}

Nüüd on iga klient-elemendi sees elemendid ühes pikas reas. Nendele elementidele tuleks ka öelda, et on
blokk-elemendid. Ainult nime jätan määramata, sest soovin saada ees- ja perenime ühele reale. Klientide
nimed fondi muudan aga rasvaseks ( font-weight ) ja muudan suuremaks ( font-size ).

/* Üldine */

kliendid{
background-color: #F39C12;
column-count: 4;
font-family: Arial, Tahoma, sans-serif;
}

/* Üksikud blokid */

kli t{
https://www.metshein.com/kursus/# 3/6
13.7.2020 Kursuse info – metshein.com
klient{
display:block;
padding: 10px;
margin: 4px;
border: 1px solid #000;
background-color: #E67E22;
}

eesnimi, perenimi{
font-size: 14pt;
font-weight: bold;
}

email{
display:block;
}

sugu{
display:block;
}

arveldusarve{
display:block;
}

id{
display:none;
}

Sisuga täiendamine
Viimase asjana, aga vaatame kuidas lisada CSS’is natuke sisu juurde, et kuvada, millise tüübiga on tegemist.

/* Üldine */

kliendid{
background-color: #F39C12;
column-count: 4;
font-family: Arial, Tahoma, sans-serif;
}

https://www.metshein.com/kursus/# 4/6
13.7.2020 Kursuse info – metshein.com

/* Üksikud blokid */

klient{
display:block;
padding: 10px;
margin: 4px;
border: 1px solid #000;
background-color: #E67E22;
}

eesnimi, perenimi{
font-size: 14pt;
font-weight: bold;
}

email{
display:block;
}

sugu{
display:block;
}

arveldusarve{
display:block;
}

id{
display:none;
}

/* Liideste lisamine */

email::before {
content: "Email: ";
}

sugu::before {
content: "Sugu: ";
}

arveldusarve::before {
content: "a/a: ";
}

https://www.metshein.com/kursus/# 5/6
13.7.2020 Kursuse info – metshein.com

Ülesanne 3
Ava ülesanne 2
Loo uus CSS kujundusfail ja ühenda XML failiga
Lisa CSS dokumenti kommentaar oma nime ja kuupäevaga
Vorminda dokument
font Verdana
õpilase andmed liiguvad ülevalt alla
õpilaste vahel on laiem tühi ala 20px
kogu lehe taust helesinine
fondi värv mitte must
õpilase nimi rasvaselt

https://www.metshein.com/kursus/# 6/6