Hitre šole na www.matjazev.net

Hitra šola CSS

Seznanitev

CSS se osredotoči na izgled!

Kaj je CSS?

CSS pomeni Cascading Style Sheets, s slovenskim prevodom pa se sploh ne bom trudil.
CSS je namenjen opisu prezentacije elementov dokumenta.

CSS v točkah?

Kompatibilen vnaprej in nazaj: CSS agent bo preprosto ignoriral vse, česar ne pozna, kar pomeni, da se koda pisana za CSS2 ali CSS3 lahko izvaja na agentu za CSS1, saj le ta pač ignorira zadeve, ki jih ne pozna, ker v času njegovega nastanka še niso bile definirane. Tako je torej kompatibilen vnaprej. Kompatibilnost za nazaj pa morajo zagotavljati agenti tako, da vedno znajo postoriti vse, kar so znali njihovi predhodniki.
Velja za vse opisne jezike: To sem vam tudi demonstriral na primeru HTML in XML dokumenta.
Neodvisen: CSS ni pod lastništvom nobene blagovne znamke, temveč o njem odloča konzorcij in standard je eden. Trenuten problem pa je v dejstvu, da vsako podjetje implementira del standarda (nobeden brkljalnik ne zna vsega, kar CSS predpisuje). Problem je v tem, da mora spletni razvijalec vedno misliti tudi na deskarje, ki nimajo najnovejših različic!
Preprost: kot boste videli v nadaljevanju, je struktura jezika dokaj preprosta in jasna.
Ponuja dostopnost: v najnovejši specifikaciji lahko CSS kontrolira različne medije, kot so zvok in berilova pisava. S tem bo omogočena uporaba interneta tudi ljudem s posebnimi zahtevami.

Kako povezati CSS in HTML dokument

Kot ste videli že na primerih, ima HTML posebno oznako<style>, kamor lahko zapišete CSS ukaze. Veliko priporočljivejši pa je drugi način, ko v dokumentu podate samo povezavo do CSS dokumenta.

Povezavo do CSS dokument naredite s posebno oznako link. Link ima tri atribute:

rel, ki določa tip povezave in v našem primeru je to stylesheet.
type, ki natančneje določa povezani dokument kot tekstovni dokument tipa css ==> text/css.
href, ki določa lokacijo CSS dokumenta.

Resnici na ljubo, moram povedati, da obstaja tudi tretji način, ki pa je najmanj zanimiv, a mogoče pride kdaj prav. CSS ukaze lahko napišete kar znotraj HTML elementa kot atribut style:

Načine povezave izvornega dokumenta z CSS dokumentom

<html>
  <!-- to je eksterni način povezave (priporočljiv) -->
  <link rel="stylesheet" type="text/css" href="test.css">

  <!-- to je inteni način povezave -->
  <style type="text/css">
    H1  { color: blue }
    DIV { color: red  }		
  </style>

  <body>
	
    <h1>Tole je naslov</h1>
      <div>Tole pa je nek tekst.</div>
			
    <!-- to pa je tki. in-line CSS ali vgnezdeni CSS -->			
    <h1 style="color: sienna">Tole je drugi naslov</h1>
      <div>Tole pa je nek drugi tekst.</div>
			
  </body>
</html>

Seveda pa je lahko z dokumentom povezanih več CSS dokumentov, pa tudi na različne načine, kot je to vidno v gornjem primeru. Povsem lahko se zgodi, da je ista oznaka v različnih CSS dokumentih različno opisana. V tem primeru stopijo v veljavo posebna pravila, ki določajo kdo ima prednost. Pravila so dokaj zapletena in presegajo okvir te šole, velja pa, da ima največjo prioriteto gnezdeni CSS (in-line), ki mu sledi interni (določen s STYLE elementom) in nazadnje tisti v povezanem CSS dokumentu!

Ker lahko v dokumentu nastopa več različnih CSS dokumentov, mora vse te različne dokumente CSS agent združiti v enega (kot je opisano zgoraj). Od tod tudi ime Cascading, kar v angleščini (v tem kontekstu) pomenu združiti!

Hitro preverjanje znanja