NAVIGACIJA
Naslovna strana - Jelena Hadži-Purić 0 1 2 3 4 5 6 7 8 9 10 11 Uvod u Web i Internet tehnologije

Stilovi

Primer 1
<FONT face="Arial" size="5" color="#FF00FF" > Izdvojen tekst </FONT>

Primer 2
<strong style="color:black;background-color:#00CED1"> Izdvojen tekst </strong>

Stilovi su usvojeni od strane W3C u decembru 1996 i predstavljaju način za kontrolu prikaza Web strana. Nastao je sa ciljem proširivanja HTML-a bez dodavanja novih elemenata i atributa. Microsoft je najpre kreirao šeme stilove nalik na stilove u tekst editoru Word, i omogućio razdvajanje sadrzaja i prezentacije. Zatim je W3C je usvojio CSS (Cascading Style Sheets) kao deo HTML standarda i omogućio jednostavno unapređivanje Web dokumenata.

 

Dakle, i HTML (poput aplikacija za pripremu štampe) podržava koncept stila i šablona.
Stil definiše dizajn i raspored informacija za dokumente: podešavanje margina, proreda, boja, fontova, poravnanja, precizna kontrola pojavljivanja elemenata u HTML dokumentu,... 

Da li postoji razlika između HTML i CSS?

HTML se koristi da definiše strukturu Web dokumenta.
CSS omogucava formatiranje definisane strukture Web dokumenta.

Zašto koristiti CSS?

Neki od razloga zašto biste koristili CSS kod izrade vaših Web strana su:
  1. Lakoća korišcenja: jedan CSS dokument može kontrolisati izgled više HTML strana. Da bi se promenio njihov izgled, potrebno je promeniti samo CSS, a ne svaku pojedinačnu stranu.
  2. Manja veličina: CSS omogućava da se potpuno uklone svi tagovi i svi atributi koji definišu izgled Web strana ( vrednosti za širinu, visinu, fontove, boje, slike pozadine), što smanjuje veličinu Web strana.
  3. Veća kontrola: CSS dozvoljava kontrolu izgleda strana pomoću svojstava kao što su: capitalize, uppercase, lowercase, text-decoration, letter-spacing, word-spacing, text-indent, i line-height. CSS takođe može biti korišcen za dodavanje margina, okvira, razmaka izmedu elemenata, boja pozadine i slika u bilo koji HTML element.
  4. Primena kod različitih medija: CSS može biti kreiran za različite medije (različiti Web čitači, štampaci, projektori), bez menjanja sadržaja ili strukture dokumenta.

Primeri formiranja spiska pravila stila za određeni HTML dokument

 

Osnovna CSS sintaksa

