CSS Intermediate

Klixova večernja škola - tutoriali, savjeti, praktična rješenja
Post Reply

Da li išta nešto razumije?

Da, Super razumijem
3
75%
Pa onako
0
No votes
Slabo Razumijem
1
25%
NE, Ne Razumijem ama baš nista
0
No votes
 
Total votes: 4

Cookie85
Posts: 1353
Joined: 01/07/2016 20:22

#1 CSS Intermediate

Post by Cookie85 »

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: 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;
}
HTML se odnosi na CSS koristeći atribute id i class.
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>

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,

Code: Select all

p.jam { /* bilo šta */ } 
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:

Code: Select all


h2 {
    color: red;
}

.prviClass {
    color: red;
}

.drugiClass {
    color: red;
}

Možete jednostavno odvojiti selektore sa zarezom ( , ) u jednoj liniji i primijeniti iste osobine za sve, što čini sljedeće:

Code: Select all


h2, .prviClass, .drugiClass {
    color: red;
}
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:

Code: Select all

#top {
    background-color: #ccc;
    padding: 1em
}

#top h1 {
    color: #ff0;
}

#top p {
    color: red;
    font-weight: bold;
}
Ovo uklanja potrebu za class i ID na p i h1 tagove ako je primjenjen na HTML onda izgleda nešto ovako:

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>

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.
Post Reply