CSS selektori HTML elemenata
Definisanje CSS selektora može biti prilično komplikovan zadatak, koji ćemo savladati kroz naredne lekcije u više etapa. Najpre ćemo se pozabaviti osnovnim selektorima HTML elemenata. Ovde ćemo predstaviti univerzalni selektor i selektor prema HTML oznaci, ili kraće HTML selektor.
Univerzalni selektor
Univerzalni selektor je onaj od koga sve počinje. To je selektor koji se odnosi na svaki HTML element! Navodi se retko, ali se često podrazumeva. Obično ga koristimo na početku kako bismo svim elementima odredili neki bazični stil. Na primer, pomoću univerzalnog selektora svim HTML elementima u "jednom dahu" možemo isključiti margine.
Za univerzalni selektor koristimo zvezdicu. To znači da bi njegova definicija izgledala ovako:
* {
deklaracija;
deklaracija;
...
}
Pogledajte kako smo u primeru isprobali univerzalni selektor.
Univerzalni selektor
Najpre ćemo definisati CSS. Ovo je vrlo jednostavan stil sa univerzalnim selektorom i služi da svakom elementu isključi margine i dodeli crvenu boju. Potom sledi HTML.
<style>
* {
color: red;
margin: 0px;
}
</style>
<h1>Naslov</h1>
<p>Ovo je tekst u prvom pasusu.</p>
<p>
Ovo je tekst u drugom pasusu. Kao što vidite, svaki element ima tekst crvene boje,
a nema nikakvog razmaka jer su margine svima isključene.
</p>
Rezultat bi izgledao ovako:
HTML selektor
Definisanje HTML selektora je bar lako - kao selektor navodimo naziv HTML elementa na koji se stil primenjuje. Tako dobijamo selektor koji se odnosi na sve HTML elemente sa zadatom oznakom.
To bi značilo, da ako kao selektor navedemo npr. oznaku p, CSS deklaracija pod tim selektorom će se odnositi na sve pasuse na stranici. Ako bismo želeli da se stil primeni na sam dokument, pogađate, kao selektor bismo naveli body.
oznaka {
...
}
<element>...</element>
<oznaka>...</oznaka>
<oznaka>...</oznaka>
<element>...</element>
Pogledajte primer da biste videli kako sve ovo funkcioniše.
HTML selektori
Ovo je uobičajena situacija kada kreiramo web stranice. Na jednom posebnom mestu imamo sav CSS a na drugom mestu HTML:
<head>
<style>
h1 {
color: red;
font-size: 14pt;
}
p {
color: blue;
font-size: 9pt;
}
</style>
</head>
<body>
<h1>Naslov</h1>
<p>Ovo je tekst u prvom pasusu. Na njega se primenjuje stil za pasuse.</p>
<p>Ovo je tekst u drugom pasusu. I na njega se takođe primenjuje taj isti stil.</p>
</body>
Rezultat bi izgledao ovako:
Univerzalni selektor i HTML selektori
CSS sa HTML-om:
<style>
p {
color: red;
font-size: 9pt;
}
* {
color: blue;
}
</style>
<h1>Naslov</h1>
<p>
Ovo je tekst u prvom pasusu. Na njega se primenjuje stil za pasuse, bez obzira
što je plava boja definisana u univerzalnom selektoru posle P selektora.
</p>
<div>
Ovo je tekst u blok elementu. I na njega utiču podešavanja univerzalnog selektora.
</div>
Dakle, prvo se svi elementi formatiraju prema atributima zadatim u univerzalnom selektoru, gde god se on nalazio. Tek onda se pojedini elementi formatiraju prema njihovim selektorima.
HTML oznaka style služi za definisanje CSS-a unutar same HTML stranice. Načine uvođenja CSS-a u HTML ćemo objasniti već u sledećoj lekciji.
Ugnježdeni HTML elementi
<style>
section {
color: blue;
font-size: 9pt;
width: 50%;
border: 1px blue solid;
}
div {
color: red;
}
</style>
<!-- HTML kod -->
<section>
<p>Ovo je pasus unutar sekcije.</p>
<div>Ovo je DIV blok unutar sekcije.</div>
<section>Ovo je sekcija unutar sekcije.</section>
</section>
<p>Ovo je pasus van sekcije.</p>
Šta se dogodilo? Sekcija ima podešenu plavu boju teksta, font veličine 9pt, širinu od 50% širine nedređenog elementa i graničnu liniju.
Pasus unutar sekcije je nasledio boju teksta i veličinu slova (jasna je razlika u odnosu na pasus koji je van sekcije). Međutim graničnu liniju i širinu nije nasledio. Jedino što je sam pasus ograničen svojom nadređenom sekcijom, pa tako ni sam ne može biti širi od nje.
Div blok ima svoju boju, pa je tako nasledio samo veličinu slova. Konačno, sekcija unutar sekcije ima sve iste atribute, s tim što i na unutrašnju sekciju utiče širina nadređene sekcije, pa je tako njena širina "polovina od polovine".
Nemojte se nervirati ako ne razumete sve atribute zadate u primeru. Svaki će biti detaljno objašnjen kada za to dođe vreme. Za sada je dovoljno da znamo da width određuje širinu elementa, dok border služi za definisanje granične linije.
U primeru smo pokazali i neke koncepte o tome kako se CSS primenjuje na elemente. Više o "jačini" selektora, kao i o redosledu i nasleđivanju, možete pročitati u lekciji o pravilima primene CSS-a i specifičnosti selektora.