Škola Web programiranja: CSS – 2.nastavak

image

U prošlom broju dobili ste sliku o tome šta je to CSS, koje su prednosti njegove upotrebe u web programiranju i započeli ste sa radom, tj. korišćenjem nekih osnovnih atributa. U ovom broju nastavljamo dalje sa osobinama koje možete dodijeliti HTML elementima.

Prvo je potrebno da napravilte jedan HTML fajl na kome ćemo se poigrati sa CSS osobinama. Smjestite ga u folder „recepti“ gdje ćemo kasnije kreirati i css fajl. U isti folder smjestite i neku sliku srednje veličine mušula (sa interneta) i nazovite je musule.jpg. Sljedeći HTML dokument je sastavljen iz već dosad poznatih elemenata.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <link rel="stylesheet" type="text/css" href="stil.css" />
   <title>Mušule na buzaru</title>
</head>
<body>
   <h1>Mušule na buzaru</h1>
   <div class="podnaslov"><p>Što reći o poznatom specijalitetu – mušule na buzaru? Ljubitelji školjki priznaju da nema riječi koje bi opisale divotu mesa mušula u sosu za prste polizati! A tako je jednostavan!</p></div> 
   <img src="musule.jpg" alt="musule"/>
   <div class="bitno">
        <p>Vrijeme pripreme: 25 min</p>
        <p>Težina: Jednostavno</p>
   </div>    
   <div class="priprema">
     <h2>Priprema</h2> 
       <div class="lijevo">
        <ol>
           <li>Mušule očistite i operite.</li>
           <li>Na zagrijano maslinovo ulje dodajte protisnuti bijelu luk, prezlu, peršun, vino, Vegetu i 
biber.</li>
           <li>Dodajte mušule i kuvajte poklopljeno dok se mušule ne otvore.</li>
        </ol>
      </div>
      <div class="desno">
         <h3>Sastojci</h3>
          Broj osoba: 4 osobe <br />
          <ul>          
            <li>1,5 kg mušula </li> 
            <li>150 ml maslinovog ulja</li> 
            <li>4 čena bijelog luka</li>
            <li>2 kašike prezle</li> 
            <li>4 kašike nasjeckanog peršuna</li> 
            <li>200 ml bijelog vina</li> 
            <li>1 kašičica Vegete</li>
            <li>biber</li>
      </div> 
       <h2>Posluživanje</h2>
        <p>Poslužite s bijelim hljebom.</p>
        <h2>Savjet</h2>
        <p>Prilikom kupovine mušula obratite pažnju da li su svježe, odnosno, čvrsto zatvorene. Školjke koje su otvorene u sirovom stanju sigurno nisu svježe i nisu preporučljive za jelo.</p>   
  </div>
 </body>
</html>

Sačuvajte ga , recimo, pod imenom recept.html. Ne zaboravite da, pri snimanju notepad fajla, postavite da je Encoding UTF-8, kako bi se prikazala naša slova.

Preuzmite ovu sliku clip_image002 , snimite pod imenom bkg.png u folder recepti. To će nam biti potrebno za pozadinu.

Za početak kreirajte CSS fajl koji sadrži samo jednu liniju:

