Transcript Primjer

Selektori za kreiranje stilova
Selektori za kreiranje stilova
• Selektor identificira element ili dio HTML
stranice na koji se primjenjuje navedeni
stil
• selector { property: value; }
1. selector-osnovni element CSS-a koji definira izgled
svih elemenata na koje je primijenjen
2. property-odgovarajuće svojstvo stila određenog
elementa kao što su boja fonta, boja pozadine, vrsta
fonta, …
3. value-vrijednost odgovarajućeg svojstva stila, navodi
se iza znaka :
Selektori za kreiranje stilova
•
•
•
•
•
Primjer:
body{
background-color: gray;
color: red;
}
Selektori za kreiranje stilova
Podjela selektora:
• jednostavni selektori
• klasni selektori
• ID selektori
• kontekstni selektori
• pseudoklase
Jednostavni selektori
• Jednostavni selektori (eng. type selectors) najjednostavniji su od
svih selektora.
• Odgovaraju imenu html oznake i primjenjuju se na svaku istovrsnu
oznaku u dokumentu.
p{
font-family:Verdana, Helvetica, sans-serif;
}
h1 {
color:#CC0000;
font-size:24px;
font-weight:bold;
}
• Prednost korištenja ovakvog tipa selektora je u tome što, osim
samog povezivanja stila s dokumentom, ne zahtijeva intervencije u
html kôd
Klasni selektori
• Selektor za opis razreda (više elemenata)
.izreka {
font-weight:bold;
font-size:11px;
}
.prijevod {
font-style:italic;
font-size:12px;
}
<p class="izreka">Navigare necesse est, vivere non est necesse.</p>
<p class="prijevod">Ploviti je nužno, živjeti nije nužno.</p>
Id selektori
• Umjesto točke, definira se oznakom "#":
#izreka {
font-weight:bold;
font-size:11px;
}
#prijevod {
font-style:italic;
font-size:12px;
}
• Umjesto atributom class
• primjenjuje se atributom id:
<p id="izreka">Navigare necesse est,vivere non est necesse.</p>
<p id="prijevod">Ploviti je nužno,živjeti nije nužno.</p>
Kontekstni selektori
• Iako je funkcionalno, zbog prevelike
intervencije u html kôdu nije jako
elegantno koristiti ovu vrstu selektora.
Pseudoklase
• Pseudoklase :link, :visited
• Izgled neposjećenog linka definira se pseudoklasom
a:link
• Izgled posjećenog linka pseudoklasom
a:visited.
a:link {
text-decoration:none;
color:#CC0000;
}
a:visited {
text-decoration:line-through;
color:#0000CC;
}
Pseudoklase
• Dinamičke pseudoklase :hover, :active
• Prelaskom pokazivača preko linka aktivira se prikaz selektora
a:hover
• od trenutka pritiska tipke miša, pa do otpuštanja tipke, aktivira prikaz
selektora
a:active
a:hover {
background-color:#000;
color:#fff;
}
a:active {
background-color:#ffff00;
color:#cc0000;
}
Pseudoklase
• Da biste dobili željen rezultat, zbog
određenih specifičnosti CSS-a ove
pseudoklase pri definiranju uvijek morate
navesti sljedećim redoslijedom:
• a:link{}
• a:visited{}
• a:hover{}
• a:active{}
Grupiranje selektora
•
•
•
•
•
•
•
•
•
•
•
•
h1, h2, h3 {
font-family:sans-serif;
}
h1 {
font-size:16px;
}
h2 {
font-size:14px;
}
h3 {
font-size:12px;
}
Kraj
• Sljedeća lekcija “Formatiranje teksta
korištenjem CSS-a”