Škola Web programiranja: CSS – 1.nastavak

naslov-jelena

U prethodnim brojevima smo učili o HTML-u i XHTML-u koji služe za izradu strukture sajta i kreiranje sadržaja. Definisanje izgleda stranica sajta smo ostavili za kasnije.

Ranije su web dizajneri ujedno kreirali i sadržaj i izgled koristeći tabele u HTML-u. Tabelama su određivali raspored sekcija na svakoj stranici sajta pojedinačno i stilove svih elemenata. Ovakav način kreiranja sajtova promijenio je CSS (Cascading Style Sheets). CSS definiše stilove (izgled) svih HTML/XHTML elemenata. Odvojeno se kreiraju sadržaj i dizajn stranice.

Možete da napravite poseban CSS fajl u kome ćete definisati kako neki HTML element treba da izgleda. Dovoljno je da na svakoj HTML/XHTML stranici pozovete CSS fajl (kasnije ćete vidjeti i kako se to radi), i definisani stil će se primjenjivati kad god se u nekoj od tih HTML/XHTML stranica pojavi taj element za koji je kreiran neki karakterističan dizajn (boja teksta, boja pozadine, pozicija, veličina i tip slova…). Ako biste htjeli da mijenjate izgled nekog elementa, dovoljno je na jednom mjestu, u CSS fajlu, urediti karakteristike tog elementa. Više ne morate na svakoj HTML/XHTML stranici, gdje se god pojavljuje taj element, unositi izmjene.

Na primjer, recimo da želite da promijenite širinu, visinu, i pozadinsku sliku zaglavlja koji se nalazi na svakoj stranici web sajta. Umjesto da uređujete svaku pojedinu stranicu, sve što treba da učinite je:

· otvorite svoj vanjski CSS fajl, pronađete „zaglavlje“ div (ili kako ste ga već nazvali)

· promjenite vrijednosti za svojstva „background-image“, „height“ i „width“.

Još jedna značajna prednost kod kreiranja sajta korišćenjem CSS-a u odnosu na staromodni način je i to da se sada korisnicima sajt brže učitava. Razlog za to je što se smanjuje veličina HTML/XHTML stranica. A HTML/XHTML stranice su manje, jer sad ne morate da ponavljate isti kod na više mjesta.

Prednost je i to što je korišćenjem CSS-a moguće kreirati složeniji dizajn, u odnosu na krute, nefleksibilne, bazirane na rešetkama dizajne. Pomoću z-index-a omogućava apsolutno pozicioniranje elemenata preko drugih elemenata, nalik slojevima u Photoshop-u, čime se omogućava jedinstven, kompleksan i lijep izgled. Osim ovoga, CSS jezik u sebi uključuje niz osobina koje se mogu dodijeliti HTML/XHTML elementima, a koje se ne mogu izraziti preko tabela.

Postoje tri načina za unos CSS stilova:

  • Eksterni
  • Interni
  • U liniji

Eksterni način je zapravo upisivanje stilova u jedan spoljni fajl sa ekstenzijom .css, i ti stilovi će se odnositi na svaku HTML/XHTML stranicu koja poziva ovaj .css fajl. Ako tada želimo promijeniti nešto u izgledu cijelog sajta, potrebno je promijeniti samo taj jedan .css fajl. Fajl je kreiran pomoću bilo kog tekst editora, a sačuvan je sa ekstenzijom .css. U našem slučaju, koristićemo notepad (a ko ima, još je bolje, neka koristi dreamweaver) i na kraju ćemo pri snimanju fajla umjesto .txt ekstenzije ukucati .css. Sada je još potrebno u HTML/XHTML stranici pozvati .css fajl koji smo kreirali. To se radi tako što u HTML fajl upišemo liniju <link rel=“stylesheet“ type=“text/css“ href=“mojstil.css“ /> u head dijelu. U atributu hrefvi ćete upisati putanju do vašeg .css fajla. Ovu liniju koda morate upisati u svaki HTML fajl na koji želite da se odnose pravila zadata u CSS fajlu.

Interni način treba koristiti kada neka pojedinačna stranica sajta ima jedinstven stil, znači razlikuje se od ostalih stranica. Interni stil se definiše u head dijelu unutar style taga. Kao u primjeru:

