3. vježbe iz web programiranja - odjel za matematiku10.11.2013. 1 2. vježbe iz web programiranja...
TRANSCRIPT
10.11.2013.
1
2. vježbe iz WEB programiranja
CSS
Što je CSS?
• definira KAKO prikazati HTML elemente
• dodan u HTML 4.0 kako bi riješio problem prezentacije sadržaja
• vanjske liste stilova (eng. External StyleSheets) štede vrijeme i smanjuju posao jer se čuvaju u posebnim CSS datotekama
10.11.2013.
2
CSS demo
Kako funkcionira CSS?
• http://www.w3schools.com/css/demo_default.htm
Stilovi riješili veliki problem!!!
• HTML – osmišljen za definiranje sadržaja
• što je s prezentacijom sadržaja?
• izgled dokumenta riješen na strani preglednika bez korištenja tagova za formatiranje
• tagovi poput <font> pojavili se u HTML-u (verziji koju je podržavao Internet Explorer i Netscape Navigator)
• bilo je teško odvojiti sadržaj od prezentacije
10.11.2013.
3
W3C uvodi CSS…
• kao rješenje ovog problema W3C uvodi kaskadne liste stilova (eng. Cascading StyleSheets - CSS) uz HTML 4.0
• stilovi u CSS-u definiraju kako su određeni elementi prikazani (font, boja pozadine, margine, itd.)
• uglavnom se čuvaju u VANJSKIM DATOTEKAMA
• takve stilove zovemo vanjski stilovi
Prednosti
• štede vrijeme stiliziranja jer se jednostavno mogu primijeniti na više stranica
• izmjena u jednoj datoteci, utječe na promjenu stila u svim stranicama koje ga koriste
• kontrola izgleda velikog broja stranica na jednom mjestu
10.11.2013.
4
Kaskadiranje stilova
• mogu biti definirani:
– unutar HTML elementa (taga) – Unutarlinijskistilovi (eng. Inline Style)
– unutar <head> elementa – Interna lista stilova(eng. Internal Style Sheet)
– u vanjskoj datoteci – Eksterna lista stilova (eng. External Style Sheet)
Prioriteti kod kaskadiranja
• stilovi kaskadiraju u novi “virtualni” stil prema sljedećim prioritetima (1-najmanji, 4-najveći)
1. zadani stil preglednika
2. eksterna lista stilova
3. interna lista stilova
4. unutarlinijski stil
• unutarlinijski stil ima najviši prioritet – preklapa interne i eksterne liste stilova te zadane stilove preglednika
10.11.2013.
5
CSS sintaksa
Osnovna sintaksa
• 3 osnovna dijela:
– selektor (HTML element/tag)
– atribut (svojstvo HTML elementa, odnosno selektora)
– vrijednost (vrijednost atributa)
selektor {atribut: vrijednost;}
10.11.2013.
6
Primjeri
• body {color: black;}
• p {font-family:“sans serif”;}
• p {text-align:center;color:red;}
• čitljivo:p {
text-align: center;
color: black;
font-family: arial;
}
Grupiranje
• kada želimo isto svojstvo primijeniti na više selektora (tada ih odvajamo zarezom)
h1,h2,h3,h4,h5,h6 {
color: green;
}
• sva zaglavlja će biti zelene boje
10.11.2013.
7
Klase atributa
• kada želimo definirati različite stilove za isti HTML element
• primjer: želimo imati dvije vrste paragrafa (desno poravnat i centriran)
p.right {text-align: right;}
p.center {text-align: center;}
Primjena klase u HTML dokumentu
<p class="right">
Ovaj odlomak će biti poravnat
desno.
</p>
<p class="center">
Ovaj odlomak će biti centriran.
</p>
10.11.2013.
8
• moguće je ispustiti naziv selektora u definiranju klase
• tada se stil primjenjuje na svim HTML elementima koji imaju tu klasu
.center {text-align: center;}
• moguće primijeniti na sve elemente u kojima ima smisla centrirati tekst
<h1 class="center">
Ovaj naslov će biti
centriran.
</h1>
<p class="center">
Ovaj odlomak će također biti
centriran.
</p>
10.11.2013.
9
Atribut id
• Samo za jedan element s određenim id-om
#intro {
font-size:110%;
font-weight: bold;
color:#0000ff;
background-color: transparent;
}
………
<p id="intro">
Ovaj odlomak će biti plav i podebljan, malo većih slova.
</p>
CSS komentiranje
• preglednik ignorira komentare• komentar je sve što se nalazi između /* i *//* Ovo je komentar */
p
{
text-align: center;
/* Još jedan komentar */
color: black;
font-family: arial
}
10.11.2013.
10
Primjena CSS-a u HTML dokumentima
• Eksterne liste stilova– pogodne za stiliziranje velikog broja stranica
– za povezivanje HTML stranice sa listom koristimo tag<link> (u zaglavlju stranice unutar <head>)
Primjer:
<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css" />
</head>
• može se kreirati i editirati u bilo kojem tekstualnom editoru
• mora imati ekstenziju .css
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image:
url("images/back40.gif");}
10.11.2013.
11
• Interne liste stilova– definirana u zaglavlju stranice unutar <style></style>
<head>
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image:
url("images/back40.gif");}
</style>
</head>
• Unutarlinijski (inline) stil
– najmanje koristi prednosti CSS-a
– odnosi se na pojedinačni HTML element i unosi se kao atribut tog elementa
– preporuka: što manje koristiti
<p style="color: sienna; margin-
left: 20px;">
Ovo je žućkasti odlomak, malo
odvojen s lijeve strane.
</p>
10.11.2013.
12
• Višestruke liste stilova
– eksterni + interni???
– eksterni stil za h3:
h3
{
color: red;
text-align: left;
font-size: 8pt;
}
– interni stil za h3
h3
{
text-align: right;
font-size: 20pt;
}
• rezultat:color: red;
text-align: right;
font-size: 20pt;
• interni stil ima prednost (kaskadiranje)
10.11.2013.
13
ZADACI1. Napravite dokument u kojemu se koristi h1,
h2, h3 i p elementi. Neka svi naslovi budu plave boje, centrirani i u ariel fontu. Paragrafi trebaju biti poravnati s obje strane, tamnozelene boje, italic georgia fonta.
http://www.w3schools.com/cssref/pr_text_color.asp
http://www.w3schools.com/cssref/css_colornames.asp
http://www.w3schools.com/cssref/pr_text_text-align.asp
http://www.w3schools.com/cssref/pr_font_font-family.asp
http://www.w3schools.com/cssref/pr_font_font-style.asp
2. Prepravite dokument iz prvog zadatka tako da prvi paragraf bude tamnocrvene boje i za 20% veći od pretpostavljene veličine, a drugi tamnozelene, prekriženog teksta. Koristite klase velikiCrveni i prekrizeniZeleni. Svi paragrafi moraju biti poravnati s obje strane.
http://www.w3schools.com/cssref/pr_font_font-size.asp
http://www.w3schools.com/cssref/pr_text_text-decoration.asp
10.11.2013.
14
3. Zadržite vizualni izgled dokumenta iz 2. zadatka, no nemojte koristiti klase za oblikovanje paragrafa, nego identifikatore. Prvi paragraf treba imati identifikator prvi, a drugi drugi.