Przeważnie niewielu web-designer’ów jest świadomych pewnych przydatnych funkcjonalności, które dostarczane są w technologiach przez nich używanych. Często wiedza ta jest tylko domeną profesjonalistów, którzy standardy znają na pamięć. Tak też jest z mechanizmem dziedziczenia w CSS.
Mechanizm dziedziczenia w CSS może być bardzo przydatną rzeczą, gdy w jednym elemencie (np. tagu) mamy zagnieżdżonych parę innych i każdy z nich musi wyglądać lub zachowywać się inaczej, zachowując jednak część cech elementu nadrzędnego (np. taga, w którym się znajdują).
Zacznijmy jednak od podstaw CSS i pewnych oznaczeń, które będą tutaj kluczowe:
1 2 3 | div { width: 100px; } .frame { width: 100px; } #element1 { width: 100px; } |
Są to oznaczenia poszczególnych typów elementów, jakie mogą występować w arkuszach CSS:
- div – w ten sposób oznaczane są właściwości stylu dla konkretnego taga (czyli w tym przypadku dla wszystkich tagów DIV);
- .frame – w ten sposób oznaczane są tagi należące do pewnej klasy (np. <div class=”frame”>…</div>);
- #element1 – w ten sposób z kolei możemy adresować poszczególne tagi poprzez ich ID (np. <div id=”element1″ >…</div>);
Jak działa dziedziczenie w CSS? Zasadniczo wystarczy określić nazwy elementów zagnieżdżonych oddzielając je spacjami, więc mając kod:
1 2 3 4 5 6 7 8 | <div>Main test</div> <div> <span> Test 1 </span> <div class="frame"> Test 2 </div> <span class="frame"> <input id="test" type="text" value="Test 3" /> </span> </div> |
możemy określić charakterystyczne oraz wspólne zestawy elementów stylu:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | div { width: 100px; background-color: red; } /* styl dla pojedyńczego elementu */ div span { /* span jest elementem liniowym, więc width nie jest dziedziczone */ padding-top: 10px; padding-bottom: 10px; color: #FFFFFF; background-color: #000000; } /* styl dla tagów span zagdzieżdzonych w tagach div */ div .frame { /* width dziedziczone z wpisu div */ margin-top: 10px; margin-bottom: 10px; color: #FF0000; background-color: #7F7F7F; } /* styl dla tagów klasy frame zagdzieżdzonych w tagach div */ div span.frame { /* padding dziedziczony z wpisu div span margin dziedziczony z wpisu div .frame reszta jest zastąpiona */ color: #FF0000; background-color: #AFAFAF; } /* styl dla tagów span klasy frame zagdzieżdzonych w tagach div */ div .frame #test { /* margin dziedziczony z wpisu div .frame */ color: #00FF00; background-color: #FFFFFF; } /* styl dla tagów o id="test", zagnieżdżonych w tagach klasy "frame", które z kolei zagnieżdżone są w tagach div */ |
Jak widać kombinacji może być bardzo dużo. Należy jednak pamiętać, że nie wszystkie elementy mogą być dziedziczone w różnych sytuacjach. Przykładem jest wpis div span, w którym nie zostało odziedziczone pole width. Są to specyficzne przypadki, kiedy mamy do czynienia z elementami, które “z natury” nie obsługują pewnych właściwości (w przypadku <span> jest to np. width, który nie jest dziedziczony z uwagi na to, iż element <span> jest elementem liniowym).
Przejdźmy jednak do rezultatów. Pod Firefox’em 3 rezultat jest widoczny poprawnie:
IE7, (znany z kompatybilności ze standardami… NOT! 
) też nie wypadł tak tragicznie, jednak widać różnice w sposobie renderowania stron:
” Należy jednak pamiętać, że nie wszystkie elementy mogą być dziedziczone w różnych sytuacjach. Przykładem jest wpis div span, w którym nie zostało odziedziczone pole width. Są to specyficzne przypadki, których nie udało mi się jeszcze namierzyć, ale jak tylko mi się to uda, to zaktualizuję tego posta.”
SPAN to element liniowy, natomiast DIV to element blokowy, a elementom liniowym nie można nadawać żadnych wymiarów poza chyba line-weight.
Pozdrawiam Marcin
Dzięki za sprostowanie. To jest właśnie jeden z tych przypadków, które miałem na myśli, jednak jako że artykuł koncentruje się głównie wokół CSS, nie miałem czasu pozbierać odpowiednich materiałów na temat części html’owej.
Pozdrawiam,
Piotrek
display: block; załatwia sprawę
Dla potomności opiszę szybko te typy:
display: block; – wyświetlanie elementu w postaci blokowej, zdolnej do zmiany rozmiaru (dzięki ndx) oraz działającej jak element <br/> (przejście do następnej linii po danym elemencie);
display: inline; – wyświetlenie elementu w postaci liniowej, czyli bez zmiany rozmiaru oraz bez przejścia do następnej linii;
display: list-item; – wyświetlenie elementu w postaci składnika listy, efekt podobny w działaniu do taga <li>;
display: none; – brak postaci, czyli ukrycie elementu;
Oczywiście to nie wszystkie wartości elementu. Po resztę zapraszam do specyfikacji W3 tutaj.
Bardzo ładnie napisany artykuł, bardzo mi się podoba.
Ładnie wytłumaczone co, gdzie i dlaczego – bez zadnego bajerowania że ja wiem lepiej itp
Czekam na dalsze artykuły na temat CSS’a.
genialnie opisane, to któraś z kolei stron ktora odwiedzam i tutaj logicznie wytlumaczone. bravo
Dzięki za ten wpis, dziedziczenie już nie kryje tajemnic – wreszcie mogę zacząć optymalizować plik JS. Wcześniej wszystkie moje szablony składały się tylko i wyłącznie z #nazwa. Naprawdę przydatne!