Lekcja 1 - Kaskadowe Arkusze Stylu - Wstęp


HTML pozwala na tworzenie prostych witryn internetowych, nie zezwalając jednak projektantowi na pełną swobodę działania ze
wględu na znaczne ograniczenia dostępnych do sprecyzowania formy dokumentu środków. Wykonane strony WWW są zatem raczej wypadkową możliwości języka i wysiłków projektanta niż rezultatem aspiracji tego ostatniego.

CSS to uzupełnienie jakie pojawiło się w wyniku istnienia znacznie większych potrzeb w zakresie możliwości projektowych i udoskonalania formy stron WWW. Wraz z zastosowaniem JavaScript dostarcza ono nie tylko nowe środki wyrazu, zbliżone do tych, jakie uzyskuje się w programach DTP, ale także interaktywną możliwość manipulacji formą , uzyskując w ten sposób nowe interesujące możliwości komunikacji z użytkownikiem.

Opanowanie kaskadowych arkuszy stylu CSS jest stosunkowo łatwe i wymaga raczej poświęcenia więcej czasu na ćwiczenia i eksperymentowanie niż na wgłębianie się w teorię, która jest stosunkowo prosta. Pojęcie kaskadowych arkuszy wzięło się stąd, że po pierwsze, informacja o stylu może być grupowana w formie niezależnych plików z rozszerzeniami .CSS, po drugie, umieszczać ją można w sekcji HEAD, a wreszcie wpisywać ją można bezpośrednio do znaczników HTML znajdujących się w sekcji BODY.

Do zewnętrznych arkuszy stylu można odwołać się z dowolnego dokumentu HTML, informacje o stylu umieszczone w sekcji head dotyczą wyłącznie strony na której są umieszczone, a informacja o stylu umieszczona w konkretnym znaczniku HTML znajdującym się w sekcji BODY dotyczy wyłącznie bloku lub elementu określonego przez ten znacznik.

Kaskadowość stylów polega na istnieniu naturalnej hierarchi poleceń, zgodnej zresztą prawie całkowicie z kolejnośćią przetwarzania dokumentu przez przeglądarkę. Polega to na tym, że jeśli nie ma informacji o stylu przeglądarka zastosuje wartości domyślne.
Jeśli istnieje plik zewnętrzny i odwołanie do niego, przeglądarka odczyta i zastosuje styl zewnętrzny. Czytając kod źródłowy dokumentu dalej, przeglądarka uzypełni lub zmieni dotychczasowe informacje korzystając ze stylu osadzonego w sekcji head, aby ostatecznie odczytać indywidualną informację stylu wpisanego w wybrane przez projektanta znaczniki HTML i uzupełnić lub zmodyfikować informację dotyczącą elementu lub bloku obsługiwanego przez ten znacznik.

Jak widzimy istnieja tutaj trzy poziomy informacji, z których informacja lokana posiada najwyższy priorytet zgodny zresztą z kolejnością przetwarzania dokumentu.

Oprócz tej kaskadowości stosowania stylów, istnieje również mechanizm dziedziczenia własności stylu polegający na tym, że jeśli jakiś blok funkcjonalny lub element informacji o stylu nie posiada przeglądarka powinna zastosować informację o stylu przeznaczona dla w bloku lub elementu nadrzędnego to znaczy zawierającym dany blok lub element. Przykładowo jeśli informacje stylu dla paragrafu nie zostały sprecyzowane, a dla body je sprecyzowano, przeglądarka powinna zastosować je także do paragrafu ponieważ paragraf znajduje sie w body i dziedziczy odpowiednie właściwości stylu z tego bloku.

Niestety dziedziczenie nie zawsze zachodzi prawidłowo we wszystkich przeglądarkach i bezpieczniej jest określić styl dla każdego z bloków i elementów osobno, w przeciwnym razie może zdarzyć się, że przegladarka zamiast skorzystać z zasady dziedziczenia zastosuje domyślną wartość atrybutu HTML. Warto przy tym wiedzieć, że w przypadku konfliktów poleceń dotyczących stylu, oprócz hierarchi wynikającej z większej lub mniejszej "lokalności" polecenia istnieją także dodatkowe priorytety wynikające z użytych metod określania stylu.

dalej