Dziedziczenie w CSS
Dzięki dziedziczeniu webmaster może skrócić swoja pracą o nawet
kilkadziesiąt procent bez żadnego uszczerbku na wyglądzie strony.
Dziedziczenie polega na przejmowaniu części cech od "starszego" - zupełnie jak u ludzi. Zobacz na przykład:
p {color: blue;} // 1
p.klasa1 {font-size:8 pt;} // 2
p.klasa2 {font-size:14 pt; } // 3
p.klasa3 {color:red; font-size:8 pt;} // 4
|
Opis:
1 - przypisuję akapitowi, który nie ma klasy, jakieś właściwości. Tak więc wszystkie jego cechy przejdą na pozostałe 'p', nawet takie, które posiadają klasę.
2 - tworzę klasę 'klasa1', która będzie mieć kolor niebieski [blue] odziedziczony po starszym od siebi 'p' i własne cechy, przypisane tylko jej.
3 - tworze kolejną klasę, która ma cechy starszej od siebie 'p', ale także własne cechy.
4 - ta klasa nie odzidziczy nic ze starszej, a to dlatego, że opisałem także tę właściwość, którą miałaby odziedziczyć i zmieniłem jej wartość.
I tu właśnie znajduje się miejsce do popisu dla webmastrerów, którzy mają bzika na punkcie zmniejszania rozmiarów stron. Otóż jeśli masz kilka klas jednego obiektu np. 'p', to nie musisz w każdym opisywać tej samej cechy, starczy, że opiszej ją raz w obiekcie głównym. Wtedy każde dziecko zawiarać będzie automatycznie cechy opisane w obiekcie rodzicu.
czyli przykładowo:
<p>Ten txt jest niebieski</p>
<p class="klasa1"> Ten
txt jest niebieski (odziedziczony kolor) i ma rozmiar 8pt (z klasy)</p>
<p class="klasa2"> Ten
txt jest niebieski (odziedziczony kolor) i ma rozmiar 14pt (z klasy)</p>
<p class="klasa3"> Ten
txt jest czerowny (zerwane więzi:-)) i ma rozmiar 8pt (z klasy obydwa)</p>
|
Schemat dziedziczenia:
Oczywiście jest to tylko przykładowy, bardzo pobieżny schemat, bo przycież znaczników html jest dużo więcej i ogólnie jest to trochę bardziej złożone, ale sądzę, ze teraz jesteś i tak już skołowany, więc chyba to starczy.
|
