Professional Documents
Culture Documents
HTML PDF
HTML PDF
Sadraj
1
(X)HTML .......................................................................................................................... 5
1.1
1.2
1.3
to je HTML? .............................................................................................................................................. 6
1.4
1.5
Elementi ........................................................................................................................................................ 7
1.6
1.7
Horizontalna linija..................................................................................................................................... 10
1.8
1.9
Entiteti ........................................................................................................................................................ 12
1.9.1
1.9.2
1.9.3
Tag znakovi........................................................................................................................................ 14
1.10
1.11
1.12
1.12.1
1.12.2
1.12.3
1.13
1.13.1
1.13.2
1.13.3
1.14
Slike ........................................................................................................................................................ 30
1.14.1
1.14.2
1.14.3
Str. 2 od 102
1.14.5
1.15
Tablice.................................................................................................................................................... 37
1.16
1.17
1.18
1.19
1.19.1
1.19.2
WYSIWYG editori........................................................................................................................ 51
1.20
HTML validator.................................................................................................................................... 51
CSS................................................................................................................................... 54
2.1
2.2
2.3
Selektori i deklaracije................................................................................................................................ 56
2.4
2.5
2.5.1
2.5.2
2.5.3
2.6
2.7
2.7.1
Boje .................................................................................................................................................... 68
2.7.2
Linkovi ............................................................................................................................................... 68
2.7.3
Pozadina ............................................................................................................................................. 71
2.7.4
Fontovi ............................................................................................................................................... 72
2.7.5
2.7.6
2.7.7
2.7.8
Str. 3 od 102
2.9
Str. 4 od 102
(X)HTML
1.2
Internet stranice se sastoje od razliitih tipova sadraja, poput teksta, grafike, formi, audio i
video zapisa.
Svaka internet stranica je razliita, te njezin izgled i funkcija ovise o tome kako je pisan kod.
Svaki programer radi na svoj jedinstven nain, tako da je svaka stranica po neemu razliita.
Ipak u jednom segmentu internet stranice imaju neto zajedniko, a to je Hypertext Markup
Language (HTML) - sintaksa programiranja koju morate znati.
(X)HTML je baza svake stranice, te se koristi kod svakog naprednijeg programiranja. Kod
koji piemo spremamo u datoteke. Te datoteke su tekst dokumenti koje tvore internet stranicu.
Str. 5 od 102
1.3 to je HTML?
HTML je skraenica od HyperText Markup Language.
Pojam "Hypertext Markup" upuuje na jezik za oznaavnje, te mogunost meusobnog
povezivanja dokumenata hiper-poveznicama (engl. Hyperlink).
Oznaavanje se vri koritenjem tagova kojima se stvaraju, povezuju i strukturiraju elementi
HTML dokumenta. Tagovi upuuju Internet preglednik na nain kako e prikazati tekst koji
slijedi nakon taga. HTML datoteka mora imati ekstenziju .htm ili .html, te moe biti kreirana
koritenjem bilo kojeg tekst editora.
Str. 6 od 102
1.5 Elementi
Elementi su blokovi (X)HTML-a. Koristimo ih kod opisivanja teksta na stranici. Elementi su
napravljeni od tagova i sadraja koji se nalazi u tim tagovima. Postoje 2 glavna tipa
elemenata:
Poetni i zavrni tag su elementi koji opisuju sadraj i koriste se za oznaavanje poetka i
kraja elementa. Poetni i zavrni tag izgledaju ovako:
<tag>...</tag>
Poetni tag govori internet pregledniku gdje element poinje, a zavrni gdje zavrava, sadraj
se nalazi izmeu.
Samostalni tagovi su elementi koji ne opisuju sadraj i zovu se prazni elementi. Koriste samo
jedan tag <tag />
Takvi tagovi koriste se npr. kod ubacivanja slika i prekida linija (<img />, <br />).
Jedna kljuna razlika izmeu XHTML-a i HTML-a je ta da u XHTML-u svi prazni elementi
moraju zavravati sa kosom crtom (/) prije zatvaranja. Osnova XHTML-a je XML, a pravilo u
XML-u je da svi prazni elementi moraju zavravati s kosom crtom <tag />.
Da bi ovakav zapis bio itljiv u starijim internet preglednicima, potrebno je ubaciti prazno
mjesto (blank) prije kose crte.
Element <img /> referencira sliku. Kad internet preglednik prikazuje stranicu, zamjeni <img
/> element s datotekom na koju pokazuje. Po pravilu XHTML-a, ono to se u HTML-u
Str. 7 od 102
<html>
<head>
<title>Elementi</title>
</head>
<body>
Ovo je moja prva stranica
</body>
</html>
Prvi tag u HTML dokumentu je <html>. <html> tag govori internet pregledniku da slijedi
poetak HTML dokumenta. Zadnji tag u naem dokumentu je </html> i on ukazuje internet
pregledniku da je to kraj HTML dokumenta.
Str. 8 od 102
<html>
<head>
<title>Prekid linija</title>
</head>
<body>
Ovo je prva linija<br />
Ovo je druga linija <br />
</body>
</html>
Str. 9 od 102
align: Specificira horizontalno poravnanje linije kao lijevo, sredinje ili desno
<html>
<head>
<title>Horizontalna linija</title>
</head>
Str. 10 od 102
U ovom komadu HTML-a, <img /> element sam je poruka internet pregledniku da se radi o
slici, src atribut mu govori detalje gdje se ta slika nalazi, a ostali atributi, height i width,
govore kako e se slika prikazati na stranici. Atribut alt prikazuje tekst koji e se prikazati na
mjestu slike, u sluaju da se slika ne moe uitati ili je nema.
Str. 11 od 102
Pravila XML sintakse odreuju da vrijednosti atributa moraju biti pod navodnim znacima.
Atribute i njihove vrijednosti moemo pisati bilo kojim redom unutar poetnog taga ili unutar
jednog taga.
Svaki (X)HTML element ima skup atributa koji se mogu s njime koristiti, i ne moemo
mijeati atribute i elemente. Neki atributi mogu bilo koji tekst uzeti kao neku vrijednost, jer
vrijednost atributa moe biti bilo kakva, poput recimo lokacije neke slike ili stranice na koju
se elimo linkati. Ostali pak imaju specifian popis vrijednosti koje se mogu staviti u atribut,
poput opcija za poravnavanje teksta u tablici.
HTML 4.01 i XHTML 1.0 specifikacije definiraju tono koji se atributi mogu koristiti s
nekim danim HTML elementom.
1.9 Entiteti
Tekst neke internet stranice ima svoje granice, a entiteti kao posebni ne ASCII znakovi
omoguuju prikazivanje posebnih znakova.
To su najee simboli, copyright znak, slova s prijeglasima
Svaki entitet poinje sa (&) i zavrava sa (;).
Svaki entitet moe biti napisan uz pomo svog naziva ili broja: &naziv_entiteta; ili
&#broj_entitera;
Znai za prikazivanje znaka manje od (<) koristimo: < ili <
1.9.1
Ne-ASCII znakovi
Basic American Standard Code for Information Interchange (ASCII) tekst definira relativno
mali broj znakova. U svojoj definiciji ne ukljuuje posebne znakove, poput recimo trademark
simbola, frakcija i sl.
Str. 12 od 102
<html>
<head>
<title>Ne-ASCII znakovi</title>
</head>
<body>
Moje ime je Pero, a prezime Petrić i volim raditi na računalu.
</body>
</html>
Str. 13 od 102
Encoding za ISO-Latin-1 znakovni set se isporuuje po defaultu. Ako elimo koristiti neke
druge znakove zahtjeva ukljuivanje posebnih markupa koji govore internet pregledniku da se
mora spremiti na interpretaciju unikodnih znakovnih kodova (unicode je internacionalni
standard iso standard 10646)2.
Ovaj markup izgleda ovako:
Tag znakovi
Internet preglednici podrazumijevaju da neki HTML znakovi kao to su "<" i ">" tebaju biti
sakriveni i ne prikazivati se na strnaici. Ako ba elim prikazati znak na stranici onda moramo
to napraviti razumljivim. Sljedei entiteti nam omoguuju prikazivanje sakrivenog HTML
markup-a.
<html>
<head>
<title>Naslovi</title>
</head>
Str. 14 od 102
Tag <p> oznaava poetak odlomka. Unutar odlomka moete koristiti ostale tagove kao to su
na primjer:
Ako elite unutar odlomka prelomiti tekst koristite tag <br /> (break line). Ovaj tag nema svoj
zavrni tag ve je samostalan. Kada koristite tag <br />, on ne opisuje tekst zato i nema
zavrni tag.
Paragrafi se poravnavaju sa lijevom stranom, ako drugaije niste definirali. Moete koristiti
align atribut kako bi poravnali tekst po elji.
Str. 15 od 102
<html>
<head>
<title>Naslovi</title>
</head>
<body>
<p align=center>Ovo je centrirani odlomak.</p>
<p align=right>Ovo je odlomak poravnat u desno</p>
<p align=justify>Ovo je odlomak poravnat s lijeve i desne strane.</p>
</body>
</html>
Str. 16 od 102
U htmlu je mogue postaviti 6 posebnih razina dokumenta koji se odreuju naslovima <h1> <h6>:
<h1> naslov ima font najvee veliine koji se smanjunje na svakom sljedeem (h2, h3), dok
h6 ima najmanji font.
<html>
<head>
<title>Naslovi</title>
</head>
<body>
<h1>Prvi nivo naslova</h1>
<h2>Drugi nivo naslova </h2>
<h3>Trei nivo naslova</h3>
<h4>etvrti nivo naslova</h4>
<h5>Peti nivo naslova</h5>
<h6>esti nivo naslova</h6>
</body>
</html>
Str. 17 od 102
Str. 18 od 102
<html>
<head>
<title>Liste</title>
</head>
<body>
<h1>Stvari koje danas moram napravit</h1>
<ol>
<li>Nahraniti psa</li>
<li> Kupiti cipele</li>
<li>Oprati auto</li>
</ol>
</body>
</html>
Dva razliita atributa kontroliraju prikaz liste s brojevima. Atribut start definira poetni broj u
listi, a atribut type definira stil liste s brojevima.
1: decimalni brojevi
a: mala slova
Str. 19 od 102
<html>
<head>
<title>Liste</title>
</head>
<body>
<h1>Stvari koje danas moram napravit</h1>
<ol start="3" type="i">
<li>Nahraniti psa</li>
<li> Kupiti cipele</li>
<li>Oprati auto</li>
</ol>
</body>
</html>
Str. 20 od 102
<html>
<head>
<title>Liste s oznakama</title>
</head>
<body>
<h1>Stvari koje danas moram napravit</h1>
<ul>
<li>Nahraniti psa</li>
<li>Kupiti cipele</li>
<li>Oprati auto</li>
</ul>
</body>
</html>
Str. 21 od 102
<html>
<head>
<title>Liste s oznakama</title>
</head>
<body>
<h1>Stvari koje danas moram napravit</h1>
<ul type="circle">
<li>Nahraniti psa</li>
<li> Kupiti cipele</li>
<li>Oprati auto</li>
</ul>
</body>
</html>
Str. 22 od 102
<html>
<head>
<title>Definicijske liste</title>
</head>
<body>
<h1> Definicijske liste</h1>
<dl>
<dt>HTML</dt>
<dd> Hypertex Markup Language</dd>
<dt>XHTML</dt>
Str. 23 od 102
Str. 24 od 102
Provjerite velika i mala slova (neki web serveri su case sensitive, to znai da
razlikuju velika i mala slova).
Provjerite ekstenziju (ako URL vaeg linka koristi bios.htm, a pravo ime datoteke je
bios.html, link nee raditi).
URL radi slino kao vaa potanska adresa. Svaka komponenta pomae u definiranju lokacije
Internet stranice ili resursa:
Put www.tvinx.com/folder: Imenuje slijed foldera kroz koje morate navigirati kako bi
doli do eljene datoteke.
apsolutna veza,
relativna veza
Str. 25 od 102
<html>
<head>
<title>Apsolutna veza</title>
</head>
<body>
<h1>Stranica Tehnikog veleuilita u Zagrebu</h1>
Ova veza vodi na <a href="http://www.tvz.hr">www.tvz.hr</a> stranicu
</body>
</html>
Str. 26 od 102
<html>
<head>
<title>Relativna veza</title>
</head>
<body>
<h1>Stranica Tehnikog veleuilita u Zagrebu</h1>
Ovo je relativna veza <a href="stranica_druga.htm"> relativna veza</a>.
</body>
</html>
Str. 27 od 102
proraunske tablice,
PDF-ove,
kompresirane datoteke,
multimediju.
Takvim datotekama moramo pristupiti preko interneta. One posjeduju svoj URL. Bilo koja
datoteka na Internet stranici (bez obzira na tip datoteke) moe se linkati preko URL-a.
Ako elimo omoguiti korisnicima da preuzmu PDF, DOC, ZIP datoteku omoguit emo to
sljedeim kodom.
<html>
<head>
<title>HTML resursi</title>
</head>
<body>
<h1>HTML resursi</h1>
<p><a href=arhiva.zip>Arhiva podataka</a></p>
<p><a href=dokument.pdf>PDF dokument</a></p>
<p><a href=dokument.doc>DOC dokument</a></p>
</body>
</html>
Str. 28 od 102
Link na e-mail adresu moe automatski otvoriti novi e-mail upuen eljenoj osobi. Ovo je
odlian nain kako pomo korisnicima da vam poalju e-mail s komentarima i eljama.
E-mail element koristi standardni sidrini element i href atribut:
<html>
<head>
<title> HTML resursi</title>
</head>
<body>
<h1>HTML resursi</h1>
<p>Poaljite mi poruku na ovaj <a href="mailto:kontakt@mojastranica.com">e-mail</a>.</p>
</body>
</html>
Str. 29 od 102
1.14 Slike
Slike se koriste kako bi korisnicima prenijeli korisne informacije, za navigaciju stranice, te da
bi poboljali openiti izgled stranice. Kada se slike paljivo i ispravno koriste, one stranici
daju vizualno bolji izgled, no ako se krivo koriste, mogu stranicu uiniti neitljivom.
Slike se mogu kreirati i spremiti u mnogo razliitih formata, ali svega nekoliko njih je stvarno
prikladno za slike koje namjeravamo staviti na Internet i koje su kompatibilne sa svim
operacijskim sustavima i raunalima:
Graphics Interchange Format (GIF) gif slike manje su od slika ostalih formata,
podravaju samo do 256 boja i pogodne su za jednostavnije slike.
Joint Photographic Experts Group (JPEG) jpeg slike podravaju 24 bitne boje i
kompleksne slike, poput fotografija.
<html>
<head>
<title>Postavljanje slika</title>
</head>
<body>
<h1>Logo TVZ-a</h1>
<p>Na ovoj stranici elimo predstaviti logo TVZ-a</p>
<img src="images/logo-tvz.jpg" />
</body>
</html>
Internet preglednik e zamjeniti <img /> element sa slikom kojoj je vrijednost src atributa
images/logo-tvz.jpg (putanja prema slici).
Str. 31 od 102
<html>
<head>
<title>Dodavanje alternativnog teksta</title>
</head>
<body>
<h1>Logo TVZ-a</h1>
<p>Na ovoj stranici elimo predstaviti logo TVZ-a</p>
<img src="images/logo-tvz.jpg" alt="TVZ logo" />
</body>
</html>
Str. 32 od 102
<html>
<head>
<title>Odreivanje veliine slike</title>
</head>
<body>
<h1>Logo TVZ-a</h1>
<p>Logo TVZ-a sada ima dimenziju slike 150x70px</p>
<img src="images/logo-tvz.jpg" width="150" height="70" alt="TVZ logo" />
</body>
</html>
Str. 33 od 102
<html>
<head>
<title>Postavljanje okvira slike</title>
</head>
<body>
<h1>Logo TVZ-a</h1>
<p>Logo TVZ-a sada ima dimenziju slike 150x70px i okvir 3px.</p>
<img src="images/logo-tvz.jpg" width="150" height="70" alt="TVZ logo" border="3" />
</body>
</html>
Str. 34 od 102
<html>
<head>
<title>Poravnavanje slike u odnosu na tekst</title>
</head>
<body>
Str. 35 od 102
<html>
<head>
<title>Razmak slike u odnosu na tekst</title>
Str. 36 od 102
1.15 Tablice
Tablice slue kako bi podatke rasporedili u mreu i uinili njihovu analizu jednostavnijom. U
HTML-u one imaju ulogu kontrole rasporeda podataka na stranici. U tablice se moe staviti
tekst, slika, link...
Sva kompleksnost HTML tablica dolazi iz tri osnovna elementa:
Str. 37 od 102
Granice: svaka osnovna tablica mora imati 4 granine linije (zida) koje ine
pravokutnik
Raspon elija: Unutar 4 linije koje okruuju eliju, moemo brisati ili dodavati zidove
elije
Tablica <table>
Tag <table> i njegov kod nalaze se izmeu <body> tagova u dokumentu. No takoer ih
moemo koristiti izmeu veine blok elemenata, te izmeu <td> i <th> tagova za gnjeenje
tablica. Sljedei kod stvara jednostavnu tablicu sa dva retka i dva stupca.
<html>
<head>
<title>Izrada tablica</title>
</head>
<body>
<h1>Adresar :: Ime i prezime</h1>
<table border="1">
<tr>
<td> Ime </td>
<td> Prezime </td>
</tr>
<tr>
<td> August</td>
<td> Cesarec </td>
</tr>
</table>
</body>
</html>
Str. 38 od 102
Ako u jednoj eliji elimo imati vie redaka i stupaca, trebamo dodati atribut koji e internet
pregledniku govoriti u kojoj eliji e se granjanje dogaati. Broj u atributu odgovara broju
redaka ili stupaca koje elimo da elija prikazuje. To se zove premoivanje. Premoivanje
nam omoguuje da se sadraj jedne elije rasporedi preko nekoliko elija ignorirajui zidove
elije. Za premoivanje elija koristimo sljedee atribute:
<html>
<head>
<title>Izrada tablice</title>
</head>
<body>
<h1>Adresar :: podaci o stanovanju</h1>
<table border="1">
Str. 39 od 102
Rubna linija tablice definira vanjski rub tablice, odnosno border. Internet preglednik e
tablicu bez definiranog atributa border prikazati sa rubne linije debljine 1px. Ako elimo
obrub tablice promijeniti moramo dodati atribut border i definirat njegovu debljinu.
Za HTML tablicu rubna linija se odnosi na:
Str. 40 od 102
Da bi ukljuili ili iskljuili rubne linije, dodajemo "border" atribut u <table> poetni tag.
Vrijednost border atributa definira debljinu rubne linije u pikselima, npr. border="5",
postavlja liniju debljine 5 px, a boder="0" iskljuuje rubnu liniju.
<html>
<head>
<title>Izrada tablice</title>
</head>
<body>
<h1>Popis proizvoda u trgovini</h1>
<table border="0">
<tr>
<td> Proizvod</td>
<td> Model </td>
<td> Cijena </td>
</tr>
<tr>
<td> Printer</td>
<td> HP InkJet</td>
<td> 300 kn </td>
</tr>
</table>
</body>
</html>
Str. 41 od 102
Veina Internet preglednika odredi irinu elija prema sadraju koji se u eliji koristi, no
postoji ogranienje za linije i za tekst:
Ako elija sadri puno teksta, ona se proiruje koliko moe do prvog prekida linije ili
do kraja teksta i zbog toga tablica moe izgledati vrlo nepregledno.
irinu i visinu elije internet preglednik odreuje sam na osnovu onoga to se u njima nalazi.
Da bi sami odredili visinu i irinu moramo koristiti atribute width i height. Ovi atributi slue
kako bi podesili irinu za tablicu i pojedine elije. Atributi mogu poprimiti vrijednost u
pixelima ili postocima.
<html>
<head>
<title>Izrada tablice</title>
</head>
Str. 42 od 102
Str. 43 od 102
Vrijednost oba atributa definira se u pikselima. Ove atribute dodajemo u poetni tag <table>:
<html>
<head>
<title>Izrada tablice</title>
</head>
<body>
<h1>Adresar :: slika i napomena</h1>
<table border="2" width="580" cellpading="5" cellspacing="5">
<tr>
<td> Slika</td>
<td> Godite </td>
</tr>
<tr>
<td> <img src="images/august-cesarec.jpg" alt="August Cesarec" /></td>
<td> 1986</td>
</tr>
</table>
</body>
</html>
Str. 44 od 102
left,
right,
center,
justify,
char.
top,
Str. 45 od 102
bottom,
middle,
baseline.
Tablicu, redak ili eliju moete dodatno urediti sa bojom pozadine ili slikom. Atribut bgcolor
odreuje boju, a atribut background odreuje sliku. Koristite ove atribute unutar poetnog
<table>, <tr> ili <td> taga.
<html>
<head>
<title>Izrada tablice</title>
</head>
<body>
<h1>Shopping</h1>
<table border="0" width="300" cellpading="5" cellspacing="5" bgcolor="green">
<tr>
<td>Namirnica</td>
<td>Komada </td>
</tr>
<tr>
<td>Kruh</td>
<td>1 kom</td>
</tr>
</table>
</body>
</html>
Str. 46 od 102
Str. 47 od 102
(x)HTML frameset. Sadri okvire kod koji vam dozvoljava da vie stranice prikaete
unutar istog prozora preglednika.
Svaki valjano konstruirani HTML ili XHTML dokument mora sadrati DTD referencu u
prvoj liniji teksta.
Tip
HTML
Str. 48 od 102
Ime
Transitional
Kod
<!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.01 Transitional//EN"
Strict
HTML
Frameset
XHTML
Transitional
XHTML
Strict
XHTML
Frameset
Str. 49 od 102
WYSIWYG (what you se is what you get) editori, koji su puno napredniji
UltraEdit
HomeSite
BBEdit/TextWrangler
HTML-Kit
Str. 50 od 102
Adobe Dreamweaver
Microsoft Frontpage
Adobe GoLive
HotDog Pro
Ako validator pronae neke probleme, ispravite ih, te dokument ponovno vratimo na
validaciju.
Formalni dokumenti koji opisuju HTML i XHTML nalaze se na W3C ovom web site-u
www.w3.org
Str. 51 od 102
Str. 53 od 102
CSS
Paljivo kontrolirati svaki aspekt prikaza na stranici (odrediti razmak izme linija,
znakova, margine stranica, pozicije slika i drugo).
Moemo osigurati dosljedan dizajn na cijelj internet stranici tako da isti stilski obrazac
koristimo za svaku pojedinu stranicu.
Pomou CSS-a definiramo pravila u stilskom obrascu koji odreuje kako elimo da sadraj
opisan odreenim HTML kodom izgleda i povezujemo stilska pravila i HTML kod.
Koritenjem CSS obrasca moemo kontrolirati bilo koji dio segmenta na Internet stranici:
Opcije okvira (kontrolira okvire povezane sa stranicom, liste, tablice, slike, blok
elemente.
Str. 54 od 102
Ureivanje listi.
Ureivanje margina.
Kontrola padding-a (kontrola koliine praznog prostora oko bilo kojeg blok elemena
na stranici).
Ureivanje tablica.
Ureivanje teksta.
Str. 55 od 102
h1 {color: teal;}
h1 {font-family: Arial;}
h1 {font-size: 36px;}
No, tako velika kolekcija stilsih pravila postaje teka za upotrebu. CSS vam dozvoljava da
kombinirate nekoliko deklaracija u jedno stillsko pravilo koje utjee na karakteristike prikaza
pojedinog selektora:
h1 {
color: teal;
font-family: Arial;
font-size: 36px;
}
Sve deklaracije za h1 selektor su unutar istih vitiastih zagrada ({}) i odvojene su tokazarezom (;). Moemo staviti koliko god hoemo deklaracija u stilsko pravilo, samo trebamo
svaku deklaraciju zavriti s toka-zarezom.
Str. 56 od 102
h1, h2, h3 {
color: teal;
font-family: Arial;
font-size: 36px;
}
Takoer je mogue referencirati viestruke css dokumente unuter jednog HTML dokumenta.
U sluaju koritenja viestrukih stilova, svi e stilovi biti kaskadno poredani unutar novog
virtualnog stila po slijedeim pravilima:
Browser default
Stilska pravila odnose se na odreene dijelove HTML koda. Ako elimo odrediti dio koji se
odnosi samo na paragrafe koji u sebi sadre autorska prava, trebamo nain na koji emo rei
internet pregledniku da to pravilo ima ogranien prostor djelovanja.
Kako bi poblie odredili stilska pravila, kombinirajte class atribut s elementima u HTML
kodu. Slijedei primjeri prikazuju HTML za dvije vrste paragrafa:
Regularni odlomak (bez class atributa)
Str. 57 od 102
<html>
<head>
<title>Rad sa stilskim klasama</title>
</head>
<body>
<h1>Regularni odlomak</h1>
<p>Ovo je regularni odlomak.</p>
</body>
</html>
<html>
<head>
<title>Rad sa stilskim klasama </title>
</head>
<body>
<h1>Regularni odlomak</h1>
Str. 58 od 102
Da bi kreirali stilsko pravilo koje se odnosi samo na "copyright" odlomak, unutar tagova
<head> </head> stavite sljedee:
<style>
p.copyright {
font-family: Arial;
font-size: 12px;
color: white;
background: teal;
}
</style>
Ovo stilsko pravilo odreuje da svi odlomci klase copyright prikau bijeli tekst na tirkiznoj
pozadini arial fontom veliine 12 px.
Str. 59 od 102
body {
background: teal;
color: white;
font-size: 18px;
font-family: Garamond;
margin-left: 72px;
margin-right: 72px;
margin-top: 72px;
}
Ako elimo postaviti stilska pravila za cijeli dokument, moramo ih zadati u body elementu.
<html>
<head>
<title>Rad sa stilskim klasama </title>
<style>
body {
background: teal;
color: white;
font-size: 18px;
font-family: Garamond;
margin-left: 72px;
Str. 60 od 102
Str. 61 od 102
Eksterni stilski obrazac sadri sva vaa stilska pravila u zasebnom tekst dokumentu a koji se
moete referencirati s bilo koje HTML datoteke na site-u. Datoteku morate dravati odvojenu
sa stilskim obrascem, a eksterni stilski obrazac nudi pogodnosti za ukupno odravanje
stranice.
Eksterni stilski obrazac je idealan kada se stil primjenjuje na vie stranica, tako da sa
eksternim stilskim obrascem moemo promijeniti izgled cijele Internet stranice promjenom
samo jedne datoteke. Svaka stranica se povezuje koritenjem <link> tag-a. Tag ide unutar
<head> dijela HTML dokumenta ili unutar procesne instrukcije u XML dokumentu.
<html>
<head>
<title>Eksterni stilski obrazac</title>
<link rel="stylesheet" type="text/css" href="mojstil.css" />
<head>
<body>
<!-- Ovdje ide sadraj stranice -->
</body>
</html>
apsolutni link (stilski obrazac koji se ne nalazi na naem ili nekm drugom serveru)
Str. 62 od 102
Interni stilski obrazac smjeten je unutar HTML stranice. Treba dodati stilska pravila u
<style> element u zagavlju dokumenta. Moete ukljuiti stilskih pravila koliko god elite u
interni obrazac.
<html>
<head>
<title>Interni stilski obrazac</title>
<style type="text/css">
body {
background: black;
color: white;
font-size: 16px;
font-family: Arial;
margin-left: 72px;
margin-right: 72px;
margin-top: 72px;}
h1, h2, h3 {
color: teal;
font-family: Arial;
font-size: 36px;
}
p.copyright {
font-family: Arial;
font-size: 12px;
font-color: white;
background: black;
}
.warning {font-family: Arial;
font-size: 16px;
font-color: red;
}
</style>
<head>
Str. 63 od 102
Prednost internog stilskog obrasca je pogodnost da stilska pravila koja se nalaze u istoj
datoteci kao i HTML kod mogu brzo prilagoavati. No ako elimo isti obrazac koristiti za
vie stranica, trebamo ga premjestiti u zasebnu datoteku, odnosno moemo koristiti vanjski
(eksterni) stilski obrazac.
Str. 64 od 102
Inline stilski obrazac koristi se za odreivanje formata teksta za pojedini odlomak, dio
odlomka, rije ili slovo. Ovaj nain formatiranja teksta je loiji za generalno formatiranje
teksta na cijeloj stranici, jer se koristi samo u odreenom tagu.
Moe sadravati sva svojstva CSS-a.
<html>
<head>
<title>Inline stilski obrazac</title>
<head>
<body>
<h1 style="border-bottom: 1px solid green; color: blue;">Primjer inline stilskog obrasca</h1>
<p style="font-size:13px; font-weight:bold;">Tekst koji e poprimiti svojstva inline stilskog
obrasca</p>
</body>
</html>
Str. 65 od 102
h1 {
color: red;
text-align: left;
font-size: 8pt
}
h1 {
text-align: right;
font-size: 20pt
}
Ako stranicu s internim stilski obrascem poveemo s vanjskim stilski obrascem svojstva za h1
e biti:
color: red;
text-align: right;
font-size: 20pt
<html>
<head>
<title>Eksterni i interni stilski obrazac</title>
<link rel="stylesheet" type="text/css" href="mojstil.css" />
<style type="text/css">
h1 {
text-align: right;
font-size: 20pt
}
</style>
Str. 66 od 102
Str. 67 od 102
Boje
preko imena,
kombinacijom slova i brojeva (brojevi imaju iru paletu boja, ali ih je tee zapamtiti).
Rgb (r, g, b): r, g i b su brojevi izmeu 0 i 255 koji predstavljaju crvenu (red),
zelenu(green) i plavu(blue) boju.
Linkovi
Najea upotreba pseudo klasa u CSS-u je definiranje stilskog pravila za zadani element u
"stablu dokumenta". Ovo je tehniki termin koji znai da internet preglednik gradi
hijerarhijsku reprezentaciju svih elemenata u dokumentu.
Primjer. Link je pseudo klasa koja definira stilska pravila za bilo koji jo neposjeeni link.
Postoji 5 najeih pseudo klasa koje se mogu koristiti s hyperlinkovima (vezama):
4
Str. 68 od 102
Elementima
Klasama
ID-ovima
Link moe biti u vie stanja od jednom. Stilska pravila za linkove uvijek se trebaju napisati
ovim redoslijedom:
:link,
:visited,
:visible,
:focus,
:hover,
:active.
<html>
<head>
<title>Linkovi</title>
<style type="text/css">
Str. 69 od 102
Str. 70 od 102
2.7.3
Pozadina
Odredite selektor (da li se promjena boje odnosi na cijelu pozadinu ili samo na odreeno
podruje)
Osnovna sintaksa za deklaraciju stila je:
selector (background-color: value;)
<html>
<head>
Str. 71 od 102
2.7.4
Fontovi
Kako bi definirali vrstu fonta pomou CSS font-family svojstva trebamo sljedee:
Kako bi odredili da sva zaglavlja prve razine budu napisana fontom verdana, koristite stilsku
deklaraciju na sljedei nain:
Str. 72 od 102
<html>
<head>
<title>Stilovi</title>
<style type="text/css">
h1 {font-family: Verdana, Helvetica, sans-serif;}
</style>
<head>
<body>
<h1>Naslov</h1>
</body>
</html>
Str. 73 od 102
<html>
<head>
<title>Stilovi</title>
<style type="text/css">
body {color: #808000; font-family: Arial, sans-serif; font-size: 85%;}
h1 {text-align: center;}
a {font-family: Courier, "Courier New, monospace;}
</style>
<head>
<body>
<h1>Naslov</h1>
<a href="http://www.tvz.hr">Slubena stranica TVZ-a</a>
</body>
</html>
Str. 74 od 102
<html>
<head>
<title>Stilovi</title>
<style type="text/css">
body {color: #808000; font-family: Arial, sans-serif; font-size: 10pt;}
h1 {font-size: 35pt; }
</style>
<head>
<body>
<h1>Naslov</h1>
<p>Ostali tekst (skrenite pozornost na veliinu teksta unutar odlomka)</p>
</body>
</html>
Str. 75 od 102
Stilska deklaracija koja koristi font-weight svojstvo, a ija vrijednost moe biti jedna od
sljedeeg:
a {font-weight: bold;}
<html>
<head>
Str. 76 od 102
Stilska deklaracija koja koristi font-style svojstvo, a ija vrijednost moe biti jedna od
sljedeeg:
italic
oblique
normal
Str. 77 od 102
p {font-style: italic;}
a {font-weight: bold;}
a:link {color: olive; text-decoration: underline;}
a:visited {color: green; text-decoration: none;}
<html>
<head>
<title>Stilovi</title>
<style type="text/css">
body {color: black; font-family: Arial, Verdana, sans-serif; font-size: 85%;}
p {font-style: italic;}
a {font-weight: bold;}
a:link {color: olive; text-decoration: underline; font-style:italic}
a:visited {color: green; text-decoration: none; font-style: oblique}
</style>
<head>
<body>
<p>Nakoeni tekst</p>
<a href="http://www.tvz.hr">Slubena stranica TVZ-a</a>
</body>
</html>
Str. 78 od 102
Stilska deklaracija koja koristi text-transform svojstvo, a ija vrijednost moe biti jedna od
sljedeeg:
Str. 79 od 102
p {text-transform: uppercase;}
a {font-weight: bold;}
a:link {color: olive; text-decoration: underline; text-transform: capitalize }
a:visited {color: green; text-decoration: none; text-transform: lowercase }
<html>
<head>
<title>Stilovi</title>
<style type="text/css">
body {color: black; font-family: Arial, Verdana, sans-serif; font-size: 85%;}
p {text-transform: uppercase;}
a {font-weight: bold;}
a:link {color: olive; text-decoration: underline; text-transform: capitalize }
a:visited {color: green; text-decoration: none; text-transform: lowercase }
</style>
<head>
<body>
<p>Tekst pisan VELIKIM i malim slovima</p>
<a href="http://www.tvz.hr">Slubena stranica TVZ-a</a>
</body>
</html>
Str. 80 od 102
Stilska deklaracija koja koristi text-decoration svojstvo, a ija vrijednost moe biti jedna od
sljedeeg:
Str. 81 od 102
Selector{text-decoration: value;}
p {text-decoration: underline;}
a {font-weight: bold;}
a:link {color: olive; text-decoration: underline;}
a:visited {color: green; text-decoration: line-through;}
<html>
<head>
<title>Stilovi</title>
<style type="text/css">
body {color: black; font-family: Arial, Verdana, sans-serif; font-size: 85%;}
p {text-decoration: none;}
a {font-weight: bold;}
a:link {color: olive; text-decoration: underline;}
a:visited {color: green; text-decoration: line-through;}
</style>
<head>
<body>
<p>Jedan obian tekst</p>
<a href="http://www.tvz.hr">Slubena stranica TVZ-a</a>
</body>
</html>
Str. 82 od 102
2.7.5
Visina linije odlomka je koliina prostora izmeu linija u odlomku. Da bi promjenili visinu
linije, koristimo svojstvo line-height:
Selector {line-height: value;}
Str. 83 od 102
<html>
<head>
<title>Stilovi</title>
<style type="text/css">
body {color: #808000; font-family: Verdana, sans-serif; font-size: 85%;}
.quotation {font-style: italic; text-indent: 10pt; line-height: 150%;}
</style>
<head>
<body>
<p class="quotation">Tekst br. 1 sa definiranom klasom</p>
<p class="quotation">Tekst br. 2 sa definiranom klasom</p>
</body>
</html>
Str. 84 od 102
2.7.6
Prostor izmeu znakova moemo poveat ili smanjiti pomou sljedeih svojstava:
word-spacing (u pikselima)
letter-spacing (u pikselima)
<html>
<head>
<title>Stilovi</title>
<style type="text/css">
body {color: #808000; font-family: Verdana, sans-serif; font-size: 85%;}
.quotation {font-style: italic; text-indent: 10pt; letter-spacing: 6px;}
</style>
<head>
<body>
Str. 85 od 102
2.7.7
Poravnavanje odreuje jesu li lijeva i desna strana tekstualnog bloka poravnate po lijevoj,
desnoj, lijevoj i desnoj margini ili centrirana u odnosu na blok.
Poravnavanje se definira pomou text-align svojstva. Stilska deklaracija je sljedea:
selector {text-align: value;}
Vrijednost text-align svojstva mora biti jedna od sljedeih kljunih rijei:
Str. 86 od 102
h1 {color: teal; font-family: "Trebuchet MS, Arial, Helvetica, sans-serif; font-weight: 800; font-size:
24pt; line-height: 30 pt; text-align: center}
.quotation {font-style: italic; text-indent: 10pt; text-align: justify;}
<html>
<head>
<title>Stilovi</title>
<style type="text/css">
body {color: #808000; font-family: Verdana, sans-serif; font-size: 85%;}
h1 {color: teal; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight: 800;
font-size: 24pt; line-height: 30 pt; text-align: center}
..justify {font-style: italic; text-indent: 10pt; text-align: justify;}
.right {font-style: italic; text-indent: 10pt; text-align: right;}
</style>
<head>
<body>
<h1>Lorem ipsum</h1>
<p class=" justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur egestas
molestie lorem sit amet ullamcorper. Donec id nisl ac nulla faucibus pellentesque. Fusce enim arcu,
convallis in bibendum eu, sollicitudin vitae odio. Cras malesuada ante non nulla sodales id eleifend
tellus dapibus. Etiam ornare lectus sit amet dui fermentum a posuere ipsum tincidunt. Sed non est nisi.
Integer feugiat vehicula ligula, fermentum consequat orci molestie id. Cras nec lacus et lorem sodales
fringilla. Curabitur at leo velit, ac fermentum lacus. Nam et turpis quis elit mollis ultricies eget quis
nibh. Donec pharetra tellus adipiscing nulla suscipit nec porta lectus pharetra.</p>
<p class="right">Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos. Cras ante felis, vulputate non lobortis id, vehicula sed augue. Mauris faucibus justo arcu.
Mauris congue vulputate faucibus. Nulla sed odio nisi. Morbi semper vestibulum ipsum vel rhoncus.
Suspendisse at felis augue, eu cursus risus. Nulla accumsan luctus molestie.</p>
</body>
</html>
Str. 87 od 102
2.7.8
Za razliku od HTML koda, CSS nam omoguava da definiramo stilove rubnih linija za svaku
liniju pojedinano. Definiranje stila omoguava nam border-style svojstvo.
Selector {border-style: value}
Border-style moe biti jedan od sljedeih:
Dotted
Dashed
Solid
Str. 88 od 102
Double
Groove
Ridge
Inset
Outset
th {border-style: dashed;}
td {border-style: groove;}
<html>
<head>
<title>Stilovi</title>
<style type="text/css">
body {color: #094ca1; font-family: Verdana, sans-serif; font-size: 12pt;}
th {border-style: dashed; color: green}
td {border-style: groove;}
</style>
<head>
<body>
<table>
<tr>
<th>Ime</th>
<th>Prezime</th>
<th>Godina roenja</th>
</tr>
<tr>
<td>Pero</td>
<td>Peri</td>
<td>1989</td>
</tr>
</table>
</body>
Str. 89 od 102
<html>
<head>
<title>Stilovi</title>
<style type="text/css">
body {color: #094ca1; font-family: Verdana, sans-serif; font-size: 12pt;}
Str. 90 od 102
Str. 91 od 102
<html>
<head>
<title>Stilovi</title>
<style type="text/css">
body {color: #094ca1; font-family: Verdana, sans-serif; font-size: 12pt;}
th { border-color: #22a109; border- width: thick; border-style:solid; }
td { border-color: red; border- width: 1px; border-style:solid; }
</style>
<head>
<body>
<table>
<tr>
<th>Ime</th>
<th>Prezime</th>
<th>Godina roenja</th>
</tr>
<tr>
<td>Pero</td>
<td>Peri</td>
<td>1989</td>
</tr>
</table>
</body>
</html>
Str. 92 od 102
Vrijednost border-color moramo definirati koristei ime boje ili njene heksadecimalne
vrijednosti5.
Veina internet preglednika odredi irinu elija po sadraju koji se u eliji koristi, no postoji
ogranienje i za linije i za tekst:
Slike moraju stati unutar prozora internet preglednika. Ako elija sadri puno teksta, ona se
proiruje koliko moe do prvog prekida linije ili do kraja teksta. Zato nam tablica moe
izgledati vrlo nepregledno. Ako ne odredimo irinu i visinu elije, internet preglednik ih
odreuje sam na osnovu onoga to se u njima nalazi. Ako tablicu koristite za formatiranje,
oblikovanje svoje stranice, preporuamo da podesite irinu za tablicu i pojedine elije.
Stilska deklaracija koja se koristi za definiranje irine tablice,retka ili elije je width.
Selector {width: value;}
Str. 93 od 102
<html>
<head>
<title>Stilovi</title>
<style type="text/css">
body {color: #094ca1; font-family: Verdana, sans-serif; font-size: 12pt;}
table { width: 500px; border: 1px solid black;}
</style>
<head>
<body>
<table border="1">
<tr>
<th>Ime</th>
<th>Prezime</th>
<th>Godina roenja</th>
</tr>
<tr>
<td>Pero</td>
<td>Peri</td>
<td>1989</td>
</tr>
</table>
</body>
</html>
Str. 94 od 102
Vrijednost width svojstva mora biti ili "auto", to omoguuje da browser sam podesi potrebnu
irinu, ili mora biti neka apsolutna (vrijednost u pixelima) ili relativna (vrijednost u
postocima) vrijednost.
Za razmak izmeu elija moemo koristiti dvije vrijednosti kako bi definirali prazan prostor.
Kada radimo razmak izmeu elija koristimo padding svojstvo:
Selector {padding: value;}
th { padding: 20px; }
<html>
<head>
<title>Stilovi</title>
<style type="text/css">
body {color: #094ca1; font-family: Verdana, sans-serif; font-size: 12pt;}
th { padding: 20px; border: 1px solid black;}
</style>
Str. 95 od 102
Str. 96 od 102
http://www.w3.org/TR/REC-CSS1
http://www.w3schools.com/css/
9
http://jigsaw.w3.org/css-validator/
8
Str. 97 od 102
Str. 98 od 102
Str. 99 od 102
Literatura
1. Your visual blueprint for building Web sites with XML, CSS, XHTML, XSLT; Rob
Huddleston; Wiley Publishing Inc.; 2007.
2. HTML, XHTML & CSS for Dummies 6th edition; Ed Tittel and Jeff Noble; Wiley
Publishing Inc.; 2008.
3. HTML & XHTML: The Definitive Guide; Chuck Musciano and Bill Kennedy;
O'Reilly; 2009.
4. HTML & CSS: The Complete Reference, Fifth Edition; Thomas A. Powell, McGrawHill Osborne Media; 2010.
5. Head First HTML with CSS & XHTML; Eric Freeman, Elisabeth Freeman; 2005.
6. HTML, XHTML and CSS All-In-One For Dummies; Andrew Harris; 2010.
7. BASIC HTML - A STEP-BY-STEP Guide on How to Creating Your First Website
from Begining to End!;Dan Thompson; 2010.
8. Learning Web Design: A Beginner's Guide to (X)HTML, StyleSheets, and Web
Graphics; Jennifer Niederst Robbins; Aaron Gustafson; 2007.
9. HTML, XHTML, and CSS: Visual QuickStart Guide, MobiPocket; Elizabeth Castro;
2006.
10. Build Your Own Web Site The Right Way Using HTML & CSS, 2nd Edition; Ian
Lloyd; 2008.
11. HTML, XHTML, and CSS: Your visual blueprint for designing effective Web pages;
Rob Huddleston; 2008.
12. Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day:
Includes New HTML5 Coverage (6th Edition); Laura Lemay; Rafe Colburn; 2010.
13. World Wide Web Consortium (W3C) URL: http://www.w3.org
Prilog
Character
Numerical Code
Hex Code
Description
A
A
Capital A
a
a
Lowercase A
À
À
À
Capital A-grave
à
à
à
Lowercase A-grave
Á
Á
Á
Capital A-acute
á
á
á
Lowercase A-acute
Â
Â
Â
Capital A-circumflex
â
â
â
Lowercase A-circumflex
Ã
Ã
Ã
Capital A-tilde
ã
ã
ã
Lowercase A-tilde
Ä
Ä
Ä
Capital A-umlaut
ä
ä
ä
Lowercase A-umlaut
Å
Å
Å
Capital A-ring
å
å
å
Lowercase A-umlaut
Ā
Ā
Capital A-macron
ā
ā
Lowercase A-macron
Ă
Ă
Capital A-breve
ă
ă
Lowercase A-breve
Ą
Ą
Capital A-ogonek
ą
ą
Lowercase A-ogonek
Ǟ
Ǟ
ǟ
ǟ
Ǻ
Ǻ
ǻ
ǻ
Æ
Æ
Æ
Capital AE Ligature
æ
æ
æ
Lowercase AE Ligature
Ǽ
Ǽ
Capital AE Ligature-acute
ǽ
ǽ
Lowercase AE Ligature-acute
B
B
Capital B
b
b
Lowercase B
Ḃ
Ḃ
Capital B-dot
ḃ
ḃ
Lowercase B-dot
C
C
Capital C
c
c
Lowercase C
Ć
Ć
Capital C-acute
ć
ć
Lowercase C-acute
Ç
Ç
Ç
Capital C-cedilla
ç
ç
ç
Lowercase C-cedilla
Č
Č
Capital C-hachek
č
č
Lowercase C-hachek
Ĉ
Ĉ
Capital C-circumflex
ĉ
ĉ
Lowercase C-circumflex
Ċ
Ċ
Capital C-dot
ċ
ċ
Lowercase C-dot
D
D
Capital D
d
d
Lowercase D
Ḑ
Ḑ
Capital D-cedilla
ḑ
ḑ
Lowercase D-cedilla
Ď
Ď
Capital D-hachek
ď
ď
Lowercase D-hachek
Ḋ
Ḋ
Capital D-dot
ḋ
ḋ
Lowercase D-dot
Đ
Đ
Capital D-stroke
đ
đ
Lowercase D-stroke
Ð
Ð
Ð
ð
ð
ð
or
DZ or &498;
DZ or
Dz
Capital DZ Ligature
dz
dz
Lowercase DZ Ligature
or
DŽ or
Dž
DŽ or
Dž
Capital DZ-hachek
dž
dž
Lowercase DZ-hachek
E
E
Capital E
e
e
Lowercase E
È
È
È
Capital E-grave
è
è
è
Lowercase E-grave
É
É
É
Capital E-acute
é
é
é
Lowercase E-acute
Ě
Ě
Capital E-hachek
ě
ě
Lowercase E-hachek
Ê
Ê
Ê
Capital E-circumflex
ê
ê
ê
Lowercase E-circumflex
Ë
Ë
Ë
Capital E-umlaut
ë
ë
ë
Lowercase E-umlaut
Ē
Ē
Capital E-macron
ē
ē
Lowercase E-macron
Ĕ
Ĕ
Capital E-breve
ĕ
ĕ
Lowercase E-breve
Ę
Ę
Capital E-ogonek
ę
ę
Lowercase E-ogonek
Ė
Ė
Capital E-dot
ė
ė
Lowercase E-dot
Ʒ
Ʒ
Capital Ezh
ʒ
ʒ
Lowercase Ezh
Ǯ
Ǯ
Capital Ezh-hachek
ǯ
ǯ
Lowercase Ezh-hachek
F
F
Capital F
f
f
Lowercase F
Ḟ
Ḟ
Capital F-dot
ḟ
ḟ
Lowercase F-dot
ƒ
ƒ
Lowercase F-hook
ff
ff
Lowercase FF Ligature
fi
fi
Lowercase FI Ligature
fl
fl
Lowercase FL Ligature
ffi
ffi
ffl
ffl
ſt
ſt
Lowercase FT Ligature
G
G
Capital G
g
g
Lowercase G
Ǵ
Ǵ
Capital G-acute
ǵ
ǵ
Lowercase G-acute
Ģ
Ģ
Capital G-cedilla
ģ
ģ
Lowercase G-cedilla
Ǧ
Ǧ
Capital G-hachek
ǧ
ǧ
Lowercase G-hachek
Ĝ
Ĝ
Capital G-circumflex
ĝ
ĝ
Lowercase G-circumflex
Ğ
Ğ
Capital G-breve
ğ
ğ
Lowercase G-breve
Ġ
Ġ
Capital G-dot
ġ
ġ
Lowercase G-dot
Ǥ
Ǥ
Capital G-stroke
ǥ
ǥ
Lowercase G-stroke
H
H
Capital H
h
h
Lowercase H
Ĥ
Ĥ
Capital H-circumflex
ĥ
ĥ
Lowercase H-circumflex
Ħ
Ħ
Capital H-stroke
ħ
ħ
Lowercase H-stroke
I
I
Capital I
i
i
Lowercase I
Ì
Ì
Ì
Capital I-grave
ì
ì
ì
Lowercase I-grave
Í
Í
Í
Capital I-acute
í
í
í
Lowercase I-acute
Î
Î
Î
Capital I-circumflex
î
î
î
Lowercase I-circumflex
Ĩ
Ĩ
Capital I-tilde
ĩ
ĩ
Lowercase I-tilde
Ï
Ï
Ï
Capital I-umlaut
ï
ï
ï
Lowercase I-umlaut
Ī
Ī
Capital I-macron
ī
ī
Lowercase I-macron
Ĭ
Ĭ
Capital I-breve
ĭ
ĭ
Lowercase I-breve
Į
Į
Capital I-ogonek
į
į
Lowercase I-ogonek
İ
İ
Capital I-dot
ı
ı
Lowercase I-dotless
IJ
IJ
Capital IJ Ligature
ij
ij
Lowercase IJ Ligature
J
J
Capital J
j
j
Lowercase J
Ĵ
Ĵ
Capital J-circumflex
ĵ
ĵ
Lowercase J-circumflex
K
K
Capital K
k
k
Lowercase K
Ḱ
Ḱ
Capital K-acute
ḱ
ḱ
Lowercase K-acute
Ķ
Ķ
Capital K-cedilla
ķ
ķ
Lowercase K-cedilla
Ǩ
Ǩ
Capital K-hachek
ǩ
ǩ
Lowercase K-hachek
ĸ
ĸ
Small Capital K
L
L
Capital L
l
l
Lowercase L
Ĺ
Ĺ
Capital L-acute
ĺ
ĺ
Lowercase L-acute
Ļ
Ļ
Capital L-cedilla
ļ
ļ
Lowercase L-cedilla
Ľ
Ľ
Capital L-hachek
ľ
ľ
Lowercase L-hachek
Ŀ
Ŀ
ŀ
ŀ
Ł
Ł
Capital L-stroke
ł
ł
Lowercase L-stroke
or
LJ or
Lj
LJ or
Lj
Capital LJ Ligature
lj
lj
Lowercase LJ Ligature
M
M
Capital M
m
m
Lowercase M
Ṁ
Ṁ
Capital M-dot
ṁ
ṁ
Lowercase M-dot
N
N
Capital N
n
n
Lowercase N
Ń
Ń
Capital N-acute
ń
ń
Lowercase N-acute
Ņ
Ņ
Capital N-cedilla
ņ
ņ
Lowercase N-cedilla
Ň
Ň
Capital N-hachek
ň
ň
Lowercase N-hachek
Ñ
Ñ
Ñ
Capital N-tilde
ñ
ñ
ñ
Lowercase N-tilde
ʼn
ʼn
Lowercase N-apostrophe
(before)
Ŋ
Ŋ
Capital Eng
ŋ
ŋ
Lowercase Eng
or
NJ or
Nj
NJ or
Nj
Capital NJ Ligature
nj
nj
Lowercase NJ Ligature
O
O
Capital O
o
o
Lowercase O
Ò
Ò
Ò
Capital O-grave
ò
ò
ò
Lowercase O-grave
Ó
Ó
Ó
Capital O-acute
ó
ó
ó
Lowercase O-acute
Ô
Ô
Ô
Capital O-circumflex
ô
ô
ô
Lowercase O-circumflex
Õ
Õ
Õ
Capital O-tilde
õ
õ
õ
Lowercase O-tilde
Ö
Ö
Ö
Capital O-umlaut
ö
ö
ö
Lowercase O-umlaut
Ō
Ō
Capital O-macron
ō
ō
Lowercase O-macron
Ŏ
Ŏ
Capital O-breve
ŏ
ŏ
Lowercase O-breve
Ø
Ø
Ø
Capital O-slash
ø
ø
ø
Lowercase O-slash
Ő
Ő
ő
ő
Ǿ
Ǿ
ǿ
ǿ
Œ
Œ
Œ
Capital OE Ligature
œ
œ
œ
Lowercase OE Ligature
P
P
Capital P
p
p
Lowercase P
Ṗ
Ṗ
Capital P-dot
ṗ
ṗ
Lowercase P-dot
Q
Q
Capital Q
q
q
Lowercase Q
R
R
Capital R
r
r
Lowercase R
Ŕ
Ŕ
Capital R-acute
ŕ
ŕ
Lowercase R-acute
Ŗ
Ŗ
Capital R-cedilla
ŗ
ŗ
Lowercase R-cedilla
Ř
Ř
Capital R-hachek
ř
ř
Lowercase R-hachek
ɼ
ɼ
S
S
Capital S
s
s
Lowercase S
Ś
Ś
Capital S-acute
ś
ś
Lowercase S-acute
Ş
Ş
Capital S-cedilla
ş
ş
Lowercase S-cedilla
Š
Š
Capital S-hachek
š
š
Lowercase S-hachek
Ŝ
Ŝ
Capital S-circumflex
ŝ
ŝ
Lowercase S-circumflex
Ṡ
Ṡ
Capital S-dot
ṡ
ṡ
Lowercase S-dot
ſ
ſ
Lowercase S-long
ß
ß
ß
Lowercase SZ Ligature
T
T
Capital T
t
t
Lowercase T
Ţ
Ţ
Capital T-cedilla
ţ
ţ
Lowercase T-cedilla
Ť
Ť
Capital T-hachek
ť
ť
Lowercase T-hachek
Ṫ
Ṫ
Capital T-dot
ṫ
ṫ
Lowercase T-dot
Ŧ
Ŧ
Capital T-stroke
ŧ
ŧ
Lowercase T-stroke
Þ
Þ
Þ
Capital Thorn
þ
þ
þ
Lowercase Thorn
U
U
Capital U
u
u
Lowercase U
Ù
Ù
Ù
Capital U-grave
ù
ù
ù
Lowercase U-grave
Ú
Ú
Ú
Capital U-acute
ú
ú
ú
Lowercase U-acute
Û
Û
Û
Capital U-circumflex
û
û
û
Lowercase U-circumflex
Ũ
Ũ
Capital U-tilde
ũ
ũ
Lowercase U-tilde
Ü
Ü
Ü
Capital U-umlaut
ü
ü
ü
Lowercase U-umlaut
Ů
Ů
Capital U-ring
ů
ů
Lowercase U-ring
Ū
Ū
Capital U-macron
ū
ū
Lowercase U-macron
Ŭ
Ŭ
Capital U-breve
ŭ
ŭ
Lowercase U-breve
Ų
Ų
Capital U-ogonek
ų
ų
Lowercase U-ogonek
Ű
Ű
ű
ű
V
V
Capital V
v
v
Lowercase V
W
W
Capital W
w
w
Lowercase W
Ẁ
Ẁ
Capital W-grave
ẁ
ẁ
Lowercase W-grave
Ẃ
Ẃ
Capital W-acute
ẃ
ẃ
Lowercase W-acute
Ŵ
Ŵ
Capital W-circumflex
ŵ
ŵ
Lowercase W-circumflex
Ẅ
Ẅ
Capital W-umlaut
ẅ
ẅ
Lowercase W-umlaut
X
X
Capital X
x
x
Lowercase X
Y
Y
Capital Y
y
y
Lowercase Y
Ỳ
Ỳ
Capital Y-grave
ỳ
ỳ
Lowercase Y-grave
Ý
Ý
Ý
Capital Y-acute
ý
ý
ý
Lowercase Y-acute
Ŷ
Ŷ
Capital Y-circumflex
ŷ
ŷ
Lowercase Y-circumflex
Ÿ
Ÿ
Ÿ
Capital Y-umlaut
ÿ
ÿ
ÿ
Lowercase Y-umlaut
Z
Z
Capital Z
z
z
Lowercase Z
Ź
Ź
Capital Z-acute
ź
ź
Lowercase Z-acute
Ž
Ž
Capital Z-hachek
ž
ž
Lowercase Z-hachek
Ż
Ż
Capital Z-dot
ż
ż
Lowercase Z-dot
#RGB kod
Black
#000000
Silver
#C0C0C0
White
# FFFFFF
Gray
#808080
Maroon
#800000
Red
#FF0000
Purple
#800080
Fuchsia
#FF00FF
Green
#008000
Lime
#00FF00
Olive
#808000
Yellow
#FFFF00
Navy
#000080
Blue
#0000FF
Teal
#008080
Aqua
#00FFFF
Boja
Background Properties
Property
backgroundattachment
backgroundcolor
backgroundimage
backgroundposition
backgroundrepeat
background
Declares the
position of a
background image.
Declares how
and/or if a
background image
repeats.
Used as a shorthand
property to set all
the background
properties at once.
URL values.
Lengths or
percentages for the x
and y positions, or
one of the predefined
values:
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
repeat
repeat-x
repeat-y
no-repeat
Examples
div { backgroundattachment:fixed; }
div { backgroundattachment:scroll; }
div { background-color:green;
}
div { color:#00FF00; }
div { backgroundimage:url(images/img.jpg); }
body { backgroundimage:url(img.jpg); }
div { backgroundposition:10px 50px; }
div { backgroundposition:bottom right; }
div { backgroundrepeat:repeat-x; }
div { background-repeat:norepeat; }
Separate values by a
div { background:green
space in the following url(image.jpg) no-repeat fixed
order (those that are
center center; }
not defined will use
inherited or default
div {
initial values):
background:url(image.jpg)
fixed; }
background-color
background-image
background-repeat
backgroundattachment
background-position
Border Properties
Property
bordertop-color
bordertop-style
bordertop-width
bordertop
borderrightcolor
borderright-style
Description
Declares the color
of the top border.
none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
Lengths or the following predefined
values:
thin
medium
thick
Used as a shorthand Separate values by a space in the
property to set all
following order (those that are not
the border-top
defined will use inherited or default
properties at once.
initial values):
border-top-width
border-top-style
border-top-color
Valid color names, RGB values,
hexidecimal notation, or the
predefined value transparent.
none
hidden
dotted
Examples
div { border-topcolor:green; }
div { border-topcolor:#00FF00; }
div { border-topstyle:solid; }
div { border-topstyle:inset; }
div { border-topwidth:2px; }
div { border-topwidth:thin; }
div { bordertop:2px solid
green; }
div { bordertop:thick double
#00FF00; }
div { borderright-color:green;
}
div { borderrightcolor:#00FF00; }
div { borderright-style:solid;
}
borderrightwidth
borderright
borderbottomcolor
borderbottomstyle
borderbottomwidth
dashed
solid
double
groove
ridge
inset
outset
Lengths or the following predefined
values:
thin
medium
thick
Used as a shorthand Separate values by a space in the
property to set all
following order (those that are not
the border-right
defined will use inherited or default
properties at once.
initial values):
border-right-width
border-right-style
border-right-color
Valid color names, RGB values,
hexidecimal notation, or the
predefined value transparent.
none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
Lengths or the following predefined
values:
thin
medium
thick
borderbottom
Used as a shorthand
property to set all
the border-bottom
properties at once.
div { borderright-style:inset; }
div { borderright-width:2px; }
div { borderright-width:thin;
}
div { borderright:2px solid
green; }
div { borderright:thick double
#00FF00; }
div { borderbottomcolor:green; }
div { borderbottomcolor:#00FF00; }
div { borderbottomstyle:solid; }
div { borderbottomstyle:inset; }
div { borderbottomwidth:2px; }
div { borderbottomwidth:thin; }
div { borderbottom:2px solid
green; }
div { border-
borderleft-color
borderleft-style
borderleft-width
borderleft
bordercolor
border-bottom-width
border-bottom-style
border-bottom-color
Valid color names, RGB values,
hexidecimal notation, or the
predefined value transparent.
none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
Lengths or the following predefined
values:
thin
medium
thick
Used as a shorthand Separate values by a space in the
property to set all
following order (those that are not
the border-left
defined will use inherited or default
properties at once.
initial values):
border-left-width
border-left-style
border-left-color
Valid color names, RGB values,
hexidecimal notation, or the
predefined value transparent.
Separate the color for each border by
a space, declaring the colors for the
borders in the following order:
border-top-color
border-right-color
border-bottom-color
border-left-color
Undeclared values work as further
shorthand notation. If only one color
value is declared, all four borders will
use that color. If two colors are
bottom:thick
double #00FF00;
}
div { border-leftcolor:green; }
div { border-leftcolor:#00FF00; }
div { border-leftstyle:solid; }
div { border-leftstyle:inset; }
div { border-leftwidth:2px; }
div { border-leftwidth:thin; }
div { borderleft:2px solid
green; }
div { borderleft:thick double
#00FF00; }
div { bordercolor:green red
blue olive; }
div { bordercolor:green; }
div { bordercolor:green red; }
div { bordercolor:green red
blue; }
borderstyle
borderwidth
border
Used as a shorthand
to declare the
border properties
when all four
borders will have
the same
appearance.
div { border:1px
double green; }
div { border:thin
solid #00FF00; }
border-width
border-style
border-color
cursor
display
auto
crosshair
default
pointer
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help
none
inline
block
list-item
run-in
compact
marker
table
inline-table
table-row-group
table-header-group
table-footer-group
Examples
div { clear:right; }
div { clear:both; }
div { cursor:crosshair; }
div {
cusrsor:url(image.csr);
}
div {
cusrsor:url(image.csr),
pointer; }
div { display:none; }
div { display:inline; }
div { display:marker; }
float
visibility
top
right
bottom
left
position
clip
table-row
table-column-group
table-column
table-cell
table-caption
left
right
none
visible
hidden
collapse
Lengths, percentages,
and the predefined
value auto.
div { float:left; }
div { float:right; }
div { visibility:visible;
}
div { visibility:hidden;
}
div { top:15px; }
div { top:2%; }
Lengths, percentages,
and the predefined
value auto.
div { right:15px; }
Lengths, percentages,
and the predefined
value auto.
div { bottom:15px; }
Lengths, percentages,
and the predefined
value auto.
div { left:15px; }
static
relative
absolute
fixed
div { position:absolute;
}
Shapes, or the
div { right:2%; }
div { bottom:2%; }
div { left:2%; }
div { position:relative;
}
div { clip:auto; }
overflow
verticalalign
div { overflow:hidden;
}
div { overflow:scroll; }
span { verticalalign:middle; }
td { vertical-align:top; }
z-index
baseline
sub
super
top
text-top
middle
bottom
text-bottom
Integer values and the
predefined value auto.
div { z-index:2; }
div { z-index:auto; }
Dimension Properties
Property
height
maxheight
minheight
Examples
div { height:200px;
}
div { height:50%;
}
div { maxheight:200px; }
div { maxheight:50%; }
div { minheight:200px; }
width
maxwidth
minwidth
div { minheight:50%; }
div { width:500px;
}
div { width:75%; }
div { maxwidth:500px; }
div { maxwidth:75%; }
div { minwidth:500px; }
div { minwidth:75%; }
Font Properties
Property
fontfamily
font-size
Description
Declares the name of
the font to be used.
Previously set in HTML
via the face attribute in
a <font> tag.
Examples
div { fontfamily:Arial; }
div { fontfamily:Arial,
Helvetica, sans-serif;
}
div { font-size:70%;
}
div { fontsize:0.85em; }
div { fontsize:medium; }
font-sizeadjust
fontstretch
Limited browser
support: Was part of
CSS 2, but not in CSS
2.1. This property may
return in CSS 3.
Declares the aspect
value (font size divided
by x-height).
Limited browser
support: Was part of
CSS 2, but not in CSS
2.1. This property may
return in CSS 3.
Declares the stretch of
the font face.
font-style
fontvariant
fontweight
font
Numeric value
div { font-sizeadjust:0.54; }
div { font-sizeadjust:0.46; }
normal
wider
narrower
ultra-condensed
extra-condensed
condensed
semi-condensed
semi-expanded
expanded
extra-expanded
ultra-expanded
normal
italic
oblique
normal
small-caps
normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900
Used as a shorthand
Separate values by a space in
property to declare all of the following order (those that
the font properties at
are not defined will use
once (except font-sizeinherited or default initial
adjust and font-stretch). values):
font-style
div { fontstretch:narrower; }
div { fontstretch:ultraexpanded; }
div { fontstyle:italic; }
div { fontstyle:oblique; }
div { fontvariant:normal; }
div { fontvariant:small-caps; }
div { fontweight:bolder; }
div { fontweight:200; }
div { font:italic
small-caps bold 1em
1.2em Arial }
div { font:bold
0.8em Verdana }
font-variant
font-weight
font-size
line-height
font-family
counterincrement
counterreset
quotes
Examples
div:before {
content:"some text"; }
div:after {
content:url(page2.html); }
More Information
More Information
More Information
List Properties
Property
list-styletype
Examples
ol { list-style-type:upperroman; }
ul { list-styletype:square; }
list-styleposition
list-styleimage
list-style
markeroffset
lower-greek
lower-latin
upper-latin
hebrew
armenian
georgian
cjk-ideographic
hiragana
katakana
hiragana-iroha
katakana-iroha
Declares the position of inside
the list marker.
outside
Declares an image to
be used as the list
marker.
Shorthand property to
declare three list
properties at once.
URL values.
list-style-type
list-style-position
list-style-image
Declares the marker
Lengths and the predefined
offset for elements with value auto.
a value of marker set
for the display
property.
ol { list-styleposition:inside; }
ul { list-styleposition:outside; }
ul { list-styleimage:url(image.jpg); }
ul { list-style:disc inside
url(image.gif); }
ol { list-style:upperroman outside; }
li:before {
display:marker; markeroffset:5px; }
Margin Properties
Property
margintop
marginright
margin-
Description
Declares the top
margin for the
element.
Declares the
Examples
div { margintop:5px; }
div { margintop:15%; }
div { marginright:5px; }
div { marginright:15%; }
div { margin-
bottom
marginleft
margin
bottom margin
for the element.
Shorthand
property used to
declare all the
margin properties
at once.
value auto.
bottom:5px; }
div { marginbottom:15%; }
div { marginleft:5px; }
div { marginleft:15%; }
div {
margin:5px
12px 4px 7px;
}
div {
margin:5px; }
div {
margin:5px
10px; }
div {
margin:5px
7px 4px; }
Outline Properties
Property
outlinecolor
outlinestyle
outline-
Description
Declares the outline
color.
none
dotted
dashed
solid
double
groove
ridge
inset
outset
Lengths or the following
Examples
div { outlinecolor:green; }
div { outlinecolor:#00FF00; }
div { outlinestyle:solid; }
div { outlinestyle:inset; }
div { outline-
width
outline
the outline.
Used as a shorthand
property to set all the
background properties
at once.
predefined values:
width:2px; }
thin
medium
thick
Separate values by a space in
the following order (those that
are not defined will use
inherited or default initial
values):
div { outlinewidth:thin; }
div { outline:green
solid 2px; }
div {
outline:#00FF00
double thick; }
outline-color
outline-style
outline-width
Padding Properties
Property
paddingtop
paddingright
paddingbottom
paddingleft
padding
Description
Declares the top
padding for the
element.
Declares the
bottom padding
for the element.
Shorthand
property used to
declare all the
margin properties
at once.
Examples
div { paddingtop:5px; }
div { paddingtop:15%; }
div { paddingright:5px; }
div { paddingright:15%; }
div { paddingbottom:5px; }
div { paddingbottom:15%; }
div { paddingleft:5px; }
div { paddingleft:15%; }
div {
padding:5px
12px 4px 7px;
}
div {
padding:5px; }
div {
padding:5px
10px; }
div {
padding:5px
7px 4px; }
Page Properties
Property
marks
orphans
page
page-breakafter
page-breakbefore
page-breakinside
size
widows
auto
landscape
potrait
Integers
Examples
@page {
marks:crop; }
@page {
orphans:2; }
More
Information
More
Information
More
Information
More
Information
More
Information
@page {
widows:2; }
Table Properties
Property
Description
Examples
bordercollapse
borderspacing
captionside
emptycells
tablelayout
Declares the
distance separating
borders (if bordercollapse is
separate).
collapse
separate
table { bordercollapse:collapse; }
table { bordercollapse:separate; }
table { borderspacing:5px; }
table { borderspacing:5px 10px;
}
caption { captionside:top; }
show
hide
caption { captionside:right; }
table { emptycells:show; }
auto
fixed
table { emptycells:hide; }
table { tablelayout:auto; }
table { tablelayout:fixed; }
Text Properties
Property
color
Description
Declares the color of
the text.
Examples
div { color:green; }
div {
color:rgb(0,255,0); }
div { color:#00FF00; }
aqua
black
blue
fuchsia
gray
green
lime
direction
maroon
navy
olive
purple
red
silver
teal
white
yellow
ltr
rtl
div { direction:ltr; }
div { direction:rtl; }
ltr = left-to-right
rtl = right-to-left
Numbers, percentages, lengths,
and the predefined value of
normal.
div { lineheight:normal; }
div { line-height:2em;
}
letterspacing
text-align
textdecoration
Declares the
horizontal alignment
of inline content.
div { lineheight:125%; }
A length (in addition to the
div { letterdefault space) or the predefined spacing:normal; }
value of normal.
div { letterspacing:5px; }
left
right
center
justify
If used on a set of table cells,
this property can be given a
string value to which the text of
each row of the column will be
aligned.
none
underline
overline
line-through
blink
Lengths and percentages.
div { letter-spacing:1px; }
div { text-align:center;
}
div { text-align:right;
}
td { text-align:"."; }
div { textdecoration:none; }
div { textdecoration:underline;
}
div { text-indent:12px;
}
div { text-indent:2%; }
textshadow
Declares shadow
effects on the text.
texttransform
unicodebidi
whitespace
wordspacing
Declares the
capitalization effects
on the letters in the
text.
none
capitalize
uppercase
lowercase
Declares values
relating to
bidirectional text.
May be used in
conjunction with the
the direction
property.
Declares how white
space is handled in
an element.
normal
embed
bidi-override
div { texttransform:uppercase; }
div { texttransform:lowercase; }
div { unicodebidi:embed; }
div { unicodebidi:bidi-override; }
normal
pre
nowrap
div { white-space:pre;
}
div { whitespace:nowrap; }
A length (in addition to the
div { worddefault space) or the predefined spacing:normal; }
value of normal.
div { wordspacing:1.5em; }
Other Properties
Property
azimuth
Description
Declares the angle
that sound travels to
the listener.
Examples
div { azimuth:90deg; }
div { azimuth:behind; }
center-right
right
far-right
right-side
behind
leftwards
rightwards
URL values and the
predefined value none.
div { cueafter:url(sound.wav); }
div { cue-after:none; }
div { cuebefore:url(sound.wav); }
cue-after
Declares an audio
cue to play after an
element.
cue-before
Declares an audio
cue to play before an
element.
cue
Shorthand proerty to
set both cue values at
once.
div { cue-before:none; }
div { cue:url(sound.wav)
url(sound2.wav); }
div { cue:url(sound.wav);
}
cue-before
cue-after
elevation
pause-after
pausebefore
pause
Declares the
elevation of a sound.
Shorthand proerty to
set both pause values
at once.
div { pause-after:100ms;
}
div { pause-after:20%; }
div { pausebefore:100ms; }
div { pause-before:20%;
}
div { pause:200ms
100ms; }
div { pause:100ms; }
pause-before
pause-after
pitch
pitch-range
play-during
Declares a change in
the pitch range of a
voice.
Declares a
background sound to
be played while the
current element is
spoken.
div { pitch-range:50; }
div { pitch-range:99; }
div { playduring:url(music.wav); }
div { playduring:url(music.wav)
repeat; }
div { play-during:none; }
richness
speak
speakheader
speaknumeral
auto
none
Numeric values between 0
and 100 (lower values
have less richness and
higher values have more
richness).
normal
none
spell-out
once
always
digits
continuous
div { richness:50; }
div { richness:0; }
div { speak:none; }
div { speak:spell-out; }
th { speak-header:once; }
th { speak-header:always;
}
div { speaknumeral:digits; }
div { speak-
speakpunctuation
speech-rate
stress
voicefamily
volume
Declares how
punctuation is
spoken.
code
none
numeral:continuous; }
div { speakpunctuation:code; }
div { speakpunctuation:none; }
div { speech-rate:50; }
div { speechrate:medium; }
div { stress:50; }
div { stress:0; }
More Information