{ osnove }

Uvod - 1

− Kao prvo i osnovno, da bi učenje CSS-a imalo nekog smislamorate znati HTML.

− CSS (Cascading Style Sheets) je jezik formatiranja pomodu koga sedefiniše izgled (stil) Web strana.

− Kad se pojavio Web jedino je HTML definisao kompletan izgled,strukturu i sadržaj Web stranica. Kada su u HTML 3.2 dodati tagovipoput <font> počinju poteškode za Web programere, jer HTMLdokumenti počinju bivati sve vedi, i vrlo je teško bilo snalaziti se unjima. Da bi se uprostio takav HTML dokument od verzije HTML 4.0uveden je CSS (1996 godine).

− CSS ima daleko vede dizajnerske mogudnosti od čistog HTML-a.Zato je danas CSS gotovo nezamenjljiv u dizajniranju Web stranica.

Uvod - 2

− Prva verzija HTML-a se pojavila 1990 godine.

− Prva verzija CSS-a se pojavila 1996 godine.

− Kao i HTML, CSS se takođe razvijao i unapređivao tokom godina,pa je tako danas aktuelna verzija CSS 2.1 (u kombinaciji sa HTML4.01.), dok se radi na verziji CSS 3 koja sa HTML 5 čini nove WEBstandarde koji još uvek nisu standardizovani, ali se koriste napojedinim stranicama, jer ih sada sve više brauzer-a podržava iomogudava njihovu upotrebu.

− Sa pojavom JavaScript-a Web stranice postaju dinamične.

Web stranica

Uvod - 3

Današnje Web stranice dele se na:

− HTML deo koji definiše sadržaj (strukturu) Web stranice.

− CSS deo koji definiše izgled Web stranice (kao na primer bojaslova, pozadine, margine i tako dalje).

− JavaScript deo koji definiše dinamiku Web stranice.

Uvod - 4

Prednosti CSS-a:

− Olakšava pisanje Web stranica.

− Štedi prostor na hostu.

− Brže otvaranje stranica (jedna CSS datoteka se možeprimeniti na više HTML stranica).

− Jednostavnije, brže i sigurnije održavanje i HTML i CSSdokumenata.

− Jednostavnija prenamena Web stranica za različite tipovebrauzer-a i uređaja (npr. mobilni telefoni, TV i sl.)

CSS pravila - 1

− Svaki ispravan HTML dokument napisan prema Web standardimatreba da ima odvojen sadržaj (strukturu) od izgleda (stila).

− Znači, prvo treba napisati HTML kod (naslovi, paragrafi, slike,odjeljci, forme i sl...) kao poseban dokument, a zatim taj dokumenttreba povezati sa CSS dokumentom u kojem su definisani stilovi.

− U retkim slučajevima CSS kod se piše unutar HTML dokumenta.

− CSS dokument je najobičniji tekstualni dokument koji sadržiinstrukcije/naredbe za Web brauzere, a koje definišu stilove zaodređene HTML elemente na Web stranici.

CSS pravila - 2

CSS pravilo (sintaksa):

Selektor { svojstvo1: vrednost1; svojstvo2: vrednost2; ...}

CSS komentari se navode između znakova /* i */.

Selektor može biti:− HTML element (tag) na koji de se opis stila odnositi.− Klasa HTML elemenata na koju de se opis stila odnositi.− Identifikaciona vrednost (ID) HTML elemenata na koji de se opis stilaodnositi.

Nizom parova svojstvo-vrednost definiše se izgled svakog ciljnog elementa.Različita svojstva (atributi) zahtevaju različite tipove vrednosti, npr.: mernedužine > 12px, 2em ili 1in; boja > black ili #000000; URL > slike/slika-1.jpg) ilispecifična ključna riječ > top, center, left)

CSS pravila - 3

Ako je selektor HTML element (tag) :

p { svojstvo1: vrednost1; svojstvo2: vrednost2; ...}

Ako je selektor Klasa HTML elemenata :

.imeKlase { svojstvo1: vrednost1; svojstvo2: vrednost2; ...}

Ako je selektor Identifikaciona vrednost (ID) HTML elemenata:

#IDVrednost { svojstvo1: vrednost1; svojstvo2: vrednost2; ...}

CSS pravila - 4

− Opisi stilova postavljaju se između početne i završne oznakestila (<style> ... </style>) u zaglavlju HTML koda Webstranice.

− Opisi stilova se sastoje od jednog ili više pravila.

CSS pravilo:

h1 {color: blue; font-size: 30px; font-family: arial;}

selektor

(ime stila)

svojstvo vrednost svojstvo vrednost svojstvo vrednost

deklaracija deklaracija deklaracija

