CSS - Cascading Style Sheets

Arkusz stylów CSS to lista dyrektyw (tzw. reguł) ustalających w jaki sposób ma zostać wyświetlana przez przeglądarkę internetową zawartość wybranego elementu (lub elementów) HTML lub XML. Można w ten sposób opisać wszystkie pojęcia odpowiedzialne za prezentację elementów dokumentów internetowych, takie jak rodzina czcionek, kolor tekstu, marginesy, odstęp międzywierszowy lub nawet pozycja danego elementu względem innych elementów bądź okna przeglądarki. Wykorzystanie arkuszy stylów daje znacznie większe możliwości pozycjonowania elementów na stronie, niż oferuje sam HTML. CSS został stworzony w celu odseparowania struktury dokumentu od formy jego prezentacji. Separacja ta zwiększa zakres dostępności witryny, zmniejsza zawiłość dokumentu, ułatwia wprowadzanie zmian w strukturze dokumentu. CSS ułatwia także zmiany w renderowaniu strony w zależności od obsługiwanego medium (ekran, palmtop, dokument w druku, czytnik ekranowy). Stosowanie zewnętrznych arkuszy CSS daje możliwość zmiany wyglądu wielu stron naraz bez ingerowania w sam kod HTML, ponieważ arkusze mogą być wspólne dla wielu dokumentów.

Historia

Pierwotnie HTML był językiem wyłącznie do opisu struktury dokumentu. Jednak z czasem zrodziła się potrzeba ożywienia wyglądu takich dokumentów. Powoli dodawano nowe znaczniki do HTML pozwalające kontrolować kolory, typografię, dodawać nowe media (np. obrazki). Te niestandardowe rozszerzenia realizowane były przez najpopularniejszych producentów przeglądarek bez porozumienia z drugim. Doprowadziło to do zaimplementowania nowych znaczników działających w konkretnej grupie przeglądarek i nie działających w innych przeglądarkach. Projektanci zostali zmuszeni do wysyłania do klienta różnych wersji tej samej witryny w zależności od użytej przeglądarki, uzyskanie identycznego wyglądu w różnych przeglądarkach było praktycznie niemożliwe. Håkon Wium Lie jako pierwszy zaproponował CHSS (Cascading HTML Style Sheets) w październiku 1994 roku. Później Lie i Bert Bos pracowali wspólnie nad standardem CSS (literka H została usunięta ze względu na możliwość stosowania stylów do innych podobnych do HTML języków). W tym czasie została utworzona organizacja World Wide Web Consortium, która z Lie’em i Bosem na czele przejęła prace nad CSS. Pod koniec 1996 roku wydano oficjalną dokumentację CSS, Kaskadowe arkusze stylów, poziom 1.

Przed pojawieniem się CSS wszystkie informacje dotyczące wyglądu dokumentów HTML (między innymi rodzaj i kolor czcionki, ułożenie, marginesy) zawarte były w znacznikach HTML. Język CSS umożliwia przeniesienie tych informacji do osobnego pliku. Skutkuje to uproszczeniem i zwiększeniem przejrzystości samego dokumentu HTML. Bez użycia CSS w przypadku definiowania stylu dla nagłówka (h1) lub podtytułu (h2) jego definicja musiałaby zostać powtórzona w każdym miejscu, w którym pojawia się dana struktura. Efektem takiego działania byłoby zmniejszenie czytelności dokumentu i jego odporności na błędy oraz trudność w utrzymaniu. Dodatkowo, zmiany stylu w jednym z miejsc wiązałyby się z koniecznością wprowadzania zmian w każdym miejscu wystąpienia. CSS pozwala na rozgraniczenie warstwy prezentacji od struktury. Język ten umożliwia definicję kolorów, czcionek, układu, rozmiarów, marginesów oraz wielu innych cech związanych z warstwą prezentacji. Wsparcie przeglądarek.

