Cascading Style Sheets - CSS

Cascading Style Sheets - CSS

Czym są kaskadowe style CSS?


Jest to potężne narzędzie do formatowania stron WWW Kaskadowymi Arkuszami Stylów - Cascading Style Sheets -. Dają one ogromne możliwości manipulowania wyglądem dokumentów i zwiększają efektywność narzędzi. Dodatkowo nie powodują problemów w przeglądarkach, które ich nie obsługują. Styl jest zespołem poleceń formatujących i pozwala zmieniać wygląd pojedynczych elementów strony lub nawet całej serii dokumentów. Jest on dobrze znany ze zwykłych edytorów tekstu, gdzie od dawna zajmuje ważne miejsce. 

Niestety część poleceń styli nie jest interpretowana przez niektóre przeglądarki internetowe lub jest obsługiwana odmiennie. Dotyczy to szczególnie bardziej skomplikowanych deklaracji. Dlatego należy stosować je uważnie i zawsze sprawdzać efekty w praktyce (jeśli to możliwe, to najlepiej w kilku najbardziej popularnych przeglądarkach: Internet Explorer, Firefox, Chrome, Opera). 

To, co na twoim komputerze wygląda poprawnie, wcale nie musi wyglądać tak samo u kogoś innego!


Po co w ogóle wprowadzono style CSS?


Dzięki temu, że polecenia formatujące zawiera sam HTML, przodujące na rynku przeglądarek internetowych firmy, zaczęły wprowadzać rozszerzenia w swoich produktach. Te ulepszenia jednak nie były oficjalnie zawarte w specyfikacji języka HTML i dlatego interpretowały je tylko te konkretne przeglądarki, w których zostały wprowadzone. Prowadziło to do swoistej "anarchii". Dzięki wprowadzonym stylom CSS można stopniowo rezygnować z formatowania dokumentu bezpośrednio za pomocą samego HTML i zacząć to robić poprzez polecenia dotępne w arkuszach stylów. 

Ale najważniejszym powodem wprowadzenia kaskadowych arkuszy stylów była koncepcja oddzielenia struktury dokumentu od jego prezentacji. Język HTML wywodzi się od SGML (StandardGeneralizedMarkupLanguage - Standardowy Uogólniony Język Oznaczania). SGML miał opisywać ogólną strukturę strony: nagłówek oraz ciało dokumentu, w którym mogły znajdować się akapity z tekstem, wykazy, tabele i inne elementy. SGML odpowiada tylko za wstawienie tych elementów, ale nie określa ich wyglądu. Jak łatwo się domyślić, szybko przestało to wystarczać - dlatego wprowadzono HTML. Zawarcie poleceń formatujących w samym HTML spowodowało jednak, że modyfikacja wyglądu elementów strony stała się bardzo żmudna (atrybuty i znaczniki które za to odpowiadają, są porozrzucane w różnych miejscach kodu, mieszając się ze strukturą dokumentu).


Dzięki wprowadzeniu stylów CSS , wszystkie polecenia dotyczące formatowania można umieścić w jednym miejscu (tzw. arkuszu ) i powiązać je z konkretnymi elementami, wstawionymi za pomocą czystego HTML. Taka koncepcja sprawia, że modyfikacja wyglądu stron może przebiegać dużo sprawniej. 


EDYTORY CSS


Style można oczywiście pisać "ręcznie", ponieważ jest to zwykły tekst (tak jak w przypadku samego HTML). Lecz stosowanie specjalnych edytorów przyspiesza i ułatwia nam pracę oraz zmniejsza ryzyko popełnienia błędów. Pozwalają nam one zdefiniować np: wielkość i kolor czcionki, kolor odsyłaczy, tła czy marginesy tekstu (za pomocą specjalnych generatorów). Kolorowanie składni sprawia, że natychmiast odnajdziemy wszystkie błędy. 

Kreator stylów ( wizards ) jest najczęściej wbudowany w edytor HTML (np. Bluefish, Dreamweaver czy najlepszy polski edytor Pajączek NxG). Powstały także specjalne edytory stylów.


DLACZEGO WARTO UŻYWAĆ STYLE CSS?


Po co w ogóle stosować style? Czy warto poświęcać czas na naukę poleceń, które w większości przypadków istnieją również bezpośrednio w składni HTML? Otóż ja uważam, że warto. Dlaczego? Najważniejsze zalety płynące ze stosowania stylów opiszę poniżej: 

* Style stały się już praktycznie podstawowym narzędzie formatującym. Jeśli poważnie myślisz o zajęciu się projektowaniem stron WWW, koniecznie musisz je poznać.

* Przestarzałe atrybuty i znaczniki, znajdujące się bezpośrednio w składni HTML, które dotyczą formatowania, będą stopniowo wycofywane przez producentów przeglądarek internetowych, na rzecz rekomendowanych analogicznych deklaracji stylów. 

Dokumenty pisane z wykorzystaniem arkuszy stylów są zwykle bardziej przejrzyste i krótsze.

* Style pozwalają w łatwy sposób zarządzać całą serią dokumentów, poprzez stosowanie zewnętrznych arkuszy stylów. Dzięki temu w łatwy i wygodny sposób, można dokonać modyfikacji rodzaju formatowania jednocześnie we wszystkich dokumentach, zmieniając dane tylko w jednym pliku!

* Dzięki możliwości stosowania klas selektorów, znacznie oszczędzamy sobie pisania. W jednym miejscu określamy wszystkie atrybuty formatowania (których może być bardzo dużo), odnoszące się do wielu elementów, które mają wyglądać tak samo. Bezpośrednio przy elemencie wystarczy podać tylko nazwę klasy i nie musimy już wypisywać "litanii" poleceń. Znacznie przyspiesza to późniejszą modyfikację strony, ponieważ zmian dokonujemy tylko w jednym miejscu, a wpływają one na wiele elementów jednocześnie.

* Możliwość stosowania różnorodnych jednostek oraz sposobów definiowania kolorów.

* Style dają autorowi możliwości, które do tej pory były praktycznie niemożliwe do osiągnięcia. Dodatkowo w ciągłym opracowaniu są style poziomu trzeciego (CSS3), które oferują jeszcze więcej rozwiązań. Aby dowiedzieć się więcej, sprawdzaj stronę organizacji W3C oraz najnowsze specyfikacje.