Dnevnik eklektika - Piše Dragan Babić

Uvod u CSS; Block i inline elementi

Takođe jedan od razloga za pisanje ovih članaka je nepostojanje istih na ovu temu na srpskom jeziku. Ne barataju baš svi ljudi engleskim na tom nivou da mogu da čituckaju članke po internetu i tako uče. U svakom slučaju jedino čemu se nadam je da će ovi tekstovi pomoći nekom ko pravi prve korake u svetu web dizajna i učenja HTMLa i CSSa.

CSS—HTML—XHTML—WTF!?

Da, da, šta je ovo u naslovu…sve neki akronimi, skraćenice, čuda—neka vas to ne zabrinjava. Sve ćemo da objasnimo.

CSS je skraćenica za Cascading Style Sheets i oni predstavljaju prezentacioni sloj web lokacije. Što će reći da kada onemogućite korišćenje CSSa u svom browseru trebalo bi da vidite go HTML. Bez dekoracionih slika i ostalih peripetija, samo čist markup (dobro struktuiran po mogućnosti, ali o tome više drugi put).

Kao što ste možda već primetili browseri (internet pregledači) imaju već svoje neke defaulte po kojima prikazuju HTML elemente. Na primer p elementi (paragrafi—pasusi) imaju gornju i donju marginu, ali ne i levu i desnu, strong (iliti bold) automatski podebljavaju tekst, itd.

Ova pravila variraju od browsera do browsera; morate se navići na to i na njihove varijacije (nema ih puno). Vremenom ćete se upoznati sa ponašanjima raznih browsera pa ćete i znati šta možete da očekujete od kog.

Način prikaza HTML elemenata: Block i inline

U HTMLu na prezentacionom nivou postoje _block_ i inline elementi. Najlakši način da se objasni šta je block a šta inline je po meni sledeći.

• Block level element je onaj koji zauzima „ceo red na ekranu”, iliti koji sam po sebi ne može stajati horizontalno pored nekog drugog. Uvek će zauzeti 100% širine elementa u kom je sadržan.

  Primeri block level elemenata su: p, div, table, blockquote, hr, pre, form, itd.

• Inline elementi su elementi koji „prate flow„ teksta ili drugih elemenata na stranici. Dakle ako na primer imamo običan pasus teksta i u njemu imamo element strong on neće remetiti raspored reči u tom pasusu. Tekst će izgledati normalno (kao što i vidite u ovom članku) sa zadebljanim rečima koje su sadržane u elementu strong.

  Primeri inline elemenata su: a, em, strong, code, img, cite, input, select, itd.

Sada kada znamo kakvu osobinu ima koji element po defaultu veoma lako možemo i da predpostavimo kako će on izgledati na ekranu, ali i modifikujemo njegovu prezentaciju našim potrebama.

Ove (block i inline) osobine nisu ništa drugo do CSS osobine. Samo što one nisu nigde naznačene (jer su default), stoga da bi ih promenili moramo eksplicitno naznačiti browseru kako da prikaže te elemente. To postižemo uz pomoć jedne jednostavne linije CSS koda. (Smatram da znate kako se style sheet povezuje sa HTMLom.)

Uzmimo za primer img element koji je po prirodi rekosmo inline. Da bi ga prikazali kao block level element dajemo mu sledeću CSS osobinu (iliti CSS property kako će te ga naći u člancima na engleskom):

img{
  display:block;
}

Sada je naša slika block level element. Zašto smo ovo radili pitate se? Recimo da smo hteli da u tekst stavimo sliku oko koje će se obmotavati tekst (tehnika veoma rabljena u štampi ali takođe upotrebom CSSa dostupna i na webu; engl.—wrapping). To veoma lako postižemo CSSom uz pomoć dodavanja još jedne linije koda u gornji:

img{
  display:block;
  float:left; /* ovde može da ide i right i none kao vrednost */
}

Kao što vidimo sada nam je slika „sklonjena” u levu stranu dok se tekst lepo obmotava oko nje. Pošto prizor i nije baš nešto ekstra izdizajniran hajde da dodamo još koju osobinu da sve to izgleda malo lepše.

img{
  display:block;
  float:left;
  margin:0 10px 10px 0; /* vrednosti za gornju, donju, desnu pa levu marginu respektivno */
  padding:2px;
  border:1px solid #ccc; /* sivi border */
}

Odlično, spremno za objavu, zar ne? ;)

Na kraju isti princip primenjujemo i za block level elemente koje želimo da prikažemo kao inline (što je mnogo ređi slučaj), jedina razlika je u tome žto umesto display:block koristimo display:inline. To je cela „matematika” u ovoj priči.

Namerno nisam previše diskutovao same CSS osobine u ovom članku jer ne želim da vam uskratim zadovoljstvo spoznavanja istih. Uostalom najviše se zabavljate kada saznate nešto sami.

Dalje eksperimentišite i naučite CSS sintaksu i vrednosti koje može da poprimi dati element i osobina, a ovde se možete uvek podsetiti nekih bazičnih i generalnih stvari.

Za početak je veoma bitno da shvatite kako se ponašaju elementi i tako ćete najlakše ovladati veštinom manipulisanja njihove prezentacije na ekranu, koja je u stvari CSS.

CSS kao prezentacioni sloj web stranice je veoma moćan alat. Ne samo zato što odvaja prezentaciju od informacije i sadržaja, već čini mnogo stvari jednostavno korektnijim i lakšim, a pre svega pruža dostupnost vaših informacija svakom uređaju koji ume da parsira običan HTML. Kada svoj sajt budete gradili po propisima W3Ca budite sigurni da će on biti dostupan i slepima, i osobama sa poteškoćama i oslabljenih motornih sposonosti, i internet pretraživačima (oni u stvari stranice posmatraju kao slepa osoba koja ne koristi miša) i mobilnim uređajima, itd.

Dakle dosta se dobija, ali na žalost nije sve tako bajno. Cela stvar oko web standarda je još uvek jako sveža i u povoju. Stariji browseri imaju slabu podršku CSSa, a neki (IE) pak veoma čudnu interpretaciju istog. Stoga je veoma bitno da svoje stranice testirate u browseru koji podržava standarde a kasnije ih prilagođavate ostalim—starijim, lošim i neposlušnim. (IE5.x, IE i starije verzije Opere.)

Članak u najavi: „HTML, XHTML, elementi, tagovi i atributi

• « Slobodno vreme i freelancing
• Jovanin wallpaper »

Komentari na ovaj unos 2

1. Miloš kaže 07/12/05 11:06 AM

   Lep tutorial
   
   samo jedna ispravka, link “Odlično, spremno za objavu, zar ne?” nije dobar treba da pise floatedimg02.html umesto 01

   Čekam nastavak…

2. Dragan Babić kaže 07/12/05 11:26 AM

   

   Hvala na napomeni, ispravljeno. ;)

Komentari su zatvoreni za ovaj unos.