CSS – osnove

{ osnove }
Uvod - 1
− Kao prvo i osnovno, da bi učenje CSS-a imalo nekog smisla
morate znati HTML.
− CSS (Cascading Style Sheets) je jezik formatiranja pomodu koga se
definiš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 tagovi
poput <font> počinju poteškode za Web programere, jer HTML
dokumenti počinju bivati sve vedi, i vrlo je teško bilo snalaziti se u
njima. Da bi se uprostio takav HTML dokument od verzije HTML 4.0
uveden 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 HTML
4.01.), dok se radi na verziji CSS 3 koja sa HTML 5 čini nove WEB
standarde koji još uvek nisu standardizovani, ali se koriste na
pojedinim stranicama, jer ih sada sve više brauzer-a podržava i
omogudava njihovu upotrebu.
− Sa pojavom JavaScript-a Web stranice postaju dinamične.
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 boja
slova, pozadine, margine i tako dalje).
− JavaScript deo koji definiše dinamiku Web stranice.
Web stranica
Uvod - 4
Prednosti CSS-a:
− Olakšava pisanje Web stranica.
− Štedi prostor na hostu.
− Brže otvaranje stranica (jedna CSS datoteka se može
primeniti na više HTML stranica).
− Jednostavnije, brže i sigurnije održavanje i HTML i CSS
dokumenata.
− Jednostavnija prenamena Web stranica za različite tipove
brauzer-a i uređaja (npr. mobilni telefoni, TV i sl.)
CSS pravila - 1
− Svaki ispravan HTML dokument napisan prema Web standardima
treba 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 dokument
treba 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ži
instrukcije/naredbe za Web brauzere, a koje definišu stilove za
određene HTML elemente na Web stranici.
CSS pravila - 2
CSS pravilo (sintaksa):
Selektor { svojstvo1: vrednost1; svojstvo2: vrednost2; ...}
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 stila
odnositi.
Nizom parova svojstvo-vrednost definiše se izgled svakog ciljnog elementa.
Različita svojstva (atributi) zahtevaju različite tipove vrednosti, npr.: merne
dužine > 12px, 2em ili 1in; boja > black ili #000000; URL > slike/slika-1.jpg) ili
specifična ključna riječ > top, center, left)
CSS komentari se navode između znakova /* i */.
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 oznake
stila (<style> ... </style>) u zaglavlju HTML koda Web
stranice.
− Opisi stilova se sastoje od jednog ili više pravila.
CSS pravilo:
deklaracija
deklaracija
deklaracija
h1 {color: blue; font-size: 30px; font-family: arial;}
svojstvo vrednost
selektor
(ime stila)
svojstvo
vrednost
svojstvo
vrednost
CSS pravila - 5
Primer 1:
CSS
<style>
Selektor body govori web brauzer-u sledede:
- sve margine na stranici trebaju biti 0px
- boja pozadine treba biti plava
body {margin: 0px; background-color: blue;}
h1, h2 {font-family: "Arial"; font-weight: bold; font-size: 20px; }
</style>
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
CSS pravila - 6
Primer 2: Napišite ga u Notepad-u i sačuvajte sa extenzijom .htm.
<html>
HTML
<head>
<title>Stilovi-primer</title>
<style type="text/css">
Komentar
/* 1. navodedi HTML tag ciljnih elemenata */
p {color: #0000ff;}
/* 2. navodedi Klasu elemenata */
CSS stil
Pravilo
.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>
Primer 2: Izgled stranice
CSS pravila - 7
Jedan CSS dokument može izgledati ovako (naredbe se pišu iza
selektora, 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
CSS dokument može izgledati i ovako (naredbe se pišu iza
selektora, sve u istom redu):
CSS
body { 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; }
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 preostala
dva načina (stilovi definisani u zaglavlju i inline stilovi), a to je da
pomodu eksterne datoteke možemo da utičemo na elemente više
dokumenata (stranica) i centralizovano da upravljamo stilovima i
izgledom dela ili celog sajta.
Primer inlajn stila
Inlajn stil se ubacuje direktno u HTML tag, koristedi argument style.
Ovim se narušava namena CSS-a da se lista stilova primenjuje na
ceo Web sajt.
Primer 3: Napišite ga u Notepad-u i sačuvajte sa extenzijom .htm.
<html>
<head>
<title>Inlajn stil</title>
Inlajn stil
</head>
<body>
<p> Prvi pasus. </p>
<p style="color: #0000FF; font-size: 24px;"> Drugi pasus. </p>
<p> Treci pasus. </p>
</body>
</html>
HTML
Primer 3: Izgled stranice
Primer ugrađenog stila
Ugrađeni stil se ubacuje direktno u zaglavlje dokumenta, između
početne i završne oznake (taga) stila (<style> ... </style>).
Primer 4: Napišite ga u Notepad-u i sačuvajte sa extenzijom .htm.
<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>
HTML
Ugrađeni stil
Primer 4: Izgled stranice
Primer eksternog stila
Da biste u potpunosti iskoristili prednosti CSS-a, treba da koristite
eksterni stil. Eksterni stil je tekstualna datoteka sa ekstenzijon .css.
Primer 5: Napišite ga u Notepad-u i sačuvajte sa extenzijom .css.
CSS
body {background-color: #691; color: black;}
p {font-family: "Georgija"; font-size: 54px; color: #0000FF; }
h1 {font-family: "Verdana"; font-size: 30px; color: #ccc;}
Lista stilova
Primena eksternog stila
Eksterni stil se ubacuje u HTML kod (dokument), korišdenjem
tag-a <link>. HTML datoteka i datoteka sa stilovima se nalaze u
istoj fascikli.
Primer 5: Napišite ga u Notepad-u i sačuvajte sa extenzijom .htm.
<html>
HTML
<head>
<title>Eksterni stil</title>
<link href="externistil.css" rel="stylesheet" type="text/css"/>
</head>
<body>
Link eksternog stila
<p> Prvi pasus. </p>
(u ovom primeru ime
CSS datoteke je
<h1> Drugi pasus. </h1>
externistil.css)
</body>
</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 vrste
stilova. Stil definisan unutar head sekcije dokumenta je stariji od
eksternog 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 je
pišete na dva načina:
− u dekadnom sistemu,
− u heksadekadnom sistemu (#A4FD23), a ovaj sistem se
najviš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 stilove
koji se prikazuju na ekranu, ali su korisni kada se dokument
priprema za štampanje
− % - procenti predstavljaju relativnu jedinicu mere.
− em - relativna mera u odnosu na trenutnu veličinu fonta. Ako je
font veličine 12pt, onda de 2em predstavljati veličinu od 24pt.
− ex - još jedna relativna mera u odnosu na veličinu slova, 1ex je
otprilike 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 prikaz
HTML dokumenta. Sve stilove grupišemo prema tome kakav
prikaz 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 backgroundimage. 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 svojstvo
background-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, da
podesite 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 koristiti
prvi dostupni font sa te liste).
Primer 1: p {font-family: Verdana, Tahoma, Arial, Helvetica;}
Fontovi - 2
Veličinu slova možete podesiti svojstvom font-size. Vednosti za
ovo mogu biti broj, procenat, ili generička vrednost (small,
medium, large, x-small, xx-small, x-large i xx-large). Numeričke
vrednosti 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 - 3
Na 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 prikazivanja
teksta:
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 imati
vrednosti: left, right, center i justify.
Primer 5: h1 {text-align: center;}
Tekst - 4
text-decoration – podešava dekoraciju teksta. Može imati
vrednosti:
− 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 u
pikselima, 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=OZpP5D
oqzVE
www.bubaj.com/index.php?css-osnove
3.

Download Report