Drugi čas – CSS

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

Vrste CSS-a

CSS ili Cascading Style Sheets je kolekcija stilova koji kontrolišu izgled i Layout HTML dokumenta. Postoje tri vrste CSS-a:

Spoljašnji CSS - External- Čuva se kao eksterni fajl sa ekstenzijom css. Omogućava promenu stilova na više stranica istovremeno.

Intreni CSS - Internal – Još se naziva i ugrađen (engl. Embeded) jer se nalazi u kodu jedne stranice i vezuje se samo za tu stranicu kojoj pripada.

Linijski CSS -  Inline, Ova vrsta CSS-a se piše u okviru Tag-a samog elementa.

 

Linijski CSS

 Kada ste napravili tabelu u njenom početnom tagu table pojavio se kod width=800 -to je linijski CSS.

HTML je element tabela prikazan tagovima <table> ... </table>

CSS je dizajn tabele, odnosno HTML elementa, u ovom slučaju širina 800px.

Linijski CSS se nalazi u otvarajućem tagu <table width="800">

DW automatski nudi osobine linijskog CSS-a kada stisnemo SPACE unutar otvarajućeg taga, nakon imena taga ili postojeće osobine. Stanite mišem nakon prve osobine tabele width="800" i kliknite SPACE, DW će u padajućoj listi ponuditi opcije za izbor. Izaberite bg-color (pozadinska boja – osobina), nakon toga izaberite boju (vrednost osobine)

Dobićete <table width="800" bg-color="#00AAFF" >

LInijski CSS treba da se izbegava. Spoljašnji CSS je najbolji način dizajniranja sajta.

Spoljašnji CSS

Spoljašnji CSS je spoljašnji (novi ) fajl u kome se nalaze formati – stilovi HTML elemenata. Novi CSS fajlovi treba da se čuvaju u folderu CSS. 

U vašem Root folderu napravite folder css. Napravite novi CSS fajl File --- New --- CSS

Fajl snimite u folderu CSS, ime fajla je proizvoljno, uobičajeno je stil.css, style.css, format.css

Da bi mogli da koristimo spoljašnji css neophodno je da ga povežemo sa HTML stranom. 

Povezivanje CSS-a radimo na nekoliko načina:

 Preko ikone Attach Style Sheet u CSS panelu, ili Desni klik bilo gde u kodu — CSS Styles — Attach Style Sheet. Otvoriće se prozor gde preko BROWSE dugmeta pronađemo CSS fajl. Ostale parametre ne menjamo.

attach_css

 

Kada dodate novi stil strani u HEAD tagu se ubacuje sledeći kod

<link href="css/prvi_stil.css" rel="stylesheet" type="text/css" />

 HTML fajl i CSS fajl su na ovaj način povezani i sada možete početi sa dizajniranjem vaše strane. 

1.Napravimo HTML element – npr. tabelu u HTML strani (index.html)

2. Napravimo CSS format u spoljašnjem CSS fajlu (prvi-stil.css)

3. HTML elementu dodamo napravljeni format

CSS Rule – sintaksa

Svaki CSS fajl se sastoji od seta pravila. Svako CSS pravilo se sastoji od selektora i deklaracijskog bloka.

p{ color: blue; }

 ili radi boljeg pregleda (kada fromatiranje bude kompleksnije) pišite:

p {
color: blue;
}

Ovaj kod predstavlja paragraf ( tag p ) plave boje.

Prvi deo ( slovo p) je selektor, a drugi deo color: blue;   je deklaracijski blok – stil, format selektora. Deklaracijski blok se uvek nalazi između vitičastih zagrada.  Stil se sastoji iz osobine (propertie) i vrednosti. Nakon svake linije stavlja se tačka-zarez ; Nove osobine dodajemo u novom redu:

selektor {
osobina1: vrednost1;
osobina2: vrednost2;
osobina3: vrednost3;
}

 

Selektor u osnovi selektuje element na stranici, u ovom slučaju paragraf p, i modifikuje ga prema kodu koji se nalazi u deklaracijskom bloku.

Kad otvorimi prvu vitičastu zagradu DW nam nudi sve CSS osobine, a nakon izbora osobine dobijam spisak vrednosti. Učenje CSS-a kroz DW je olakšano, obzirom da se osobine nude automatski, a predstavljene su engleskim rečima sa jasnim značenjem. Izbor osobin se nudi i kada nakon tačke-zareza stisnemo ENTER za prelazak u novi red. Spisak vrednosti se nudi kada nakon dvotačke iza imena osobine stisnemo SPACE.

Selektori

Glavni tipovi selektora su:

Type – element – Ovaj selektor koristi ime HTML Tag-a koji želite da stilizujete. Na primer, ako koristite p oznaku za selektor i primenite određeno CSS pravilo, to pravilo će biti primenjeno na sve p Tag-ove.

