|
Kao što smo već rekli, dobra strana jednostavnih selektora – primjena na sve oznake istog tipa – ujedno može biti i njihov velik nedostatak. Pretpostavimo da želite izraditi stranicu s prijevodima latinskih izreka tako da u jednom paragrafu navedete izreku, u sljedećem prijevod, i tako naizmjence. Da bi posjetitelji lakše razlikovali prijevod od izvornika, željeli biste da tekst u paragrafima s različitim vrstama sadržaja bude različito formatiran.
Možemo definirati ovakav stil:
.izreka {
font-weight: bold;
font-size: 11px;
}
.prijevod {
font-style: italic;
font-size: 12px;
}
te uz primjenu sljedećeg kôda:
<p class=" izreka"> Navigare necesse est,
vivere non est necesse.</p> <p class=" prijevod"> Ploviti je nužno,
živjeti nije nužno.</p> dobiti ovakav rezultat:
Navigare necesse est, vivere non est necesse.
Ploviti je nužno, živjeti nije nužno.
-
 Primjećujete da se pri definiranju selektora piše .naziv, a pri primjeni selektora na paragraf samo naziv.
Drugi način definiranja je oznaka.naziv. Razlika je što se ovako definirani selektori mogu primijeniti samo na oznake istog tipa. Primjerice:
p.izreka {
font-weight: bold;
font-size: 11px;
}
p.prijevod {
font-style: italic;
font-size: 12px;
}
Ovako definirani selektori primjenjuju se jednako kao i prethodni – <p class="naziv"> – ali za razliku od prethodnih, koji se mogu primijeniti na različitim oznakama, ovakvi se mogu primijeniti samo na paragrafe.
Na ovakav način definirali smo klasne selektore i identificirali pojedine paragrafe kao pripadnike jedne, odnosno druge klase.
-
 Uzmite ponovno isti kôd kao u prethodnoj vježbi i kreirajte novi HTML dokument. Koristeći se stilovima nalik na primjere stilova iz ove lekcije, pokušajte različito prikazati pojedine paragrafe.
-
<h1> Lorem ipsum</h1> <p> Lorem ipsum je tekst koji se sastoji
od niza slučajnih riječi bez značenja.
Iako njegove riječi ne znače ništa,
pretpostavlja se da je nastao na temelju
Ciceronovog djela „O krajnostima
dobra i zla”. Ovaj tekst se već
stotinama godina koristi za testiranje
ispisa i punjenje prostora tekstom.</p> <p> "Lorem ipsum dolor sit amet,
consectetur adipisicing
elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat".</p>
- Rješenje
- Prije prelaska na sljedeću lekciju dodajte svojoj stranici još jedan odlomak na hrvatskom i oblikujte ga jednako kao tekst na hrvatskom iz prethodnog zadatka.
|
