NEDSCHOOLDEV

view_headline menu
yt yt yt

CSS

CSS CSS Uvod CSS Upotreba CSS Boje CSS Pozadine CSS Borders CSS Margine CSS Padding CSS Height/Width CSS Float CSS Tekst CSS Font CSS Poravnanje CSS Linkovi CSS Liste CSS Tabele CSS Ikone








CSS Borders

<< >>



Šta određuje Borders?


Borders određuje granice oko HTML elemenata. (engl. Border = granica).

Svi HTML elemetni zauzimaju određeni prostor, koji ograničava HTML element od okoline.

Ukoliko želimo da oko elementa postavimo jasno vidljivu granicu, koristimo parametar border.


Ovo je rečenica sa punom granicom.


Ovo je rečenica koja ima granicu sa tačkicama plave boje.


Ova rečenica ima različite postavke granice sa svih strana.


Ovo je rečenica sa samo donjom granicom.


Ovo je rečenica sa zaobljenom granicom.


Pomoću različitih parametara možemo dobiti različite vrste i oblike granica.

Parametar border može definisati stil, širinu i boju granica:


border-style    određuje stil granice

border-width    određuje debljinu granice

border-color    određuje boju granice



border-style

border-style određuje vrstu granice koja će biti prikazana.

Kakva će granica biti zavisi od vrijednosti parametra.


Vrijednosti parametra mogu biti sljedeće:


solid   Definiše punu granicu

double   Definiše punu dvostruku granicu

dotted   Definiše granicu sa tačkicama

dashed   Definiše granicu sa crticama

groove   Definiše ugraviranu granicu

ridge   Definiše izbočenu granicu

inset   Definiše granicu sa uvučenim sadržajem

outset   Definiše granicu sa izbočenim sadržajem

none   nema granice

hidden   granica je sakrivena (zauzima prostor oko elementa)

mix   Više različitih granica na jednom elementu

play_arrow

p.solid    { border-style: solid; }
p.double    { border-style: double; }
p.dotted    { border-style: dotted; }
p.dashed    { border-style: dashed; }
p.groove    { border-style: groove; }
p.ridge    { border-style: ridge; }
p.inset    { border-style: inset; }
p.outset    { border-style: outset; }
p.none    { border-style: none; }
p.hidden    { border-style: hidden; }
p.mix    { border-style: dotted solid dashed solid; }


Ovo je rečenica sa punom granicom.


Ovo je rečenica sa dvostrukom granicom.


Ovo je rečenica koja ima granicu sa tačkicama.


Ovo je rečenica koja ima granicu sa crticama.


Ovo je rečenica sa izrezbarenom granicom.


Ovo je rečenica sa izbočenom granicom.


Ovo je rečenica sa uvučenim sadržajem.


Ovo je rečenica sa izbočenim sadržajem.


Ovo je rečenica bez granice.


Ovo je rečenica sa skrivenom granicom.


Ovo je rečenica sa mješovitim granicama.




border-width

border-width određuje debljinu granice koja će biti prikazana.

Debljina može biti definisana sa predefinisanim imenom (thin, medium, thick) ili sa vrijednostima u px, cm, em .


Border-width se uvijek piše zajedno sa border-style, inače se neće primjeniti na element.


play_arrow

p.petpx {
   border-style: solid;
   border-width: 5px;
}

p.medium {
   border-style: solid;
   border-width: medium;
}

p.thin {
   border-style: solid;
   border-width: thin;
}


Ovo je rečenica sa punom granicom i debljinom od 5 pixela.


Ovo je rečenica sa punom granicom i debljinom medium.


Ovo je rečenica sa punom granicom i debljinom thin.




border-color

border-color definiše boju granice.

Boju možemo definisati bilo kojom metodom, imenom boje. ili RGB, HEX ili HSL vrijednostima.


play_arrow

p.solid-tomato {
   border-style: solid;
   border-color: tomato;
}

p.dotted-rouse {
   border-style: dotted;
   border-color: #ff00ff;
}


Ovo je rečenica sa punom granicom i tomato bojom.


Ovo je rečenica sa tačkastom granicom i #ff00ff bojom.




Pojednostavljeno određivanje granica:


Vidjeli smo da postoje razni parametri pomoću kojih možemo odrediti izgled granice elemenata.

Međutim postoji i jednostavniji način za određivanje granica gdje možemo odjednom postaviti sve parametre.


To možemo učiniti na sljedeći način:

border: width style color;

play_arrow

p {
   border: 2px solid #ff00ff;
}


Ovo je rečenica debljine 2px, stila solid i boje #ff00ff.




Određivanje pojedinačnih granica:


Ukoliko želimo postaviti granicu samo sa jedne strane to možemo učiniti tako što koristimo sljedeće parametre:


border-left - određuje samo lijevu granicu

border-right - određuje samo desnu granicu

border-top - određuje samo gornju granicu

border-bottom - određuje samo donju granicu

play_arrow

p.left { border-left: 3px solid green; }
p.right { border-right: 3px solid green; }
p.top { border-top: 3px solid green; }
p.bottom { border-bottom: 3px solid green; }


Ovo je rečenica koja ima samo lijevu granicu.


Ovo je rečenica koja ima samo desnu granicu.


Ovo je rečenica koja ima samo gornju granicu.


Ovo je rečenica koja ima samo donju granicu.




Određivanje zaobljenih granica:


Zaobljene granice se određuju border-radius parametrom.

border-radius: 5px;


play_arrow

p.br5px {
   border: 2px solid #8300FF;
   border-radius:: 5px;
}

p.br10px {
   border: 2px solid #8300FF;
   border-radius:: 10px;
}

p.br50px {
   border: 2px solid #8300FF;
   border-radius:: 50px;
}


Ovo je rečenica koja ima zaobljenost granice 5 pixela.


Ovo je rečenica koja ima zaobljenost granice 10 pixela.


Ovo je rečenica koja ima zaobljenost granice 50 pixela.




<< >>



© Copyright 2018. nedschool.com