|
Vidjeli smo da je, koristeći jednostavne selektore, lako primijeniti stil na sve istovrsne elemente u stranici. Također smo vidjeli kako možemo, koristeći klasne selektore, primijeniti stil na pojedine elemente na stranici. Međutim, što ako želimo primijeniti stil na sve elemente koji se pojavljuju unutar nekog drugog elementa? Mogli bismo, kao u sljedećem primjeru, svakom takvom elementu dodati klasu:
p {
font-weight: bold;
font-size: 11px;
}
.istakni {
font-size: 12px;
color: purple;
}
<p><b class="istakni">Navigare</b> necesse est,
<b class="istakni">vivere</b>
non est necesse.</p>
Navigare necesse est, vivere non est necesse.
Ovakvo rješenje, iako funkcionalno, zbog prevelike intervencije u HTML kôd nije jako elegantno. CSS nam nudi mnogo bolje rješenje u obliku kontekstnih selektora. Primjerice, ako definiramo selektor p b, on će biti primijenjen na sve elemente b, ali samo ako se u hijerarhijskom stablu nalaze unutar elementa p. Zbog uočavanja razlike, u sljedeći kôd dodan je još selektor za podnaslove:
h6 {
font-weight: normal;
font-size: 11px;
}
p {
font-weight: bold;
font-size: 11px;
}
p b {
font-size: 12px;
color: purple;
}
<h6><b> Navigare</b> necesse est, ...</h6> <p><b> Navigare</b> necesse est, <b> vivere</b> non est necesse.</p>
Navigare necesse est, ...
Navigare necesse est, vivere non est necesse.
Vidljivo je da je ljubičasta boja definirana za element s oznakom <b> primijenjena samo kada se oznaka <b> nalazi unutar oznake <p>, a ne i kad se nalazi unutar neke druge oznake, na primjer <h6>.
-
 U prilogu se nalazi HTML datoteka s pripremljenom strukturom dokumenta. Snimite je na svoje računalo, proučite kôd i pokušajte eksperimentirati mijenjajući primijenjen stil (primjerice veličinu znakova, boje znakova i sl.). Uočite gdje se izgled znakova mijenja, a gdje ne.
|
|
|