CSS pravila - 5

Primer 1:

body {margin: 0px; background-color: blue;}

h1, h2 {font-family: "Arial"; font-weight: bold; font-size: 20px; }

Selektor body govori web brauzer-u sledede:- sve margine na stranici trebaju biti 0px- boja pozadine treba biti plava

Selektori h1 i h2 govore web brauzer-u sledede: - tekst treba biti napisan u Arial fontu- debljina slova treba biti podebljana- veličina teksta treba biti 20px

<style>

</style>

CSS

<html><head><title>Stilovi-primer</title><style type="text/css">

/* 1. navodedi HTML tag ciljnih elemenata */p {color: #0000ff;}/* 2. navodedi Klasu elemenata */

.crvenitekst {color: #ff0000; text-align: center;}/* 3. navodedi direktnu identifikacionu vrednost (ID) elementa */#zelenitekst {color: #00ff00; text-align: right; font-size: 20px;}

</style></head><body><p> Prvi pasus. Tekst je levo poravnat i plave boje. </p><p id="zelenitekst"> Drugi pasus. Tekst je desno poravnat i zelene boje. </p><p class="crvenitekst"> Tredi pasus. Tekst je centriran i crvene boje. </p></body></html>

CSS pravila - 6Primer 2: Napišite ga u Notepad-u i sačuvajte sa extenzijom .htm.

Komentar

Pravilo CSS stil

HTML

Primer 2: Izgled stranice

CSS pravila - 7Jedan CSS dokument može izgledati ovako (naredbe se pišu izaselektora, u više redova):

Selektor body govori web brauzer-u sledede:- sve margine na stranici trebaju biti 0 px- tekst treba biti napisan u Trebuchet MS fontu- veličina pisma treba biti 12px

Selektor a govori web brauzer-u sledede: - linkovi ne smeju biti podvučeni- boja pozadine linka treba biti crvena- boja teksta linka treba biti bela

Selektor h1 govori web brauzer-u sledede: - sve margine oko h1 elementa trebaju biti 0px- debljina slova treba biti podebljana- veličina teksta treba biti 20px

Selektor p govori web brauzer-u sledede: - boja teksta celog pasusa treba biti siva- veličina teksta treba biti 11px

CSS pravila - 8

CSSbody { margin: 0; font-family: "Trebuchet MS"; font-size: 12px; }

a { text-decoration: none; background-color: red; color: white; }

h1 { margin: 0; font-weight: bold; font-size: 20px; }

p { color: #666666; font-size: 11px; }

CSS dokument može izgledati i ovako (naredbe se pišu izaselektora, sve u istom redu):

Gde može da se nalazi CSS kod (stil)

CSS kod se može zadavati na tri standardna mesta:

− Direktno u HTML tag-u, koristedi argument style (inline).

− U zaglavlju dokumenta unutar taga <style>.

− U eksternoj datoteci, koja se linkuje tag-om <link>.

Stilovi u eksternoj datoteci imaju prednost u odnosu na preostaladva načina (stilovi definisani u zaglavlju i inline stilovi), a to je dapomodu eksterne datoteke možemo da utičemo na elemente višedokumenata (stranica) i centralizovano da upravljamo stilovima iizgledom dela ili celog sajta.

Primer inlajn stila

<html>

<head>

<title>Inlajn stil</title>

</head>

<body>

<p> Prvi pasus. </p>

<p style="color: #0000FF; font-size: 24px;"> Drugi pasus. </p>

<p> Treci pasus. </p>

</body>

</html>

Inlajn stil se ubacuje direktno u HTML tag, koristedi argument style.Ovim se narušava namena CSS-a da se lista stilova primenjuje naceo Web sajt.

Inlajn stil

Primer 3: Napišite ga u Notepad-u i sačuvajte sa extenzijom .htm.

HTML

Primer 3: Izgled stranice

Primer ugrađenog stila

<html>

<head>

<title>Ugrađeni stil</title>

<style type="text/css">

body {background-color: gray;}

p {color: #0000FF; font-size: 24px;}

h1 {color: #00FF00; font-family: "Arial"; font-size: 34px;}

</style>

</head>

<body>

<p> Prvi pasus. </p>

<h1> Drugi pasus. </h1>

</body>

</html>

Ugrađeni stil se ubacuje direktno u zaglavlje dokumenta, izmeđupočetne i završne oznake (taga) stila (<style> ... </style>).

Ugrađeni stil

Primer 4: Napišite ga u Notepad-u i sačuvajte sa extenzijom .htm.

HTML

Primer 4: Izgled stranice

Primer eksternog stila

body {background-color: #691; color: black;}

p {font-family: "Georgija"; font-size: 54px; color: #0000FF; }

h1 {font-family: "Verdana"; font-size: 30px; color: #ccc;}

Da biste u potpunosti iskoristili prednosti CSS-a, treba da koristiteeksterni stil. Eksterni stil je tekstualna datoteka sa ekstenzijon .css.

Lista stilova

Primer 5: Napišite ga u Notepad-u i sačuvajte sa extenzijom .css.

CSS

Primena eksternog stila

<html>

<head>

<title>Eksterni stil</title>

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

</head>

<body>

<p> Prvi pasus. </p>

<h1> Drugi pasus. </h1>

</body>

</html>

Eksterni stil se ubacuje u HTML kod (dokument), korišdenjemtag-a <link>. HTML datoteka i datoteka sa stilovima se nalaze uistoj fascikli.

Link eksternog stila(u ovom primeru ime

CSS datoteke je

externistil.css)

Primer 5: Napišite ga u Notepad-u i sačuvajte sa extenzijom .htm.

HTML

Primer 5: Izgled stranice

Redosled slaganja (prioritet) i interpretacije stilova

Prioritet i interpretacija (od najnižeg ka najvišem):

1. Browser default.

2. External style sheet.

3. Internal style sheet (unutar <head> taga).

4. Inline style (unutar HTML elementa)

Znači inline CSS (unutar HTML elementa) ima najvedi prioritet,što znači da de „pregaziti“ svaku definicije u prethodne tri vrstestilova. Stil definisan unutar head sekcije dokumenta je stariji odeksternog fajla i browser default-a.

Svojstva

Neka od CSS svojstava (atributa) možemo kategorisati u sledede grupe:

− definicija pozadine elementa,− ivica,− okvir,− prikaz,− dimenzije,− font,− margine,− unutrašnji prazan prostor,− pozicija,− izgled pripadajudeg teksta.

Vrednosti

Vrednosti atributa mogu biti:

− predefinisane ključne reči,

− brojevne vrednosti.

Primeri predefinisanih ključnih reči su recimo "red", "left“ ...

Brojevne vrednosti se mogu zadavati na nekoliko načina:

− zadajudi samo brojnu vrednost,

− zadajudi brojevnu vrednost navodedi i jedinicu veličine (px,em, pt, ...).

Ako zadajete samo brojnu vrednost, imate mogudnost da jepišete na dva načina:

− u dekadnom sistemu,

− u heksadekadnom sistemu (#A4FD23), a ovaj sistem senajviše koristi u definiciji boje.

Jedinice mere

CSS jedinice mere su:

− px - piksel, označava broj tačaka na ekranu

− pt - point, najčešde se koristi za zadavanje veličina slova (1pt =1/72 inča).

− pc - pika, jedinica mere koja se ređe zadaje. 1pc = 12pt.

− mm, cm, in - milimetri, centimetri ili inči se retko zadaju za stilovekoji se prikazuju na ekranu, ali su korisni kada se dokumentpriprema za štampanje

− % - procenti predstavljaju relativnu jedinicu mere.

− em - relativna mera u odnosu na trenutnu veličinu fonta. Ako jefont veličine 12pt, onda de 2em predstavljati veličinu od 24pt.

− ex - još jedna relativna mera u odnosu na veličinu slova, 1ex jeotprilike jednak polovini veličine fonta.

U praksi se najčešde zadaju px, pt ili procenti.

Najznačajniji stilovi

Postoji nekoliko desetina različitih stilova koji kontrolišu prikazHTML dokumenta. Sve stilove grupišemo prema tome kakavprikaz kontrolišu:

− pozadina,

− fontovi, tekst i boje,

− box i stilovi bordera (borders),

− liste,

− pozicioniranje.

CSS Pozadina i boje

Da bi definisali stilove za pozadinu odredjenog sektora koristimo opciju background.

Redosled svojstava:

− background-color

− background-image

− background-repeat

− background-attachment

− background-position

Boja pozadine

Za definisanje boj pozadine koristi se svojstvo background-color.

Boja pozadine za celu stranu se definiše u <body> tagu.

Primer 1: body {background-color: #B0C4DE;}

Boja se navodi na jedan od tri načina:

– imenom - npr. red, yellow...

– RGB vrednošdu - npr. rgb(255,0,0)

– Hex-a vrednošdu - npr. #FF0000

Slika kao pozadina -1

Za definisanje slike kao pozadine koristi se svojstvo background-

image. Definiše se u <body> tagu.

Primer 1: body {background-image: url('pozadina.gif');}

Za kontrolu ponavljanja koristi se svojstvo background-repeat(repeat-x, repeat-y, no-repeat).

Položaj slike se određuje svojstvom background-position (vertikala:top/center/bottom; horizontala: left/center/right).

Da li se slika skroluje sa stranom ili ne skroluje određuje svojstvobackground-attachment (scroll, fixed).

Slika kao pozadina - 2

Primet 2: Body {

background-image: url('pozadina.png');background-repeat: no-repeat;background-position: top right;

}

Primet 3: Body {background-image: url('pozadina.png');background-repeat: repeat-x;background-position: top left;background-attachment: fixed;

}

Fontovi - 1

Pomodu nekoliko različitih svojstava možete da birate font, dapodesite veličinu i da zadajete svojstva kao što su bold i italic.

Upotrebom svojstva font-family možete da izaberete font(preporučujemo da odredite listu fontova a pretraživč de koristitiprvi dostupni font sa te liste).

Primer 1: p {font-family: Verdana, Tahoma, Arial, Helvetica;}

Fontovi - 2Veličinu slova možete podesiti svojstvom font-size. Vednosti zaovo mogu biti broj, procenat, ili generička vrednost (small,medium, large, x-small, xx-small, x-large i xx-large). Numeričkevrednosti možete podesiti u procentima, pixelima ili u tačkama.

Boju fonta možete podesiti svojstvom color.

Primer 2: p {font-family: Verdana, Tahoma, Arial, Helvetica;font-size: 14px;color: #00FF00;

}

Fontovi - 3Na izgled teksta možemo uticati još sa slededim svojstvima:

− Font-style: Vrednosti mogu biti normal, italic i oblique.

− Font-weight: Može imati vrednosti normal, bold, bolder, ...lighter ili numeričku vrednost.

− Font-variant: može imati vrednost normal ili small-caps.

Primer 3: h1 {font-family: Verdana, Tahoma, Arial, Helvetica;font-size: 14px;color: #00FF00;font-style: italic;font-variant: small-caps;

}

Tekst - 1

CSS vam pruža mnogo opcija za definisanje stilova prikazivanjateksta:

color – definiše boju teksta.

Primer 1: p {color: #00FF00;}

direction – podešava direkciju teksta. Može imati vrednosti:

− ltr - left to right (sa leva na desno)

− rtl - right to left (sa desna na levo)

Primer 2: div {direction: rtl;}

Tekst - 2

line-height – podešava distancu između linija teksta. Može imati vrednosti:

− normal - normalni razmak između linija

− number - brojna vrednost koja se matematički računa u zavisnosti veličine fonta

− length - precizna vrednost koju možemo odrediti pikselima, tačkama, centimetrima,..

− % - odredjeni broj ptocenata korišdene veličine fonta

Primer 3: h1 {line-height: 30px;}

Tekst - 3

letter-spacing – povedava ili smanjuje distancu između slova. Može imati vrednosti:

− normal - normalna distanca izmedju slova

− length - podešava ekstra razmak izmedju slova (može imati i negativnu vrednost).

Primer 4: h1 {letter-spacing: 2px;}

text-align – podešava poziciju teksta u elementu. Može imativrednosti: left, right, center i justify.

Primer 5: h1 {text-align: center;}

Tekst - 4

text-decoration – podešava dekoraciju teksta. Može imativrednosti:

− none - normalan tekst

− underline - linija ispod teksta

− overline - linija iznad teksta

− line-through - precrtan tekst

− blink - tekst koji blinka

Primer 6: h3 {text-decoration: underline;}

Tekst - 5

text-indent – Uvlaši prvu liniju teksta. Može imati vrednosti:− length - definišete koliko de biti uvučena prva linija tačno upikselima, tačkana, centimetrima,...− % - definiče koliko procenata de biti uvučena linija

Primer 7: p {text-indent: 50px;}

text-shadow – podešava se efekat senke teksta. Može imati vrednosti:− none− color - odredjena boja senke− length - odredjena veličina senke

Primer 8: p {text-shadow: 2px 2px 2px #000;}

Tekst - 6

text-transform – služi za kontrolisanje slova. Može imati vrednosti:− none− capitalize - podešava da prvo slovo svake reči bude velik− uppercase - podešava da sva slova budu velika− lowercase - podešava da sva slova budu mala

Primer 9: h2 {text-transform: uppercase;}

word-spacing – služi za povedavanja ili smanjivanje rezmaka izmedju reči.

Primer 10: p {word-spacing: 30px;}

CSS Tutorijali

1. http://moviesbk.com/video/OZpP5DoqzVE/1.CSS%20-%20Osnove.html#.UU7tkhxg-58

2. http://www.youtube.com/watch?feature=player_embedded&v=OZpP5DoqzVE

3. www.bubaj.com/index.php?css-osnove