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>
<span id="bb"> Boks model sa dashed</span>
<span id="bc"> Boks model sa solid</span>
<br><p>
<span id="bd"> Boks model sa double</span>
<span id="be"> Boks model sa groove</span>
<span id="bf"> Boks model sa ridge</span>
</p><br><p>
<span id="bg"> Boks model sa inset</span>
<span id="bh"> Boks model sa outset</span>
</p>
<span id="bi"> Boks model sa 4 razlicite strane</span>
<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.