html {background-color:#ffffff; background-image:url('bkg.png'); background-position:top; background-repeat:repeat-x;} 

i nazovite ga stil.css.

Startujte recept.html i rezultat za sad izgleda ovako:

clip_image004

FORMATIRANJE TEKSTA

CSS nam omogućava da veoma jednostavno postavimo boju teksta, odredimo poravnanje, ukrasimo slova, odradimo određene transformacije, postavimo koliko će biti uvučen prvi red pasusa, podesimo razmak između slova, riječi ili između redova u pasusu…

Sada ćemo proći kroz najbitnije atribute za formatiranje teksta. CSS se stalno proširuje i nama je ovdje cilj da usvojimo osnovne stvari koje nam omogućavaju rad, i da uz naučeno kasnije lako nalazimo novije i naprednije osobine koje će nam ga svojim bogatstvom dodatno olakšati.

BOJA TEKSTA

Boja teksta se jednostavno podešava, nalik na boju pozadine, s tim da je sad atribut color.

Npr. Crvena slova će se pojaviti ukoliko postavimo color:#ff0000 ili color:red ili color:rgb(255,0,0).

HORIZONTALNO PORAVNANJE TEKSTA

Osobina text-align nam služi za to. Kao i u Word-u, i ovdje tekst može biti centriran, poravnat s lijeva, s desna i podjednako poravnat s obje strane. S toga redom bi to bile vrijednosti: center, left, right, justify.

UKRAŠAVANJE TEKSTA

Ova osobina nam omogućava da postavimo ili uklonimo neku dekoraciju.

Ključna riječ je text-decoration. Moguće vrijednosti su none (uklanja pretpostavljenu, ili u nadređenom elementu ili u klasi postavljenu dekoraciju, najčešće se koristi kod linkova za koje ne želimo da budu difoltno podvučeni), underline (podvučeno), overline (nadvučeno), line-through (prekriženo), blink (blinkanje teksta, nije podržano u nekim browser-ima), inherit (preuzima vrijednost ove osobine od nadređenog elementa).

TRANSFORMACIJA TEKSTA

Ova osobina mijenja tekst nalik opciji Change Case u Word-u.

Npr.

text-transform:none (poništava prethodne transformacije)

text-transform:capitalize (sva prva slova riječi postaju velika)

text-transform:uppercase (sva slova teksta postaju velika)

text-transform:lowercase (sva slova teksta postaju mala)

text-transform:inherit (nasljeđuje osobinu iz nadređenog elementa)

UVLAČENJE PRVOG REDA PASUSA

Jednostavno preciziramo koliko da red bude uvučen na način npr. text-indent:30px

RAZMACI IZMEĐU SLOVA, RIJEČI I REDOVA

Atribut letter-spacing postavljamo na neku vrijednost u pikselima kada želimo približiti ili udaljiti međusobno slova. Za približavanje mogu se koristiti i negativne vrijednosti.

Na isti način baratamo i sa udaljenošću između riječi, samo je ključna riječ word-spacing.

Kod podešavanja razmaka između redova, osim tačno precizirane dužine, možemo postaviti da visina jednog reda (line-height) bude prikazana u procentima (procenti u odnosu na veličinu fonta) ili u brojevima (visina će biti proizvod tog broja i veličine fonta).

FONTOVI

CSS PORODICE FONTOVA

U CSS-u razlikujemo dvije vrste familija: generičke i font.

Možda ste se nekad upitali zašto u nazivu nekih fontova stoji riječ Serif, a ispred nekih Sans-serif. Serif označava da je font sa „zarezima“ na krajevima, na neki način slova su ukrašena, poput fonta Times New Roman, a Sans-Serif (Sans na francuskom znači „bez“) predstavljaju grupe fontova bez ukrasa, kao što je recimo font Verdana. Serif i Sans-serif predstavljaju generičke familije, a uz njih postoji još jedna generička porodica, a to je Monospace, koja predstavlja grupe fontova čija su slova jednakih širina (Courier).

clip_image005

Pod font familijama podrazumjevamo specifične font familije (Times New Roman, Verdana, Courier, … ).

FONT FAMILIJE

Da bi odredili kojeg fonta želimo da nam bude tekst koristimo atribut font-family. Nabrojimo najčešće tri font familije, zbog mogućnosti da browser ne podrži prvu željenu. Ukoliko ne prepoznaje ni drugu, prikazaće slova u trećem fontu.

Npr.: font-family: Arial, Helvetica, sans-serif
STIL FONTA 

Nalik Word-u, ovdje postoje stilovi font-style normal, italic i oblique. Oblique rijetko koji browser podržava, pa ga onda najčešće prikazuje kao italic, iako je oblique ukošeniji.

VELIČINA FONTA 

Veličinu fonta (font-size) možemo podesiti u pikselima, em (1 em=16px) i u procentima u odnosu na difoltnu veličinu fonta u browseru. Preporuka je korišćenje procenata i em jedinica, jer ih podržavaju svi browser-i. 1em=100%=16px

DEBLJINA FONTA 

Debljinu fonta opisujemo uz pomoć ključne riječi font-weight, a vrijednosti mogu biti: normal (difoltna debljina), bold (podebljano), bolder (jače podebljano), lighter (tanji font), 100-900 (vrijednost 400 je normal, a 700 bold) i inherit (nasljeđuje debljinu iz nadređenog elementa).

Sada da probamo primjeniti na našem primjeru nešto od pređenog. Izmjenite stil.css:

html {background-color:#ffffff; background-image:url('bkg.png'); background-position:top; background-repeat:repeat-x;font-family:Verdana,Helvetica, Arial; text-align:center;}
h1{color:rgb(51,51,51); font-size:2.5em;text-align:center; letter-spacing:-2px;}
.podnaslov{color:rgb(102,102,102);font-style:italic; font-size:0.7em;}
.bitno{color:rgb(80,80,80);letter-spacing:-1px;font-size:0.9em;line-height:40%;}
.priprema{font-size:0.8em;color:rgb(80,80,80);}
.priprema h2{font-size:1.3em;color:rgb(34,34,34);}
.priprema h3{font-size:1em;color:rgb(255,34,34);}
.desno{text-align:left;}
.lijevo{text-align:left;}
 

Startujte recept.html.

Naša stranica sad izgleda ovako:

image

BOX MODEL

Zamislimo da je svaki HTML element ograničen nevidljivim pravougaonikom. Pokazaćemo kako da taj HTML element postavimo na željeno rastojanje od HTML elementa u kome je ugniježden ili sa kojim se graniči, zatim kako da na tom elementu postavimo okvir i kako da sadržaj tog elementa udaljimo/približimo ivicama zamišljenog pravougaonika.

Sljedeća slika će vam sve to bliže ilustrovati.

image

Na slici vidimo da je margina prostor od ivice elementa do okolnih elemenata, ivica (okvir) elementa okružuje sami element, padding predstavlja prostor između ivice i sadržaja (teksta i slika) tog elementa, a širina i visina elementa se dobijaju kada saberemo sve to zajedno.

Npr. ako imamo neku sekciju „desno“ sa osobinama:

.desno{margin:20px; border-width:5px; padding:10px; width: 200px; height:150px; …}

To znači da je prava visina elementa = 40px (gornja i donja margina od 20px)+10px (gornja i donja ivica od 5px)+20px (gornji i donji padding od 10px)+150px (visina sadržaja je 150px)=220px, a širina elementa=40px (lijeva i desna margina od 20px)+10px (lijeva i desna ivica od 5px)+20px (lijevi i desni padding od 10px)+200px (širina sadržaja od 200px)=270px.

Ovo je jako važno da se ima u vidu kada osmišljavamo dimenzije pojedinih sekcija na našem sajtu.

Kao što smo već vidjeli atributi width i height označavaju širinu i visinu sadržaja elementa.

MARGINE

Margine su, dakle, prazan prostor koji okružuje ivice, nema pozadinske boje, tj. potpuno je proziran.

· Ukoliko su sve margine (gornja, donja, lijeva i desna) jednake, dovoljno će biti da napišemo npr.

margin:10px

· Ukoliko su jednake gornja i donja (npr.  po 10px ) i jednake su lijeva i desna (npr. po 15px), pisaćemo

margin:10px 15px

Znači, kada iza margine stoje dvije dimenzije, prva označava gornji i donju, a druga lijevu i desnu.

· Ukoliko su sve margine različite, pišemo 4 dimenzije i to redosljedom gore, desno, dolje, lijevo.

margin:10px 5px 15px 20px

· Rijeđe se koriste i 3 dimenzije, gdje bi prva označavala gornju marginu, druga lijevu i desnu marginu, a treća donju marginu.

· A možemo i svaku marginu posebno ispisati, kao na primjer:

margin-right:5px;margin-top:10px;margin-left:20px;margin-bottom:15px

Marginu možemo podesiti i na vrijednost auto i tada se browser brine kako da je podesi. Ovo obično radimo kada želimo da centriramo neki element unutar drugog. Tada nadređeni element mora imati atribut text-align:center, a naš element koji želimo centrirati mora imati zadatu širinu sadržaja (width).

OKVIR

Moguće je da podesite stil, boju i debljinu okvira.

· Stil – border-style može uzimati sljedeće vrijednosti: none (bez okvira), solid (linija), double (dvije linije), dashed (isprekidane linijice), dotted (tačkice) i 3d efekti groove, ridge, inset i outset. Npr. border-style:dotted;

· Boja – border-color se definiše kao i do sad preko rgb zapisa, heksadecimalnog zapisa ili naziva boje. Može biti i providan okvir, pa ćemo tada imati slučaj bordercolor:transparent

Ako element sadrži samo atribut border-color, tada se ta boja neće prikazati, jer je neophodno da prethodno bude definisan stil okvira.

· Debljina – border-width se izražava u pikselima ili korišćenjem već definisanih debljina thin (tanko), medium (srednje) i thick (debelo). Isto kao i kod definisanja boje, i prije definisanja debljine neophodno je definisati stil okvira. Npr. border-width:5px;

Okvir se može zadati i koristeći ključnu riječ border i nakon nje nabrojati tačnim redosljedom debljinu, stil i boju.

Npr. border: thick dashed #ff55aa;

Okvire možemo definisati i pojedinačno gornji, desni, donji i lijevi (border-top, border-right, border-bottom, border-left, border-top-style, border-top-color, border-top-width, … )

Okviri mogu biti i obli! Bitno je samo da im odredimo radijus u pikselima. Recimo ako izaberemo radius 20px, to će ustvari biti dio kružnice poluprečnika 20px. Ako su svi ćoškovi jednako obli, koristimo border-radius:15px, a možemo i svaki ćošak posebno odrediti sa border-top-left-radius:5px; border-bottom-left-radius:10px; border-top-right-radius:15px; border-bottom-right-radius:15px;

Npr.

.proba 
{
padding:5px;
border-style:solid;
border-width:5px;
border-color:#55aaff;
border-top-left-radius:20px;
border-bottom-right-radius:20px;
}

Za Mozilla Firefox koriste se izmjenjeni atributi:

-moz-border-radius-topleft:20px;
-moz-border-radius-bottomright:20px;

A za Safari:

-webkit-border-top-left-radius:20px;
-webkit-border-top-left-radius:20px;

image

Stariji browser-i ne podržavaju ovu osobinu.

PADDING

Kao što smo vidjeli sa slike padding označava prazan prostor između ivice elementa i sadržaja. Boja/pozadina ovog prostora je ustvari definisana bojom/pozadinom samog elementa.

Gornji, desni, donji i lijevi padding se opisuje identično na načine kao što se to radi i sa marginama.

FLOATING

Često želimo da imamo više elemenata u jednom nivou, gdje će se oni redati sa lijeve strane (ili sa desne) jedni za drugim. Ukoliko neki element obrišemo, na njegovo mjesto će se pomjeriti prvi sljedeći.

Koristićemo osobinu float. Ona može imati vrijednosti: left, right, none i inherit.

Recimo i u slučaju kada bismo željeli da redamo male sličice tako da ih stane u jedan red koliko god može, a onda pređu u drugi red i opet popunjavaju drugi red … svima ćemo u opisu dodijeliti float:left i one će se same pozicionirati. Mi nećemo brinuti o tome.

Na taj način se prikazuju i slikice u pretraživaču.

clip_image002[4]

U našem primjeru želimo da sekciju sa potrebnim sastojcima (div desno) pomjerimo da stoji pored sekcije sa konkretnom pripremom (div lijevo).

Uradićemo još neke izmjene da iskoristimo do sad naučeno. Mijenjamo opet samo CSS fajl i sad on izgleda ovako:

html {background-color:#ffffff; background-image:url('bkg.png'); background-position:top; background-repeat:repeat-x;font-family:Verdana,Helvetica, Arial; text-align:center;}
body {width:800px; margin:auto;}
h1{color:rgb(51,51,51); font-size:2.5em;text-align:center; letter-spacing:-2px;}
.podnaslov{color:rgb(102,102,102);font-style:italic; font-size:0.8em;}
.bitno{color:rgb(80,80,80);letter-spacing:-1px;font-size:0.9em;line-height:40%;}
.priprema{font-size:0.9em;color:rgb(80,80,80);}
.priprema h2{font-size:1.3em;color:rgb(34,34,34);}
.priprema h3{font-size:1em;color:rgb(255,34,34);}
.desno{text-align:left; float:left; width:250px;border:5px solid #cccccc;border-radius:20px;padding:10px 0px 10px 20px; margin:20px 20px 40px 20px;}
.lijevo{text-align:left;float:left; width:400px;margin:50px 20px; font-size:1.3em; font-weight:700;}

 

I krajnji rezultat je:

image

Toliko u ovom broju. Priča o CSS-u se nastavlja…


Ovaj unos je objavljen pod Deveti broj i označen sa , , . Zabeležite stalnu vezu.

2 reagovanja na Škola Web programiranja: CSS – 2.nastavak

  1. Povratni ping: Prozor | Prozor

Ostavite odgovor

Popunite detalje ispod ili pritisnite na ikonicu da biste se prijavili:

WordPress.com logo

Komentarišet koristeći svoj WordPress.com nalog. Odjavite se / Promeni )

Slika na Tviteru

Komentarišet koristeći svoj Twitter nalog. Odjavite se / Promeni )

Fejsbukova fotografija

Komentarišet koristeći svoj Facebook nalog. Odjavite se / Promeni )

Google+ photo

Komentarišet koristeći svoj Google+ nalog. Odjavite se / Promeni )

Povezivanje sa %s