Sadržaj
* Class and ID Selectors: Napravite sopstvene selektore bez potrebe za lepljivim slojem!
* Grouping and Nesting: Svojstva dodeljena više selektora ili selektora unutar selektora.
* Pseudo Classes: Definisanje različitih stanja selektora veze.
* Shorthand Properties: Različite osobine, kao što su granice i margine koji spajaju druga svojstva u jednu.
* Background Images: Pogodi.
* Specificity: Kako će se browser baviti konfliktnim CSS pravilima.
* Display: Određivanje karakteristika kutije.
* Pseudo Elements: Stilovi prvih slova, prvih linija i stavljanjem sadržaja prije i poslije elemenata.
* Page Layout: Plutajuće i pozicionirajuće kutije.
Class and ID Selectors
Za CSS Beginner Tutorial vidjeli smo u HTML selectors oni koji predstavljaju HTML (tag) oznaku.
Takođe možete definisati sopstvene selektore u obliku Class i ID.
Prednost ovoga je da možete imati isti HTML element, ali ga predstaviti različito u zavisnosti od toga class ili ID. U CSS-u class selektor je ime koje prethodi tačka ( . ) i ID selektor je ime koje prethodi znak heš ( # ).
Tako CSS može izgledati nešto poput:
Code: Select all
#top {
background-color: #ccc;
padding: 20px
}
.intro {
color: red;
font-weight: bold;
}
Moglo bi izgledati ovako:
Code: Select all
<div id="top">
<h1>čokoladna sa lješnjakom</h1>
<p class="intro">Ovo je moj recept za pravljenje čokolade čisto sa lješnjakom</p>
<p class="intro">Mmm mm mmmmm</p>
</div>
Takođe možete da primjenite selektor na određeni HTML element jednostavnim navođenjem selektora HTML,
Code: Select all
p.jam { /* bilo šta */ }
Grouping and Nesting
Dva načina na koji možete pojednostaviti svoj kod - HTML i CSS - i olakšati upravljanje njima.
Grouping
Istoj svojini možete dati većem broju selektora bez potrebe ponavljanja.
Na primjer:
Code: Select all
h2 {
color: red;
}
.prviClass {
color: red;
}
.drugiClass {
color: red;
}
Code: Select all
h2, .prviClass, .drugiClass {
color: red;
}
Ako je CSS dobro struktuiran, ne bi trebalo da postoji potreba za korištenjem mnogih ID i class selektora.To je zato što možete odrediti osobine selektora unutar drugih selektora.
Na Primjer:
Code: Select all
#top {
background-color: #ccc;
padding: 1em
}
#top h1 {
color: #ff0;
}
#top p {
color: red;
font-weight: bold;
}
Code: Select all
<div id="top">
<h1>čokoladna sa lješnjakom</h1>
<p>Ovo je moj recept za pravljenje čokolade čisto sa lješnjakom</p>
<p>Mmm mm mmmmm</p>
</div>
Ovo može biti prilično komplikovano (jer može ići na više od dva nivoa, kao što je ovo unutar ove unutrašnjosti unutar ove i sl.) I treba malo prakse.