Selektori za kreiranje stilova Selektori za kreiranje stilova

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; } h 1 { color: #CC 0000; font-size: 24 px; 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: 11 px; }. prijevod { font-style: italic; font-size: 12 px; } <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: 11 px; } #prijevod { font-style: italic; font-size: 12 px; } • 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: #CC 0000; } a: visited { text-decoration: line-through; color: #0000 CC; }

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: #ffff 00; color: #cc 0000; }

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 • • • h 1, h 2, h 3 { font-family: sans-serif; } h 1 { font-size: 16 px; } h 2 { font-size: 14 px; } h 3 { font-size: 12 px; }

Kraj • Sljedeća lekcija “Formatiranje teksta korištenjem CSS-a”