Hitre šole na www.matjazev.net

Hitra šola CSS

Predogled

CSS se osredotoči na izgled!

CSS v hitrem predogledu?

Oglejmo si preprost HTML dokument:

Preprost HTML dokument [Ogled]

<html>
  <body>
	
    <h1>Tole je naslov</h1>
      <div>Tole pa je nek tekst.</div>
			
    <h1>Tole je drugi naslov</h1>
      <div>Tole pa je nek drugi tekst.</div>
			
  </body>
</html>

Predpostavimo sedaj, da želite imeti vse naslove v modri barvi. V HTML-ju bi se tega lotili tako, da bi vsakemu naslovu določili modro barvo. Če določen element ima atribut color, potem mu moramo pač dodati atribut color="blue". Če pa element ne pozna tega atributa, moramo celoten element zapreti v element <font>.

Če bi element H1 poznal atribut color, bi modre naslove dobili takole:

<html>
  <body>
	
    <h1 color="blue">Tole je naslov</h1>
      <div>Tole pa je nek tekst.</div>
			
    <h1 color="blue">Tole je drugi naslov</h1>
      <div>Tole pa je nek drugi tekst.</div>
			
  </body>
</html>

Ker pa H1 tega atributa ne pozna, je potrebno še malce več dela:

<html>
  <body>
    <font color="blue">	
      <h1>Tole je naslov</h1>
    </font>
        <div>Tole pa je nek tekst.</div>
			
    <font color="blue">			
      <h1>Tole je drugi naslov</h1>
    </font>		
        <div>Tole pa je nek drugi tekst.</div>
			
  </body>
</html>

Seveda že slutite, da je z uporabo CSS-a tole lažje rešljivo in res je. Poglejmo si primer:

Preprost HTML dokument, ki mu obliko določa CSS [Ogled]

<html>

  <style type="text/css">
    H1 { color: blue }
  </style>

  <body>
	
    <h1>Tole je naslov</h1>
      <div>Tole pa je nek tekst.</div>
			
    <h1>Tole je drugi naslov</h1>
      <div>Tole pa je nek drugi tekst.</div>
			
  </body>
</html>

Kot vidite je dokument ostal pravzaprav enak. Dodali smo mu samo element style, kjer smo določili, da naj vsak element H1 izpiše z modro barvo.

CSS drugič

Ostanimo še vedno pri našem preprostem primeru in predpostavimo, da je naša želja zapisati ves tekst (v elementih <div>) v rdeči barvi. V HTML-ju nam zopet ne preostane drugega, kot zapisati ob vsakem elementu <div>, da želimo rdečega.

Ker pa H1 tega atributa ne pozna, je potrebno še malce več dela:

<html>
  <body>
    <font color="blue">	
      <h1>Tole je naslov</h1>
    </font>
      <font color="red">		
        <div>Tole pa je nek tekst.</div>
    </font>
					
    <font color="blue">			
      <h1>Tole je drugi naslov</h1>
    </font>		
      <font color="red"> 		
        <div>Tole pa je nek drugi tekst.</div>
      </font>				
			
  </body>
</html>

No, tukaj pa je že toliko elementov, da je med njimi že prav težko najti tekst, ki se bo v resnici izpisal na ekran. Z uporabo CSS-a pa lahko preprosto povemo, naj brkljalnik vse elemente <div> izrisuje v rdeči barvi

Z uporaba CSS-a povemo, da želimo modre naslove in rdeč tekst [Ogled]

<html>

  <style type="text/css">
    H1  { color: blue }
    DIV { color: red  }		
  </style>

  <body>
	
    <h1>Tole je naslov</h1>
      <div>Tole pa je nek tekst.</div>
			
    <h1>Tole je drugi naslov</h1>
      <div>Tole pa je nek drugi tekst.</div>
			
  </body>
</html>

Dobro, dosedaj nismo naredili nič pretresljivega. Čeprav si lahko zamislite, koliko truda vam prihrani CSS, če ga uporabljate na nivoju celotnega spletnega mesta, kjer imate več 10 (ali več 1000) HTML dokumentov z več 1000 elementi!