Class – Klasa može biti primenjena na više različitih elemenata na stranici. Koristi se za sekundarne elemente na strani. Ime selektora uvek počinje sa tačkom, na primer: .pasus.

ID – Koristi se za glavne elemente na strani i može se koristiti samo jednom.  Ime ID selektora uvek počinje simbolom (#), na primer: #pasus. Ime se piše malim slovima, bez razmaka između dve reči (koristite srednju crtu za odvajanje reči)

#ime {
atribut:vrednost;
}

 

Komentari služe kao objašnjenja za kodove koje koristimo.

/* komentari u CSS-u */

 

Primer

Tabelu koju smo napravili u HTML strani treba da formatiramo kroz Spoljašnji CSS. Tabela treba imati neku pozadinsku boju kao i širinu 800px. U CSS-u kucamo sledeće:

#glavna-tabela {
background-color:#00AAFF;
width:800px;
}

 Kada završimo sa formatiranjem u CSS-u potrebno je da taj format dodamo HTML elementu. U index.html strani nađemo element za koji smo pravili format, u ovom primeru tabela, odnosno tag <table>

U vašem primeru tabela već ima linijski CSS, pa je potrebno prvo obrisati linijski CSS.

<table width="800" bg-color="#00AAFF" >

 Tako da nam ostane samo HTML element, odnosno njegov otvarajući tag <table>

Pripremljeni CSS format dodajemo tako što stanemo mišem unutar zagrada otvarajućeg taga, odmah nakon imena (u ovom slučaju nakon slova e) i stisnemo SPACE. DW nudi opcije u padajućoj listi. Obzirom da smo u CSS-u koristili selektor #, u padajućoj listi treba izabrati reč ID, ukucajte slovo I kako bi brže našlli traženu reč. Kada kliknete na ID, dobićete spisak svih ID-jeva koje imate u CSS-u (u vašem slučaju imate samo glavna-tabela) i izaberete format (ID) koji želite ( kliknete na reč glavna-tabela). Vaša tabela je sada formatirana kroz spoljašnji CSS. Izmene u Kodu se ne prikazuju automatski, pa je potrebno da kliknete na dugme REFRESH kako bi videli promenu u Dizajn delu. Dugme REFRESH se pojavljuje u Properties baru, kao i u CSS panelu.

<table id="glavna-tabela">

 

Ukratko:

1. Napravite HTML stranu – HTML strana je naš sajt, tu se nalaze elementi sajta

2. Napravite CSS fajl – CSS je pomoćni fajl, služi za formatiranje sajta

3. Povežete ta dva fajla (attach CSS) – Pvezivanje uvek radimo u HTML fajlu, odnosno HTML stranu povezujemo sa pomoćnim fajlovima.

- Ova 3 koraka radimo samo jednom, sledeće korake ponavljamo iznova za svaki element na strani.

4. Napravimo HTML element (ubacimo tabelu) – u index.html fajlu

<table width="800">
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>

 

5. Napravimo format u CSS-u – u fajlu style.css

 

#glavna-tabela {
background-color:#00AAFF;
width:800px;
}

 6. CSS format dodamo HTML elementu – u index.html

<table id="glavna-tabela">

 Prethodno obrišemo linijski CSS ukoliko je postojao.

To je to – Ovi koraci predstavljaju osnovu Web Dizajna. 

Zadatak 2.

U prvom redu tabele treba postaviti naslovnu sliku – HEADER.

Slika prethodno mora biti pripremljena – rezolucija 72px/inch, dimenzija 800×200, širina 800px, visina 200px. Odnosno slika treba biti iste širine kao i sajt. Visina slike je proizvoljna, uglavnom je naslovna slika dosta manje visine nego širine. Pripremu možete uraditi u Photoshop-u ili preko onlajn aplikacija – http://www.resizeyourimage.com/ http://www.picresize.com ili potražite na internetu image resize

U CSS fajlu (style.csss) pravimo format za prvi red.

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

 Ovde smo prvi red nazvali heder, dodelili smo mu dimenzije (širina 800px, visina 200px) i dodelili smo mu pozadinsku sliku. 

U HTML fajlu (index.html) je potrebno da html elementu dodelimo napravljeni CSS format.

Obzirom da se prvi red (tr) i prva ćelija (td) poklapaju, pripremljeni format ćemo dodati prvoj ćeliji.

<td id="heder">&nbsp;</td>

 Celokupni kod:

CSS:

 

#glavna-tabela {
background-color:#00AAFF;
width:800px;
}

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

 HTML:

<table id="glavna-tabela">
  <tr>
    <td id="heder">&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>

 

Dimenzije uvek moraju imati px pored broja.

Comments (0) Trackback from your site.

Dragan Filipović

Predavač na Kursu Web Dizajna - Web edukator.

Ostavi komentar

Morate biti prijavljeni da biste dodali komentar.