Hitre šole na www.matjazev.net

Hitra šola CSS



Okvirji

Okvirji so zelo pomemben del CSS-a. Tukaj bomo spoznali samo osnove

Razmerje okvirjev

CSS definira tri nivoje okvirjev in jih tudi ustrezno poimenuje. Kakorkoli sem besede obračal, jih ne znam smiselno prevesti v slovenščino saj, bi vse tri lahko prevedel kot rob, no padding bi bil polnilo... Kakorkoli, s slovenjenjem ne bi nič pridobil, zato bom pustil kar angleške izraze.

CSS torej definira tri nivoje robov in to so padding, border in margin! Vsi imajo zelo podobne lastnosti in tudi sicer so si podobni, zato jih razvijalci pogosto mešajo. No, v 95% primerov je pravzaprav res nepomembno katerega uporabite, včasih pa temu ni tako. Ker je to 'hitra' šola, ki služi vpogledu v tehnologijo, se tu s hudimi razpravami ne bom ukvarjal!

Razmerje okvirjev

In kaj nam ta slika sploh pove? Mogoče se je v njej malce težje znajti, ker je v angleščini. A razlog sem že povedal malce višje. Poskusil jo bom razložiti še z besedami.

CSS agent okrog elementa naredi okvir. Vsak element pravzaprav postavi v škatlico, ki je omejen z robovi zgornjim in spodnjim (top in bottom) ter levim in desnim (left in right). Znotraj te škatlice pa so še druge, katerih velikost nato vpliva na velikost celotne škatlice.

Da razložim še kratice. Vse kratice so narejene po istem ključu. Prva črka predstavlja mejo (P == Padding, B == Border, M = Margin), druga črka pa predstavlja rob (t == top, b == bottom, l == left in r == right).

Border

Border je edini okvir okoli elementa, katerega meje lahko uporabnik vidi. Z lastnostjo padding lahko to mejo odmaknemo od elementa, z margin pa določimo razdaljo med obdelovanim elementom in njegovimi sosedi!

Katere lastnosti okvirja (border) lahko postavimo?

V osnovi lahko postavimo tri lastnosti, ki jih potem v različnih kombinacijah družimo v ostale lastnosti.

Prva lastnost je color, ki določa barvo črt okvirja. Lastnost smo dodobra spoznali že v prejšnjem poglavju, zato tukaj o njej ne bom izgubljal besed.

Druga lastnost je width, ki določa debelino črte okvirja. Lastnost lahko zavzame sledeče vrednosti:

Ali pa neko številčno debelino, določeno s poljubno enoto!

tretja lastnost je styla, ki določa stil črte okvirja. Lastnost lahko zavzame sledeče vrednosti:

Opisane lastnosti pa ne morejo biti same, temveč se vedno vežejo na nek rob in tako dobimo tele kombinacije:

Povsem enakovredno pa seveda tudi kombinacije border-top-color, border-top-color in border-top-color (za zgornjo črto), border-left-color, border-left-color in border-left-color (za levo črto) in border-right-color, border-right-color in border-rightp-color (za zgornjo črto),

Lahko pa te lastnosti združimo v enem nivoju višje! To pomeni, da lahko naenkrat določimo vse tri lastnosti v zaporedju width, style in color.

Določanje vseh treh lastnosti za posamezno črto 
/* zgornja črta naj bo široka 5 točk, črtasta in rdeča */
border-top : 5px dotted red;  
/* leva črta naj bo široka 1cm, cela in modra */
border-left: 1cm solid blue;

Lahko pa vse lastnosti postavimo naenkrat za vse štiri črte (spodnjo, zgornjo, levo in desno).

Ali pa najkompaktnejša oblika:

Najkompaktnejša oblika: 
border : 2px dotted gold;  /* črte naj bodo široke 2 toči, črtaste in zlate */

Pregled vseh možnosti:

spodnja črta zgornja črta 
border-bottom-color : barva 
border-bottom-width : širina
border-bottom-style : stil
border-bottom       : vse tri last.
    
border-top-color    : barva 
border-top-width    : širina
border-top-style    : stil
border-top          : vse tri last.
leva črta desna črta 
border-left-color   : barva 
border-left-width   : širina
border-left-style   : stil
border-left         : vse tri last.
    
border-right-color  : barva 
border-right-width  : širina
border-right-style  : stil
border-right        : vse tri last.
vse črte hkrati 
border-color        : barva 
border-width        : širina
border-style        : stil
border              : vse tri last.