Ukoliko bismo hteli da pozadina naše Web stane bude sivo-srebrne boje, korišcenjem HTML jezika uradili bismo to na sledeći način:
<body bgcolor="#c0c0c0">
Pomoću CSS jezika napisaćemo slično:
body {background-color: #c0c0c0;}

Kao što možete videti, CSS kôd je sličan HTML kôdu. Na osnovu prethodnog primera, možemo definisati osnove CSS modela.

CSS je predstavljen kao skup pravila, koja se pišu na sledeći način: 

selektor
{
atribut1: vrednost1;
atribut2: vrednost2;
}

Selektor može biti HTML element, stil klasa, kao i pseudo klasa ili pseudo element. U našem primeru, selektor je HTML element <body>, dok je atribut background-color sa vrednošcu #c0c0c0 (heksadecimalna oznaka za srebrnu boju).

Svako pravilo je izraz koji definiše šta će se stilizovati i kako će se stilovi prikazati. Stil strana se sastoji iz liste pravila koju browser konsultuje da bi odredio kako da izgleda ili zvuči strana.

Osnovni delovi jednog pravila su: SELEKTOR i DEKLARACIJE.

Deklaracija se sastoji od karakteristike i vrednosti karakteristike.
Forma: selektor {karakteristika: vrednost ;}

Selektorski deo govori koji deo HTML dokumenta je pokriven pravilom stila.

Deklaracije pravila se smeštaju unutar vitičastih zagrada, a karakteristika i njena vrednost su razdvojene dvotačkom. Iza vrednosti se stavlja tačka-zarez.

 

<style>
H1 { color: blue; }
</style>
pravilo H1 { color: blue }
element selektor H1
deklaracija color: blue
karakteristika color
vrednost blue

 

Primer kombinovanih pravila

<style>
p { color: blue; }
p { font-size: large; }
</style>
pravila p { color: blue }, p { font-size: large; }
element p
deklaracije color: blue, font-size: large
karakteristike color, font-size
vrednost blue, large

Ova pravila se mogu kôdirati i kao: 
<style>
p { color: blue; font-size: large }
</style>

 

Primer kombinovanih pravila koji imaju iste deklaracije, a različite selektore

<style>
p { color: blue; }
address { color: blue; }
</style>

Ova pravila se mogu kôdirati i kao: 
<style>
p, address { color: blue;  }
</style>

Ovo pravilo se interpretira kao: sadržaj unutar P i ADDRESS tagova prikazati kao plavi tekst.

Karakteristike fontova

<style>    
H1 { color: goldenrod;         
        font-size: 36pt;         
        font-family: Arial;         
        font-style: italic;         
       font-weight: bold }
</style>

 

Karakteristike pozadine

<style>
    BODY { background: midnightblue;  color: lime }
</style>

 

Karakteristike margina

<style>
    BLOCKQUOTE { 
           margin-top: 1em;         
           margin-right: 0em;
           margin-bottom: 1em;
           margin-left: 0em;
           font-style: italic }</style>

em space ili em razmak je jedinica mere u tipografiji za razmak širine kao kod određenog slova mereno tipografskim tačkama. Za mnoge fontove radi se o širini velikog slova M i odatle potiče ime ovog znaka.

 

Korišćenje klasa elemenata

  <P class=zaseban>Neki izdvojen 
tekst
kao pasus dokumenta.


<style>
  p.zaseban {
             padding-left: 0.2em;
             border-left: solid;
             border-top: none;
             border-bottom: none;
             border-left-width: thin;
             border-color: #ff0099; 
                   }
</style>

Dodavanje CSS u HTML stranu

CSS stil se može dodati u Web stranu korišcenjem sledecih nacina:

1. inline (definicija stila se vezuje za pojedinacni 
HTML element preko HTML atributa style)

<html>
<head>
<title>Primer za inline CSS stil</title>
</head>
<body style="background-color: #c0c0c0;">
<p>Ova strana ima sivu pozadinu.</p>
</body>
</html>

2. ugrađivanjem (interni stil - definicije stilova su sastavni deo HTML dokumenta,
 dodaju se u <head> deo dokumenta pomocu taga <style>)
 
 Složen tag <style> je deo HEAD sekcije.

<html>
<head>
<title>Primer za ugradjivanje CSS stila</title>
<style type="text/css">
body {background-color: #c0c0c0;}
</style>
</head>
<body>
<p>Strana sa sivom bojom pozadine.</p>
</body>
</html>

3. povezivanjem (eksterni stil - definicije stilova su u odvojenom CSS dokumentu)

<html>
<head>
<title>Primer povezivanja eksternog CSS-a
</title>
<link rel="stylesheet" type="text/css"
href="stil.css" />
</head>
<body>
</body>
</html>

 

Uključivanje gotovih stilskih listova

<link rel="stylesheet" href="nekistil.css">

Element <LINK> je prost (nema zatvarajući komplement). Uključuje se unutar sekcije HEAD. Namena ovog taga je da uključi informacije o povezivanju tekućeg HTML dokumenta sa drugim dokumentima i resursima. Atributi: HREF, REL, MEDIA, REV, TYPE, TARGET.
Atribut HREF ima vrednost URL-a odredišta veze. Atribut REL ukazuje na tip veze. Na primer rel="stylesheet" obaveštava browser da dokument na koji se odnozi veza jeste strana sa stilovima.

PRIMER UKLJUČIVANJA SPOLJNOG CSS-a:


<link type="text/css" href="http://WebPutanja/stylesheet.css">



Navedeni načini za kreiranje stila mogu biti istovremeno definisani za jednu Web stranu
 i (ili) njene pojedinačne elemente. U tom slucaju, kreira se novi "virtuelni" stil, 
 koji se primenjuje sledecim redosledom:
1. eksterni
2. interni
3. inline

Način primene je kaskadni: 
 stil na nižem nivou prekrice stil na višem nivou, 
 odnosno,  inline stil ima najveci prioritet, što znaci da ce prekriti stil definisan unutar 
<head> taga, a stil, definisan unutar <head> taga, prekrice stil definisan u posebnom CSS dokumentu.

Zamena prezentacionog HTMLa CSS-om

Zastareli HTML CSS ekvivalent CSS primer
<basefont> body{font-family} body {font-family: Verdana, sans-serif; font-size: 12 pt;}
<body alink> a:active {color} a:active {color: #FFFF00;}
<body link> a:link {color} a:link {color: #00FFFF;}
<body text> body {color} body {color: #000000;}
<body vlink> a:visited {color} a:visited {color: #FF00FF;}
<center> text-align:center h1 {text-align: center;}
<u> text-decoration:underline #a {text-decoration:underline;} poziv npr. <p id=a>Podvucen tekst</p>

CSS atributi


Navešcemo najcešce korišcene CSS atribute:


Opis - primer

definisanje tipa slova
font-family: arial;

definisanje alternativnih slova
font-family: arial, verdana, "times new roman";

velicina slova
font-size: 10px;

iskošeni tekst
font-style: italic;

"obican" tekst
font-style: normal;

podebljani tekst
font-weight: bold;

boja teksta
color: red;

boja pozadine
background-color: pink;

slika kao pozadina
background-image: slika.jpg;

ravnanje teksta
text-align: left;

nazubljivanje paragrafa
text-indent: 18px;

ukrašavanje teksta
text-decoration: underline;

širina elementa
width: 100px;

visina elementa
height: 200px;

podešavanje prostora između okvira jednog elementa i drugog elementa - margina
margin: 5px;
margin-left: 5;
margin-right: 5px;
margin-top:5px;
margin-bottom:5px;

podešavanje praznine oko sadržaja elementa, ali unutar njegovog okvira - padding
padding: 3px;
padding-left: 3px;
padding-right: 3px;
padding-top: 3px;
padding-bottom: 3px;

podešavanje okvira elementa
border-style: dotted;
border-width: 2px;
border-color: black;

pozicioniranje elemenata - apsolutno
position: absolute;
top: 50px; right : 100px; bottom : 300px; left : 100px;

pozicioniranje elemenata - relativno
position: relative;
top: 50px; right : 100px; bottom : 300px; left : 100px;


rešen primer:
Naš zadatak je da tekst na strani bude crne boje, ispisan slovima tipa Verdana
 i da velicina slova bude 11 piksela. Zatim, da tekst u okviru <h1> taga bude crvene
  boje na plavoj pozadini, ispisan slovima tipa Arial, velicine 24 piksela. 
  Tekst u pasusima treba da bude poravnat sa obe strane.
  
Da bi tekst izlegao baš kako smo pozeleli, potrebno je da datoteka stil.css 
ima sledeci sadrtaj:

body {
background-color: #c0c0c0;
color: #000000;
font-family: Verdana;
font-size: 11px;
}

h1 {
color: #FF0000;
font-family: Arial;
font-size: 24px;
background-color: #0000FF;
}

p {
text-align: justify;
}


U našem primeru, CSS dokument se zove stil.css. 
Jedna, ili više HTML strana, može biti povezana sa istim CSS dokumentom. 
Time postižemo da promena, nacinjena u CSS dokumentu, bude vidljiva na 
svim stranama, koje za svoje formatiranje koriste taj CSS dokument. 
Ako je potrebno promeniti boju pozadine, na primer na 30 strana, CSS stil 
u kome je definisana boja pozadine i koji je povezan sa tim stranama, 
ce nas spasiti od menjanja svih 30 Web strana.

CSS dokument je tekstualna datoteka sa ekstenzijom .css koja sadrti niz CSS pravila. 
Dodavanje <link> taga u <head> sekciju Web strane, omogucava formatiranje te strane
 na nacin definisan u CSS dokumentu.

primer.html
<html>
<head>
<title> Povezivanje HTML strane sa CSS dokumentom</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link rel="stylesheet" type="text/css" href="stil.css" />
</head>
<body>
<h1> Uvod u CSS</h1>
<p> CSS predstavlja veoma mocan jezik pomocu kojeg mozete dodati stil 
vašim Web stranama, odnosno definisati nacin na koji ce njihov sadrtaj biti prezentovan.</p>
 <p> CSS je doprineo izradi struktuiranih dokumenata u svetu Web dizajna. </p> 
 </body>
</html>

SUMIRANJE:

Način umetanja CSS-a u HTML dokument

 

CSS komentari

Komentari u CSS-u su po konvenciji koja se koristi u programskom jeziku C:

/* 
Ovo je primer CSS
komentara u vise 
linija
*/

I naravno sa (//)  je komentar u okviru jedne linije.

// CSS Komentar u okviru jedne linije

 

Prethodni Početak
e-mail: Jelena Grmuša


Copyright © 2002, Jelena Grmusa
Poslednja izmena: januar 2005.