NAZIV OBJEKTA ZNANJA *
Uvezivanje CSS i HTML
PROLOG
Autor *
Klasifikacija *
Težina *
Ključne reči *
Ko sluša *
Trajanje *
Komentari autora
dr Katarina Kaplarski
osnovni nivo
SADRŽAJ
Apstrakt
Cilj *
Uvodne napomene
Naziv sekcije (1)
Uvezivanje CSS i HTML
Sadržaj sekcije (1)
Postoje tri načina da uvežete CSS stil stranice sa Html-om:
• Externi stil stranice (External style sheet)
• Interni stil stranice (Internal style sheet)
• Umetnuti stil (Inline style)
Eksterni stil stranice
Eksterni stil stranice je idealan kad se stil primenjuje na više stranica. Pomoću eksternog stila stranice
možete promeniti izgled čitavog web sajta menjajući samo jedan fajl. Svaka stranica mora biti
povezana sa stilom stranice koristeći <link> tag. <link> tag se ulazi unutar glavnog dela:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
Eksterni stil stranice može biti napisan u bilo kom programu za obradu teksta. Fajl ne bi trebalo da
sadrži nikakve html tagove. Vaš stil stranice bi trebalo da bude sačuvan sa ekstenzijom .css.
Primer sintakse stila stranice je prikazan ispod:
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
Ne ostavljajte razmake između vrednosti svojstva i samih jedinica! "margin-left:20 px" (umesto
"margin-left:20px") će raditi u Internet Explorer-u, ali ne u Firefox-u ili Operi
Interna stilizovana stranica
Interni stil stranice bi trebalo koristiti onda kada samo jedan dokument ima jedan stil.
Interne stilove definišete u head delu HTML stranice, koristeći <style> tag, na ovaj način:
<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
Umetnuti stilovi (inline style)
Umetnuti stil gubi mnoge prednosti stila stranice, jer meša sadržaj sa HTML prezentacijom. Ovu
metodu koristite umereno!
Da biste koristili umetnute stilove, koristite karakteristike stila u relevantnom tagu. Karakteristika stila
može da sadrži bilo koje CSS svojstvo. Primer pokazuje kako da promenite boju i levu marginu
paragrafa:
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>
Više stilova stranice
Ako su neka svojstva određena za isti selektor u različitim stilovima stranica, vrednosti će biti
nasleđene specifičnije određenog stila stranice.
Na primer, jedan eksterni stil stranice ima ova svojstva za h3 selektor:
h3
{
color:red;
text-align:left;
font-size:8pt;
}
A interni stil stranice ima sledeća svojstva za h3 selektor:
h3
{
text-align:right;
font-size:20pt;
}
Ako stranica sa internim stilom stranice ima i link sa eksternim stilom, svojstva za h3 će biti:
color:red;
text-align:right;
font-size:20pt;
Boja se nasleđuje od eksternog stila stranice, a poravnavanje teksta i veličinu fonta određuje interni
stil stranice.
Mnogostruki stilovi će se postepeno sliti u jedan
Stilovi mogu da budu određeni:
• unutar HTML elementa
• unutar glavnog dela HTML stranice
• u externom CSS fajlu
Savet: Čak i mnogostruke stilizovane eksterne stranice mogu biti korišćeni unutar jednog HTML
dokumenta.
Redosled postepenog slivanja stilova
Koji će stil biti upotrebljen kada je za neki HTML dokument određeno više od jednog stila?
Uopšteno govoreći, možemo da kažemo da će se svi stilovi sliti u jedan novi “virtuelni” stil stranice po
sledećim pravilima, u kojima broj četiri ima najveći prioritet:
1. Default pretraživača
2. Eksterni stil stranice
3. Interni stil stranice (u glavnom delu)
4. Inlajn stil (unutar nekog HTML elementa)
Znači, umetnuti stil (unutar nekog HTML elementa) ima najviši prioritet, što znači da će odneti prevagu
nad stilom određenim u <head> tagu, ili u eksternom stilu stranici, ili u pretraživaču (default vrednost –
unapred određena vrednost).
Napomena: Ako je link prema eksternom stilu stranice postavljen posle internog stila stranice u HTML
<headu>, eksterni stil stranice će odneti prevagu nad internim stilom stranice.
Naziv sekcije (2, ...n)
Sadržaj sekcije (2, ...n)
LINKOVI SA SLIČNIM SADRŽAJEM
Opis
URL
REČNIK POJMOVA I SKRAĆENICA
Termin
Opis
.
PODOBJEKTI ZNANJA (slučajevi korišćenja, procedure korak po korak, reference, itd.)
Naslov podobjekta znanja
Sadržaj podobjekta znanja
OSTALI PREDLOŽENI SADRŽAJ OD STRANE AUTORA
Naslov
Sadržaj
Download

NAZIV OBJEKTA ZNANJA * Uvezivanje CSS i HTML PROLOG Autor