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 primijenjen2. 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:activea: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”