Treći čas – CSS box model

Dragan Filipović Korak po korak, Kurs Comments (0)

CSS BOX model

Više o CSS box modelu pročitajte ovde.

box_model

 

Sadržaj elementa (Content) – tekst, slika ili bilo koji element.

Border – ivica elementa, ima svoju debljinu, boju  …

Padding – uvučenost sadržaja u odnosu na ivicu.

Margin – udaljenost elementa od ostalih elemenata.

Napravićemo novi fajl vezba2.html u kome ćemo vežbati CSS box model.

box-zadatak

1. Napravimo novu stranu (file — new — HTML), fajl snimimo pod imenom vezba2 (file — save as – upišemo ime vezba2.html). HTML strane snimamo u root folderu.

2. Povežemo fajlove. U fajlu vezba.html kliknemo na dugme za povezivanje CSS-a (attach css file), preko BROWSE dugmeta nađemo fajl vezba.css i kliknemo OK. Fajl vezba.css smo ranije napravili i koristićemo ga za sve vežbe.

3. U fajlu vezba.css napravićemo formate za DIV tagove. 

CSS selektor -CLASS

Koristićemo nove CSS selektore KLASU (class).

Class – klasa:

.ime {
atribut:vrednost;
}

 Do sada smo koristili ID (#). ID se koristi za glavne elemente sajta, što su nama redovi i glavna tabela. ID može da se koristi samo jednom na strani. Znači ako vam je prvi red #HEDER, taj format ne možete da koristite na drugom delu strane, odnosno taj element ne može da se ponavlja. 

KLasa se koristi za sekundarne elemente na strani, odnosno za sve ostale elmente. Znak u CS-u je tačka (.), sve ostalo je isto kao i za ID. Npr.

.heder {
	width:800px;
	height:200px;
	background-image:url(../images/header.jpg);
}

 Element u HTML-u će zatim imati klasu, a ne ID, odnosno pri ubacivanju DIV tagova nećemo birati ID, već CLASS.

  <div class="heder">Content for  class "heder" Goes Here</div>

 div-klasa

Znači u fajlu vezba.css, na kraju fajla, u nastavku pravimo klasu (format) za prvi element (nazovimo ga prvi-element)

Dodelimo mu dimenzije i pozadinsku boju. Uvek u vežbi elementima dodajte pozadinsku boju, kako bi lakše pratili dešavanja na sajtu.

.prvi-element {
	width:500px;
	height:500px;
	background-color:#FF0000;
}

 U fajlu vezba2.html  napravimo element za koji smo upravo spremili format.

<div class="prvi-element">Content for  class "prvi-element" Goes Here</div>

 NAPOMENA – POSLEDNJE PONAVLJANJE

FORMATI (dizajn, stil …) se prave u CSS-u, znači u fajlu stil.css, format.css, ili-kako-god-vec.css, ti fajlovi se uvek snimaju u folderu CSS. Kad napravite nešto u CSS-u ništa se neće videti na sajtu – CSS je samo dizajn nekog HTML  elementa. HTML elementi su delovi vašeg sajta i oni se vide na sajtu. 

ELEMENTI (div, table, p, ul, …) se prave u HTML-u, znači u fajlu index.html, galerija.html,  ili-kako-god-vec.html. Ovo su strane vašeg sajta. One se uglavnom nalaze u ROOT folderu. Kada napravite neki HTML element on će se videti na sajtu, a ako mu dodelite neki CSS format, biće prikazan sa tim CSS osobinama.

NPR. Imate crvenu farbu (to je CSS), sa njom ništa ne možete dok ne napravite vrata (to je HTML). E sad možete da ofarbate vrata.

 

Sada treba da npravimo drugi element dimenzija 300x100px, zelene boje. Taj element treba da bude unutar prvog elementa.

U CSS napravimo format za drugi element

.drugi-element {
	width:300px;
	height:200px;
	background-color:#0C3;
}

 Drugi element dodamo unutar prvog elementa.

<div class="prvi-element">
  <div class="drugi-element">Content for  class "drugi-element" Goes Here</div>
</div>

 Element počinje otvarajućim tagom <element> a završava se zatvarajućim tagom </element>

Sve između je sadržaj elementa, pa ako želimo da ubacimo element unutar elementa to radimo upravo između početnog i krajnjeg taga.

Tekst koji se nalazio unutar diva: Content for  class „prvi-element“ Goes Here treba da se obriše, jer sad ste upravo ubacili sadržaj (content). Ta rečenica treba da ostane samo ukoliko DIV nema sadržaj.

box1

 

 

Margine i Padding

Sada treba da udaljim zeleni kvadrat sa leve strane za 40px, od vrha za 70px, a tekst treba da pomerimo sa leve strane za 20px, od vrha za 50px. To radimo pomoću margina i paddinga.

.drugi-element {
	width:300px;
	height:200px;
	background-color:#0C3;
	padding-left:20px;
	padding-top:50px;
	margin-left:40px;
	margin-top:70px;
}

 box2

Margine udaljuju element, padding uvlači sadržaj.

Padding u stvari povećava element, odnosno nije se tekst uvukao u odnosu na ivicu, već se ivica udaljila u odnosu na tekst. Zeleni kvadrat sada ima veću dimenziju (bio je 300×200, a sada je 320x250px).

Stvarne dimenzije elementa su width+padding

Pa ako želimo da nam stvarne dimenzije ostanu 300×200, moramo da smanjimo width i height za onoliko za koliko smo dodali padding.

.drugi-element {
	width:280px;
	height:150px;
	background-color:#0C3;
	padding-left:20px;
	padding-top:50px;
	margin-left:40px;
	margin-top:70px;
}

 Sada je zeleni kvadrat dimenzija 300×200 i ima uvučen tekst. Margine ne utiču na promenu dimenzija.

Skraćenje CSS-a (shortcode)

CSS osobine u formatu  primarnaosobina-podosobina (npr background-color, background-image, margin-right, margin-top itd) mogu da se skrate korišćenjem samo primarne osobine, dok se vrednosti podosobina nabrajaju odvojene razmakom.

NPR: 

background: #FFF url(../images/header.jpg); – ovo menja dva reda u CSS-u

background-image: url(../images/header.jpg);
background-color:#FFF;

 primarnaosobina:vrednost1 vrednost2 vrednost3 ...;

Margine su podrazumevano 0px, pa ako želimo da skratimo CSS našeg primera koristićemo

	padding:50px 0 0 20px;
	margin:70px 0 0 40px;

 Vrednosti su TOP RIGHT BOTTOM LEFT, od vrha pa u smeru kazaljke na satu. One vrednosti koje nismo koristili stavljamo 0. Kada koristimo vrednost 0 (nula) u CSS-u ne moramo da pišemo piksele pored, znači ne mora 0px

Ukoliko se neke vrednosti podudaraju npr. margin:20px 7opx 20px 70px; možemo još skratiti CSS - margin:20px 7opx;

Prvi broj predstavlja gore-dole, a drugi levo-desno. Ukoliko se sve vrednosti poklapaju onda koristimo samo jedan broj margin:20px;

Centriranje elemenata

Elementi se centriraju pomoću margina. Pored vrednosti u pikselima margine mogu imati vrednost AUTO. Sama vrednost neke margine auto nije mnogo korisna, ali ukoliko stavimo da je leva margina AUTO, kao i da je desna margina AUTO, element će biti centriran, jer smo ovim odredili ista rastojanja sa leve i sa desne strane. Centriranje je moguće samo za elemente koji imaju širinu

Centriraćemo prvi element. Koristićemo skraćeni css. margin:0 auto;

Ivice -border

Crvenom kvdratu ćemo dodati ivicu. Osobina u CSS-u je border .Postoje 4 ivice, border-left, border-right, border-top, border-bottom. Mi ćemo uglavnom sve četiri ivice isto formatirati, pa ćemo koristiti samo osobinu BORDER.

Ivice imaju podosobine – boju, vrstu, debljinu … Koristeći samo osobinu border napisaćemo vrednosti svih željenih pod osobina. U CSS-u izaberemo border, pa color. Nakon izbora boje stisnemo SPACE i dobićemo izbor novih osobina.

border:boja debljina vrsta;

Za debljinu možete izabrati thin, medium itd, ali je preporuka da debljinu kucate u pikselima, kako bi lakše izračunali dimenzije. Od bitnijih vrsti postoje solid - puna linija, dashed - isprekidana i dotted -tačkasta.

	border:#00F 20px dashed;

 Ivice, kao i padding takođe povećavaju element, odnosno idu od elementa spolja.

Finalni izgled pogledajte ovde.

 Finalni kodovi su:

.prvi-element {
	width:500px;
	height:500px;
	background-color:#FF0000;
	margin:0 auto;
	border:#00F 20px dashed;
}
.drugi-element {
	width:280px;
	height:150px;
	background-color:#0C3;
	padding:50px 0 0 20px;
	margin:70px 0 0 40px;
}

 

<body>
<div class="prvi-element">
  <div class="drugi-element">Content for  class "drugi-element" Goes Here</div>
</div>
</body>

 

CSS Reset

Browser-i imaju svoje podrazumevane margine. Ako pogledate vaš sajt sa leve strane, kao i na vrhu, sajt nije uz ivicu browsera, već je malo udaljen. Kako bi ovo sprečili radimo CSS Reset. CSS reset je uopšteno ime za ukidanje svih podrazumevanih formata koje browseri nameću. U suštini ukidanje je postavljanje tih vrednosti na 0.

Naš ceo sajt je BODY tag i upravoj taj element ima neke podrazumevane margine, znači u CSS-u treba body-ju dodati marginu 0. BODY smo već formatirali dodavanjem pozadinske slike, sada ćemo samo dodati i marginu.

body {
	background-image:url(../images/stripe_bg.png);
	margin:0;
}

 Takođe ćemo i centrirati sajt. Dovoljno je centrirati element koji okružuje ceo sajt, a to je glavna tabela

#glavna-tabela {
	width:800px;
	background-image: url(../images/stripe_bg_tekst.png);
	margin:0 auto;
}

 Pogledajte Vaš sajt.

Comments (0) Trackback from your site.

Dragan Filipović

Predavač na Kursu Web Dizajna - Web edukator.

Ostavi komentar

Morate biti prijavljeni da biste dodali komentar.