<head>
<style type="text/css">
   body{background-image:url("slike/bkg.png");background-repeat:repeat-x;}
   h1{color:red;}
   p{text-align:left;font-size:20px;}
</style>
</head>

Treći način za unos CSS stilova je u liniji (inline). Ovako definisan stil se veže i važi samo za jedan tag. Npr.: <p style=“color:#ff0000;“>Ovo je paragraf.</p>

Ovakav način pisanja CSS-a treba koristiti kada želite da se neki tag (u ovom primjeru <p>) razlikuje u dizajnu od ostalih istoimenih tagova. Znači, ako ste u eksternom CSS fajlu definisali da će svaki paragraf da ima plavu boju teksta, ovim biste izveli da se ovaj paragraf razlikuje od svih ostalih po tome što će boja teksta u ovom paragrafu biti crvena.

Za jedan tag se može definisati više različitih dizajn pravila. Tako možete u eksternom CSS fajlu zadati da je boja pozadine paragrafa plava, a onda u internoj CSS definiciji jednog HTML fajla postaviti da je boja pozadine paragrafa žuta, i na kraju inline (u liniji) načinom za jedan određeni paragraf definišete da je boja pozadine paragrafa zelena. Šta mislite da dobijate?

Evo rješenja:

Svi paragrafi, osim u tom HTML fajlu u kom ste unosili interno i inline CSS, će imati plavu boju pozadine. Svi paragrafi u tom HTML fajlu, osim paragrafa nad kojim je primijenjen inline način unosa CSS koda, će imati žutu boju pozadine.Paragraf nad kojim je primijenjen inline način unosa CSS koda će imati zelenu boju pozadine.

Posljednja (najbliža) izmjena se računa! To znači da će paragraf (ili bilo koji drugi tag) prvo da “pita” postoji li definicija CSS-a unutar taga. Ako ima, primijeni definisani stil. Ako nema, “pita” head tag postoji li interni CSS kod, ako ne postoji, ili ako je posle internog CSS koda u head-u pozvan eksterni CSS fajl, primijeniti će se interno definisan stil. Ako ne postoji ni interno definisan stil, traži se definicija stila za određeni tag u eksternom CSS fajlu.

Ako nigdje nije definisan stil za određeni tag, vaš browser (Chrome, Firefox, Opera, Internet Explorer…) će primijeniti podrazumijevani stil za taj tag. Svaki browser ima podrazumijevani stil za bilo koji tag. Tako će vaš browser, ako vi ne definišete kako neki tekst treba da izgleda, ispisati taj tekst crnom bojom. U većini browser-a će tekst, koji je link, biti ispisan plavom bojom i biće podvučen, ako vi kroz CSS ne definišete drugačije.

Demo

Prije nego krenemo sa sintaksom CSS-a, želimo vam u jednom primjeru pokazati kako radi CSS.

Učinite sljedeće:

1. Kreirajte folder sa imenom Probni sajt

2. Otvorite novi fajl u tekst editoru (notepad, dreamweaver…). Kopirajte sljedeći tekst i sačuvajte pod imenom index.html unutar tog foldera.

<!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" />
   <title>Probni sajt</title>
</head>
<body>
   <div class="prvi">
    <table class="tabela">
       <tr>
            <td>Polje 11</td>
            <td>Polje 12</td>
      </tr>
      <tr>
            <td>Polje 21</td>
           <td>Polje 22</td>
      </tr>
    </table>
   </div>
   <div class="drugi">
      <ul>
         <li>HTML</li>
         <li>XHTML</li>
         <li>CSS</li>
     </ul>
  </div>
  <div class="treci">
      <p>U početku, kreiranje WEB prezentacija bila je zabava, danas je to složen posao. Pomoću HTML-a opisujete predstavu informacija na WEB-u, spoljašnji izgled kontroliše CSS, dinamičnost omogućava JavaScript.</p>
  </div>
 </body>
</html>

3. Otvorite novi fajl. Kopirajte sljedeći tekst i sačuvajte pod imenom style.css unutar foldera

