IZRADA SAJTA za 10 €

Home   FORUM   Toplista   HTML   CSS   JavaScript   PHP   DIZAJN   SEO   Mapa


KONTAKT
izuzetan[at]gmail.com






TOP LISTA SAJTOVA
Igrice
Slike

CSS border

Atribut border može imati po tri vrednosti, a to su boja, stil, i debljina.  Svaka od te tri vrednosti može imati razne varijacije te ću ih dati kao spisak sa objašnjenjima, a nakon toga daćemo i primer koji će dočarati atribut border.

  • boja linije granice (color) - se može definisati imenovanjem boje (blue, red, black itd), ili u heksadecimalnom zapisu (#aabbcc), ili udecimalnom zapisu (rgb(23,123,12))
  • stil linije granice (style) - Vrednosti mogu biti:
    • none - ne vide se linije granice
    • hidden - isto kao i none ali u situacijama sa drugim elementima da ne bi došlo do sukoba vrednosti (najčešće u tablicama)
    • dotted - Odredjuje ukrasnu granicu u obliku tufna
    • dashed - Granice u obliku crtica
    • solid - puna linija
    • double - prikazuje granice sa dve linije a izmedju prazan prostor
    • groove - 3D užljebljene granice. A izgled zavisi od border-color vrenosti
    • ridge - efekat grebena. 3D efekat umišljene granice, koji takodje zavisi od vrednosti border-color
    • inset - odredjuje 3D umetak granice. Isto efekat zavisi od border-color atributa
    • outset - odredjuje početak 3D granice. Efekat zavisi isto od border-color

  • debljina linije granice (width) - Vrednosti mogu biti:
    • debljina u jedinicama CSS za dužinu - znači pikseli (px), milimetri (mm), centimetri (cm), i sve ostalo što smo već objasnili
    • thin - tanka linija svih granica
    • medium - srednja debljina svih granica
    • thick - sve granice debele

Kao što znamo sve što je četvorougaono ima četri strane, ivice, ili kako god to nazvali. Kad napišemo samo border onda se tako definišu sve 4 ivice našeg box modela potpuno isto. Medjutim CSS omogućava definisanje i svih ivica drugačije kako nama odgovara. Na primer želimo definisati gornja ivicu onda pišemo atribut border-top, levu ivicu border-left, desnu ivicu border-right i donju ivicu border-bottom. Svi ti atributi mogu imati spisak vrednosti kao i border atribut gore.

Ajde sad da vidimo neke karakteristične atribute kroz primer.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head>
<style type="text/css">
   #ba {width: 160; border: 5px  dotted  blue;}
   #bb {width:160; border: 5px  dashed  blue;}
   #bc {width:160; border: 5px  solid  blue;}
   #bd {width:160; border: 5px  double  blue;}
   #be {width:160; border: 10px  groove;}
   #bf {width:160; border: 10px  ridge;}
   #bg {width:160; border: 10px  inset;}
   #bh {width:160; border: 10px  outset;}
   #bi {
        width: 230; height: 50;
        border-top: 5px  dotted  black;
        border-left: 8px  double  blue;
        border-right: 4px  dashed  green;
        border-bottom: 15px  solid  black;
   }
   #bj {width:260; border-bottom: solid;}
</style></head><body>
<span id="ba"> Boks model sa dotted</span>&nbsp;&nbsp;&nbsp;
<span id="bb"> Boks model sa dashed</span>&nbsp;&nbsp;&nbsp;
<span id="bc"> Boks model sa solid</span>&nbsp;&nbsp;&nbsp;
<br><p>
<span id="bd"> Boks model sa double</span>&nbsp;&nbsp;&nbsp;
<span id="be"> Boks model sa groove</span>&nbsp;&nbsp;&nbsp;
<span id="bf"> Boks model sa ridge</span>&nbsp;&nbsp;&nbsp;
</p><br><p>
<span id="bg"> Boks model sa inset</span>&nbsp;&nbsp;&nbsp;
<span id="bh"> Boks model sa outset</span>&nbsp;&nbsp;&nbsp;
</p>
<span id="bi"> Boks model sa 4 razlicite strane</span>&nbsp;&nbsp;&nbsp;
<span id="bj"> Boks model samo sa donje strane linija</span>
</body></html>




Boks model sa otted


Boks model sa ashed


Boks model sa solid


Boks model sa double


Boks model sa groove


Boks model sa ridge


Boks model sa inset


Boks model sa outset


Boks model sa 4 razlicite strane


Boks model samo sa donje strane linija

Prva 8 spanova prikazuju sve varijacije stilova. U tim delovima vidimo da se sve 4 strane boksa obradjuju istim vrednostima te zato se koristi samo atribut border. A vrednosti se definišu tako što se samo nabrajaju iza dve tačke i nije potreban zarez već samo da su razmaknute. Vidimo takodje da ako nije zadata boja da je ona po defaultu crna, odnosno sa nijansama crne  sive da bi se dobio odredjen stil. U devetom spanu smo stavili da nam sve 4 strane budu drugačije po skoro svim elementima. U desetom spanu smo demonstrirali kako može da se definiše samo jedna strana boksa, ali naravno tom logikom možemo bilo koju drugu stranu ili kombinacije raznorazne. U desetom takodje primetite da mi ne moramo uvek zadavati debljinu border atributu. Možemo samo zadati stil i automatski se nacrta sa defaultnom debljinom od 3px.

U CSS postoji još jedna linija koja se može definisati. Naime radi se o spoljnoj liniji koja oivičuje border, to jest dodatno oivičava granične linije boksa. Za tu liniju apsolutno sve isto važe vrednosti kao i za border, jedino se umesto atributa border piše outline i nema mogućnosti da se posebno definišu pojedine ivice. Znači nema left, right, top, i bottom varijante. Evo jedng kratkog primera:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head>
<style type="text/css">
   #bc {
       width: 250;
       border: 10px  solid  blue;
       outline: 15px  dotted  red;
   }
</style></head><body>
<p id="ga">Boks model sa outline i border</p>
</body></html>


Boks model sa outline i border

Meni ovo nije radilo u internet explorer 8, neznam kod drugih.

Copyright © 2010 BUbaj. Powered By bubaj.com
CSS    CSS osnove    CSS stil    CSS box model    CSS display