Ponieważ nie wszystkie przeglądarki poprawnie tłumaczą kod CSS, niektóre techniki deweloperskie umożliwiają filtrowanie specyficznych przeglądarek albo kierunkowanie definicji stylów dla wybranych. Obydwa sposoby umożliwiają wyłączanie lub włączanie niektórych definicji stylów dla konkretnych przeglądarek internetowych. Wykorzystując filtry CSS można nawet osiągnąć różne style dla różnych przeglądarek. Początkowo przeglądarki albo całkowicie nie radziły sobie z plikami CSS albo poziom renderowania był bardzo niski. Wsparcie Internet Explorera dla CSS zostało zapoczątkowane w wersji 3.0 i z każdą kolejną wersją wsparcie ulegało poprawie. Przykładem historycznego problemu związanego z implementacją kaskadowych arkuszy stylów był błąd Internet Explorera w interpretacji modelu pudełkowego. Błędem dotknięte były przeglądarki Internet Explorer dla Windows aż do wersji 6. Efektem tego problemu były różnice w szerokościach elementów blokowych między przeglądarkami internetowymi. Obejściem problemu było zawarcie odpowiedniej Deklaracji Typu Dokumentu (DOCTYPE). Pomimo faktu, że wiele przeglądarek internetowych poprzez wsparcie CSS wpłynęło pozytywnie na rozwój tego języka to niepoprawna interpretacja kaskadowych arkuszy stylów przez niektóre z nich ciągle ogranicza projektantów. Nawet w dzisiejszych czasach problemy te skutecznie utrudniają projektowanie stylów, a testowanie na maksymalnie wielu przeglądarkach jest nieodłączną częścią pracy.

Informacje

Największą zaletą CSS jest umożliwienie rozdzielenia warstwy prezentacji od warstwy danych. Dzięki temu możliwe jest definiowanie wielu stylów dla tych samych danych, a sam dokument HTML jest bardziej przejrzysty i łatwiejszy do utrzymania i dalszego rozwinięcia. Dodatkowo w przypadku potrzeby wprowadzenia zmian w definicji stylu wykorzystanego dla elementu występującego wielokrotnie w dokumencie HTML w pliku CSS zmiany są wprowadzane raz, a zmiana jest adaptowana przez wszystkie elementy. Skutkuje to oszczędnością czasu i pracy. Z drugiej jednak strony podczas gdy poziome rozmieszczenie jest relatywnie łatwe do wykonania to pionowe rozmieszczenie jest często mało intuicyjne. Proste czynności jak centrowanie elementu pionowo często wymaga skomplikowanych operacji. Oprócz tego CSS uniemożliwia definiowanie nowych zakresów bez względu na aktualną pozycję. Jak również kierunkowanie stylu dla określonej części tekstu (oprócz :first-letter) jest zawiłym zadaniem. CSS Frameworks CSS Frameworks to specjalnie stworzone biblioteki, których zadaniem jest ułatwienie definicji stylu dla stron internetowych z wykorzystaniem kaskadowych arkuszy stylów. Przykładem takich bibliotek są: Foundation, Blueprint, Bootstrap oraz Cascade Framework. Podobnie jak w przypadku programowania i bibliotek, CSS Frameworks są zazwyczaj dołączane jako zewnętrzne pliki.css w znaczniku HTML . Zapewniają one gotowe rozwiązania do projektowania stron. Składnia arkuszy Arkusz stylów składa się z reguł określających styl dla wybranych elementów dokumentu (HTML, SVG i innych). Reguła składa się z selektora oraz deklaracji. Selektor określa grupę elementów (rzadziej pojedynczy element), którego ma dotyczyć deklaracja. Deklaracja określa formatowanie i składa się z nazwy jednej z właściwości i jej wartości napisanej po dwukropku. Deklaracja musi być otoczona nawiasami klamrowymi.

Więcej, oraz bardziej szczegółowe informacje można znaleźć tutaj