Zna pa CSS tudi mnogo boljše stvari. Predpostavimo, da želite imeti vašo internetno stran oblikovano podobno kot so knjige, kjer so naslovi ob levem robu, tekst pa je od roba zamaknjen par centimetrov in poravnan.

Ali bi znali v HTML-ju povedati, da želite ves tekst zamaknjen od levega roba za natanko 2cm?

Tekst od roba zamaknjen za 2cm! [Ogled]

<html>

  <style type="text/css">
    H1  { color: blue }
    DIV { color: red; margin-left: 2cm; }				
  </style>

  <body>
	
    <h1>Tole je naslov</h1>
      <div>Tole pa je nek tekst.</div>
			
    <h1>Tole je drugi naslov</h1>
      <div>Tole pa je nek drugi tekst.</div>
			
  </body>
</html>

Ali v dokumentu sploh opazite razliko? Vse kar je bilo potrebno je margin-left: 2cm!

CSS in XML

Kot sem že povedal, lahko CSS povsem lepo sodeluje tudi z XML-om. Poglejmo si preprost primer XML dokumenta, ki opisuje mojo družino:

Preprost XML dokument z opisom družine ([Ogled])

<?xml version="1.0" encoding="windows-1250"?>

<druzina>
  <priimek>Prtenjak</priimek>
  <imena>
    <oce>Matjaž</oce>
    <mati>Beti</mati>
    <otroci>
      <hci>Veronika</hci>
      <hci>Hana</hci>
    </otroci>
  </imena>
</druzina>

Poskusimo ga sedaj oblikovati s pomočjo CSS-a:

CSS za opis izgleda elementa družine:

druzina {
  border  : thin dotted #000099;
  font    : normal normal 100 large helvetica, arial, sans-serif;
  padding : 10px 10px 10px 10px;
  position: relative;
  height  : 50px;
  width   : 50%;
  left    : 25%;
}

imena { 
  width           : 50%;
  float           : right;
  background-color: #cdcdcd;
}

priimek { 
  width           : 100%;
  font-size       : 150%;
  color           : #000099;
  background-color: #aaaaaa;
  display         : inline;
}

oce, mama, otroci { 
  display  : block;
}

otroci { 
  font-size : 80%;
  color    : #0000FF;
}

XML dokument z opisom družine ([Ogled])

<?xml version="1.0" encoding="windows-1250"?>
<?xml:stylesheet type="text/css" href="druzina.css"?>

<druzina>
  <priimek>Prtenjak</priimek>
  <imena>
    <oce>Matjaž</oce>
    <mati>Beti</mati>
    <otroci>
      <hci>Veronika</hci>
      <hci>Hana</hci>
    </otroci>
  </imena>
</druzina>

Seveda pa lahko tako preprosto oblikujemo podatke o več družinah

XML dokument z opisom več družin ([Ogled])

<?xml version="1.0" encoding="windows-1250"?>
<?xml:stylesheet type="text/css" href="druzina.css"?>

<druzine>
  <druzina>
    <priimek>Prtenjak</priimek>
    <imena>
      <oce>Matja×</oce>
      <mati>Beti</mati>
      <otroci>
        <hci>Veronika</hci>
        <hci>Hana</hci>
      </otroci>
    </imena>
  </druzina>

  <druzina>
    <priimek>Kolar</priimek>
    <imena>
      <oce>Janko</oce>
      <mati>Safeta</mati>
      <otroci>
        <sin>Äan</sin>
        <hci>Anja</hci>
      </otroci>
    </imena>
  </druzina>

  <druzina>
    <priimek>Zore</priimek>
    <imena>
    <oce>Leon</oce>
    <mati>Darka</mati>
    <otroci>
      <hci>Taja</hci>
      <sin>Jaka</sin>
    </otroci>
    </imena>
  </druzina>
	
  <druzina>
    <priimek>Žvižej</priimek>
    <imena>
    <oce>Bojan</oce>
    <mati>Natalija</mati>
    <otroci>
      <sin>Žan</sin>
    </otroci>
    </imena>
  </druzina>

</druzine>

Hitro preverjanje znanja