body {background-color:#9CA6D3; padding:50px; font-family:Verdana, Geneva, sans-serif;}
.tabela td{ background-color:#3973D2; text-align:center; border-style:dashed; border-color:#F9C}
.prvi{ float:left;padding:5px;}
.drugi{ float:left; background-color: #EFF9AE;margin-left:20px;}
.drugi ul{padding:5px;}
.drugi li{ display: inline-block; background-color:#FF0; border-color:#FF0; border-style:solid;}
.treci{ background-color:#FFF; border-color:#999; border-style:solid; float:left; padding:10px; margin:10px 0 10px 0;}

4. Od teksta ispod kreirajte dokument stil.css unutar foldera

body {background-color:#ccc; padding:50px 200px; font-family: "Comic Sans MS", cursive; text-align:center; color: #066}
.prvi{ text-align:center; width:100px; float:left;}
.tabela td { background-color: #ffffff; border-style:solid; border-color:#999; border-width:1px; height:100px;-moz-border-radius: 10px;}
.tabela td:hover{background-color: #999;}
.drugi{width:200px; float:left;}
.drugi ul{padding:5px; margin:0 0 0 20px; height:90px; background-color: #066; border-color:#999; border-style:solid; border-width:1px; -moz-border-radius: 10px; }
.drugi li{list-style:none; color:#FFF; font-size:16px; }
.treci{ background-color:#FFF;margin:0 0 0 20px;float:left;width: 700px;height:100px;border-color:#999; border-style:solid; border-width:1px;-moz-border-radius: 10px;}

5. Zatim upišite u head sekciju html dokumenta liniju

<link rel=“stylesheet“ type=“text/css“ href=“style.css“ /> , sačuvajte izmjenu, zatvorite fajl i startujte ga da vidite izgled u browser-u. Rezultat je :

clip_image004

6. Potom, umjesto putanje na fajl style.css, ukucajte stil.css i refresh-ujte stranicu u browser-u.

clip_image006

Vidite razliku?

CSS Sintaksa

slika

Svaki HTML element, id i klase (o kojima ćemo malo kasnije) opisujemo na način prikazan na slici. Sve osobine i njihove vrijednosti upisujemo između vitičastih zagrada. Iza imena osobine pišemo dvotačku i potom vrijednost te osobine. Osobine međusobno razdvajamo znakom „;“.

Komentare u CSS-u pišemo između znakova „/*“ i „*/“.

Id i klase

Osim opisivanja HTML elemenata CSS dozvoljava da pravimo i opisujemo ID i klasne selektore, kojima ćemo sami davati imena. A potom ćemo ih dodijeljivati elementima kojima želimo. Recimo da želimo da imamo na stranici više paragrafa različitih izgleda. Tada ne možemo samo opisati izgled taga „p“, jer bi onda svi paragrafi bili istog izgleda, već ćemo koristiti više klasa da bismo opisali te paragrafe.

Npr.

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" />
   <title>Probni sajt</title>
   <link rel="stylesheet" type="text/css" href="mojstil.css" />
 </head>
 <body>
   <p class="crveni">Paragraf klase "crveni"</p>
   <p class="zeleni">Paragraf klase "zeleni"</p>
   <p class="plavi">Paragraf klase "plavi"</p>
 </body>
</html>

CSS:

.crveni{color:#dd0000;font-size:20px;border-style:solid;border-width:1px;border-color:#cccccc;-moz-border-radius: 10px; padding:5px;width:300px; }
.zeleni{color:#00dd00;font-size:30px;}
.plavi{color:#0000b6;font-size:25px;background-color:#dddddd;width:300px;}

Rezultat:

clip_image010

ID selektore koristimo za opisivanje jedinstvenih elemenata, koji se samo jednom javljaju na stranici. Ispred imena selektora u CSS-u pisemo znak „#“.

Primjer:

#okvir {border-color:#cccccc; border-style:solid; border-width:2px;}

A u HTML ćemo nekoj slici dodijeliti ovaj id, na način:

<img src="priroda.jpg" id="okvir" />

Klase se koriste za opisivanje grupe elemenata. Ispred imena klase u CSS-u piše se tačka. A u HTML tag-u gdje pozivamo klasu upisujemo class=“ime_klase“.

Primjer:

.pocrveni {color:#ff0000;}

U HTML dokumentu klasu možemo pozvati na način

<h3 class="pocrveni">Heading</h3>

HTML <div> tag

Napravit ćemo malu digresiju, i sa CSS-a se vratiti na priču o HTML elementima. Nešto što obavezno morate znati, ako hoćete da kreirate web sajt, je korišćenje HTML <div> tagova. <div> tag je sekcija (“oblast”) unutar koje možete pisati neki sadržaj. Unutar <div> taga možete pisati takođe drugi <div> tag, ili neki drugi HTML tag. Korišćenjem <div> tagova možete lakše organizovati prikazivanje sadržaja vaše stranice. <div> tagovima možete dodijeliti id ili klasu i tako im zadati stil. Kroz sljedeći primjer ćete vidjeti i kako:

<div id=”sadrzaj>
   <div id=”lijeva_kolona>
       <div id=”dio_lijeve_kolone>
       </div>
    </div>
    <div id=”desna_kolona>
    </div>
</div>

Na ovom primjeru je prikazan mogući raspored sekcija na nekoj HTML stranici. Kad budemo govorili o definisanju pozicija HTML elemenata kroz CSS, biće vam jasnija ovakva struktura <div> elemenata.

Pozadina

Pomoću CSS-a možemo opisati pozadinu bilo kog elementa. Tačnije, možemo definisati: boju, sliku, ponavljanje i poziciju slike.

background-color

Pozadinsku boju postavljamo pomoću atributa background-color i boje zadate u obliku #xxxxxx ukoliko je heksadecimalnog zapisa ili rgb(xxx,xxx,xxx) ili imenom boje ukoliko se radi o nekoj od standardnih boja (popisane su u jednom od članaka o Small Basic-u).

Najčešće ćemo koristiti heksadecimalni zapis.

Na primjer: Pozadinu body-a možemo postaviti da bude crvene boje. I to na tri načina, zavisno od načina predstavljanja crvene boje.

body {background-color:#ff0000;}
body {background-color:rgb(255,0,0);}
body {background-color:red;}

Boju pozadine možemo odrediti i za druge elemente, kao što su h1, h2, p, ul, li, a, …

background-image

U pozadini možemo postaviti i sliku.

body {background-image:url('bkg.png');}

background-repeat

Sliku pozadine možemo eventualno ponavljati. I to po x-osi, y-osi, i x i y osi, ili da se slika prikaže samo jednom bez ponavljanja.

Primjer:

Snimite sljedeću sliku na vašem računaru u folder Probni sajt pod imenom leptir.png.

 leptir Da preuzmete sliku možete kliknuti OVDJE.

Potom izmjenite stil.css, tako što ćete u body elementu dodati i atribut

background-image:url(leptir.png);

U html fajlu index.html, neka link ka css fajlu vodi na stil.css.

Rezultat će biti sljedeći:

clip_image014

U body dodajmo i atribut background-repeat:repeat-x; , da bi nam se leptir ponavljao samo po x-osi.

clip_image016

Izmjenimo vrijednost atributa sa repeat-y.

clip_image018

I na kraju stavimo vrijednost no-repeat.

clip_image020

background-position

Poziciju slike pozadine možemo promjeniti. U našem slučaju leptira ćemo premjestiti gore desno, upisivanjem u body atributa background-position: top right;.

clip_image022

Poziciju slike možete podesiti kombinujući vrijednosti center (centralno), left (lijevo), right (desno), top (gore) i bottom (dolje).

Kraj prvog dijela

U ovom dijelu ste mogli naučiti šta je CSS, šta CSS znači za izradu web sajtova, kako se koristi i vidjeli ste par primjera korišćenja CSS-a. U sljedećem nastavku ćete, kroz puno praktičnih primjera, naučiti kako se definišu još neke od vizuelnih osobina HTML elemenata, kao npr. podešavanje boje, stila i veličine teksta, pozicioniranje objekata na HTML stranici i td.

Ovaj unos je objavljen pod Osmi broj. Zabeležite stalnu vezu.

5 reagovanja na Škola Web programiranja: CSS – 1.nastavak

  1. Povratni ping: Osmi broj | Prozor

  2. Povratni ping: Novi broj PROZORA | Rankov blog

  3. Svaka cast🙂
    Bas radim sajt ( http://kikinda-gaming.info ) i mucim se sa CSS.
    Znam ovako ali ne bas mnogo xD
    Samo me zanimalo

    Sad mi sve jesnije.
    Lep tutorial😀

  4. Nenad kaže:

    Odlican tutuorijal,da li ima verzija za stampu mislim u pdf formatu?

  5. Nemanja kaže:

    Meni nije jasno kako da unesem podatke u css

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