Źródła stylów#
Rozciąganie stylu#
Style CSS mają jedną ciekawą cechę, o której nie należy zapominać - chodzi o dziedziczenie. Wystarczy określić reguły w elemencie przodka, by wszystkie elementy potomne odziedziczyły te reguły. Dzięki temu ilość wprowadzanych poleceń CSS ulega drastycznemu zmniejszeniu.
Prawidłowe dokumenty (X)HTML budowane są zgodnie z zachowaniem odpowiedniej hierarchii i znaczenia elementów, tzn. zagnieżdżane znaczniki dobierane są ze względu na spełnianą funkcję, a nie domyślną prezentację (którą w każdej chwili można zmienić). HTML5 wprowadza sporo nowych elementów przydatnych do tworzenia struktury strony. Wystarczy wybrać taki element za pomocą selektora CSS i przypisać mu odpowiednie reguły formatujące.
Prosty przykład:
<!DOCTYPE html>
<html>
<head>
<style>
body {font-size: 24px;} /* Domyślne style dla ciała dokumentu i jego potomków */
header {color: green;}
main {color: blue;}
footer {color: fuchsia;}
</style>
</head>
<body>
<header><p>Logo serwisu</p></header>
<main><p>Główna treść serwisu</p></main>
<footer><p>Stopka serwisu</p></footer>
</body>
</html>Zauważ, że style przypisaliśmy dla konkretnych elementów, a i tak odziedziczone zostały przez akapity w nich zawarte. Podobnie w przypadku <body>, którego reguła font-size: 24px rozlała się na wszystkie elementy. Cecha ta jest czymś naturalnym w przypadku CSS-a, ale warto o niej przypomnieć.
Zdarzają się jednak sytuacje, w których planujemy nadać określone style kilku elementom, ale z jakiś powodów nie mają one wspólnego przodka. Mówimy wówczas, że style należy rozciągnąć na wybrane elementy. Nie ma w tym nic nadzwyczajnego, wystarczy wybrać jakiś znacznik HTML i otoczyć nim interesujące nas elementy. Następnie określamy style dla nowego elementu i kłopot rozwiązany.
Który element będzie najodpowiedniejszy? To zależy od sytuacji. W niektórych przypadkach sprawdzą się nowe polecenia strukturalne z HTML5. Warto jedynie wspomnieć o jednej zasadzie; kiedy zależy nam tylko na formatowaniu (bez dodatkowego charakteru semantycznego) najlepiej sprawdzą się:
- Znacznik
<div>w przypadku otaczania dowolnych elementów (blokowych i liniowych). - Znacznik
<span>w przypadku otaczania elementów liniowych.
Wspomniane elementy domyślnie nie mają żadnych zauważalnych stylów (prócz sposobu wyświetlania) i w strukturze HTML nie przenoszą żadnych dodatkowych informacji. Można powiedzieć, że są "neutarlne" dlatego doskonale nadają się do rozciągania stylu na pozostałe znaczniki.
Prosty przykład:
<!DOCTYPE html>
<html>
<head>
<style>
#box {font-size: 24px;}
.local {color: blue;}
</style>
</head>
<body>
<div id="box">
Początek wydzielonego bloku
<p>Akapit w wydzielonym bloku, <span class="local">ze stylami rozciągniętymi na <em>emfazę </em> i <strong>mocną emfazę</strong></span>.</p>
Koniec wydzielonego bloku.
</div>
</body>
</html>Do nowych elementów najlepiej odwoływać się poprzez selektory CSS (jak w powyższym przykładzie), stosowanie stylu lokalnego lub atrybutów HTML jest silnie odradzane. Należy pamiętać również o tym, że im mniej zbędnych elementów w kodzie HTML tym lepiej, dlatego rozciąganie stylu proponowałbym rozważyć na samym końcu.