#1 CSS Intermediate
Posted: 26/08/2018 09:24
Kao HTML Intermediate Tutorial, ovaj CSS Intermediate Tutorial ne bi trebao biti tako težak, već ćemo raditi na osnovama tutorijala za CSS Beginner.
Sadržaj
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:
HTML se odnosi na CSS koristeći atribute id i class.
Moglo bi izgledati ovako:
Razlika između ID i class je da ID može se koristiti za identifikaciju jednog elementa, dok se class može koristiti za identifikaciju više od jednog.
Takođe možete da primjenite selektor na određeni HTML element jednostavnim navođenjem selektora HTML, primjenjuje se samo na stavke elemenata koji imaju class "jam".
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:
Možete jednostavno odvojiti selektore sa zarezom ( , ) u jednoj liniji i primijeniti iste osobine za sve, što čini sljedeće:
Nesting
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:
Ovo uklanja potrebu za class i ID na p i h1 tagove ako je primjenjen na HTML onda izgleda nešto ovako:
To je zato što, razdvajanjem selektora sa prostorom, govorimo “h1 unutar ID top je boje #ff0” i "p unutar ID top je red i bold”.
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.
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.