Primer

Ko si boste ogledali ta primer, ni nujno, da bo vse tako, kot bi moralo biti. Današnji brkljalniki ne poznajo vsega kar CSS določa!

CSS pravila za obliko teksta ([Ogled]) 
<html>

 <style>
  <!-- 
   na ta CSS pravila se ne ozirajte,
   zapisana so samo zato, da se primer
   bolje vidi
  -->
  div {
   background-color: silver;
   margin          : 10px 10px 10px 10px;
  }
 </style>

 <!-- prikazati vam želim ta pravila: -->
 <body>
  <div style="border-bottom : 2px dotted red   ">
              border-bottom : 2px dotted red   </div>
  <div style="border-top    : 2ex double green ">
              border-top    : 2ex double green </div>
  <div style="border-left   : .3cm solid  blue ">
              border-left   : .3cm solid  blue </div>
  <div style="border-right  : .2in solid  red  ">
              border-right  : .2in solid  red  </div>

  <div style="border : 2px dotted red  ">
              border : 2px dotted red  </div>
  <div style="border : 2ex double green">
              border : 2ex double green</div>
  <div style="border : .3cm solid  blue ">
              border : .3cm solid  blue </div>
  <div style="border : .2in solid  red  ">
              border : .2in solid  red  </div>
 </body>
</html>

Margin

Kot je vidno na gornji sliki, margin določa rob okoli elementov. Kot takšna ima lahko torej eno samo lastnost in to je širina oz. višina, pač odvisno ali govorimo o levem/desnem robu ali gornjem/spodnjem. Širino oz. višino pa lahko definiramo na že znane načine iz poglavja 4.

Oglejmo si samo različice lastnosti 
margin-bottom  : razmik spodaj 
margin-top     : razmik zgoraj
margin-left    : razmik levo 
margin-right   : razmik desno
margin         : vsi štirje razmiki v zaporedju
               : top right bottom left

Sedaj pa lahko pogledate tudi v style element gornjega primera, kjer piše margin: 10px 10px 10px 10px, kot je vidno na primeru, je med elementi razmik (bela površina).

Padding

Padding, pa kot je vidno iz zgornje slike, določa razmik med sosednjimi elementi! Zanj velja vse kot za margin in tudi lastnosti so enakovredne:

Lastnosti za padding 
padding-bottom  : razmik med elementoma spodaj 
padding-top     : razmik med elementoma zgoraj
padding-left    : razmik med elementoma levo 
padding-right   : razmik med elementoma desno
padding         : vsi štirje razmiki v zaporedju
                : top right bottom left

Zaključni primer

Zaključni primer ([Ogled]) 
<html>

 <style>
  #prvi {
   margin  : 0px 0px 0px 0px;
   padding : 0px 0px 0px 0px;
  }
  #drugi {
   margin  : 20px 20px 20px 20px;
   padding : 20px 20px 20px 20px;
  }
  #tretji {
   margin  : 40px 40px 40px 40px;
   padding : 40px 40px 40px 40px;
  }

  #prvi, #drugi, #tretji {
    background-color: silver;
    border          : thin solid red;
  }
 </style>

 <body>
   <div ID="prvi">to je nek tekst označen kot "prvi" v elementu DIV</div>
   <div ID="drugi">to je nek tekst označen kot "drugi" v elementu DIV</div>
   <div ID="tretji">to je nek tekst označen kot "tretji" v elementu DIV</div>
 </body>
</html>

Na primeru je združeno, vse kar smo se dosedaj naučili. Najprej bi vas opozoril na selektorje tipa #xxx. Kot smo spoznali v poglavju o selektorjih, ta selektor velja za vse elemente, ki imajo lastnost ID enako "xxx"! Nadalje pa bi vas opozoril tudi na združevanje selektorjev, kar se vidi ob koncu CSS definicije, ko smo vsem trem selektorjem postavili barvo ozadja na srebrno in določili tanek rdeč okvir!

Hitro preverjanje znanja

  1. Kako si okvirji sledijo od notranjega proti zunanjemu? ..... Odgovor
  2. Kako bi zaukazali brkljalniku, naj okoli elementa nariše tanko modro črto? ..... Odgovor




Kaj menite vi?

Hitra šola CSS, prva izdaja, ©Copyright Matjaž Prtenjak