Kaskadowe arkusze stylów
Z Wikipedii
| Ten artykuł jest częścią serii World Wide Web |
|
Struktura stron WWW Generowanie dynamicznych stron WWW Po stronie użytkownika CSS, JavaScript, AJAX Przesyłanie danych HTTP(S), HTTP referrer, Serwer WWW, VoiceXML, XMLHttpRequest Pojęcia Architektura informacji, Użyteczność (web-usability), Dostępność (WWW) |
Kaskadowe arkusze stylów (ang. Cascading Style Sheets, CSS) to język służący do opisu formy prezentacji (wyświetlania) stron WWW. CSS został opracowany przez organizację W3C w 1996 r. jako potomek języka DSSSL przeznaczony do używania w połączeniu z SGML-em. Pierwszy szkic CSS zaproponował w 1994 r. Håkon Wium Lie. [1]
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) (X)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 (X)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 zmienianie renderowania 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 na raz bez ingerowania w sam kod (X)HTML, ponieważ arkusze mogą być wspólne dla wielu dokumentów.
Spis treści |
[edytuj] 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 konkretniej 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 międzyczasie została utworzona organizacja World Wide Web Consortium, która na czele Lie'a i Bosa przejęła prace nad CSS. Pod koniec 1996 roku wydano oficjalną dokumentację CSS, Kaskadowe arkusze stylów, poziom 1.
W3C zatwierdziło dwa oficjalne standardy CSS: CSS 1 i CSS 2. Przygotowywana jest też zrewidowana wersja CSS o numerze 2.1.[2] CSS 2.1 osiągnęła już status Candidate Recommendation, 13 czerwca 2005 została cofnięta do statusu Working Draft, a 19 Lipca 2007 status Candidate Recommendation został ponownie przywrócony.
Trwają również prace nad CSS3. Wersja ta w stosunku do poprzedników wzbogaci się o wiele selektorów oraz właściwości, nowością jest także modułowy charakter języka - nie będzie to już jednolita rekomendacja, lecz kilkadziesiąt osobnych dokumentów, co pozwoli na włączanie lub wyłączanie odpowiednich modułów w przeglądarkach w zależności od chwilowych potrzeb. [3]
[edytuj] Problemy z implementacją
Specyfikacja CSS1 została opublikowana pod koniec 1996. Kilka miesięcy później pojawiła się przeglądarka Internet Explorer 3 zapewniająca podstawową obsługę CSS1. Była to ważna cecha, która dawała przewagę przeglądarce Microsoftu w erze dominacji Netscape Navigatora. Obsługa CSS1 była na tyle dobra, że można było porzucić niestandardowy znacznik <font> i rozpocząć eksperymentowanie z marginesami i innymi elementami układu CSS. Niestety projektanci napotkali problemy związane z niekompletną i pełną błędów implementacją CSS1. Pod koniec 1997 roku światło dzienne ujrzała przeglądarka IE4, w której poprawiono obsługę CSS1. Netscape po raz pierwszy w wersji 4 zaprezentował interpretowanie CSS1, niestety mimo obsługiwania znacznej części, zawierał sporo rażących błędów. IE4 zachowywał się w przewidywalny sposób, NN 4 niszczył układ. Powszechne było nawet przekonanie, że CSS jest wadliwy. Wielu projektantów porzuciło CSS, błędy w dominującej w tamtym okresie przeglądarce Netscape Navigator spowodowały opóźnienie powszechnego przyjęcia standardu CSS.
[edytuj] Obsługa przez przeglądarki
CSS 1 jest w pełni obsługiwany przez przeglądarki oparte na silniku Gecko (np. Firefox), KHTML (min. Safari, Konqueror) oraz Presto (Opera). Silniki te są także bliskie pełnej obsługi CSS 2.1. Internet Explorer do wersji 5.5 posiadał niecałkowitą i pełną błędów obsługę CSS1 oraz nielicznych elementów nowszych wersji. IE 6 renderując w trybie standardów obsługuje poprawnie prawie całość CSS1, jednak obsługa CSS 2.1 nadal pozostawia wiele do życzenia.
CSS 3 jest obecnie szczątkowo obsługiwany przez większość najnowszych przeglądarek (np. opacity w Gecko). Właściwości CSS 3 o implementacji znajdującej się w fazie eksperymentalnej opatrzone są prefiksem odpowiednim dla przeglądarki (np. -moz-border-radius dla Gecko).
[edytuj] Składnia arkuszy
Arkusz stylów składa się z definicji stylu (reguł). Reguła składa się z selektora określającego formatowany element lub grupę elementów oraz jednej lub więcej rozdzielonych dwukropkiem oraz zakończonych średnikiem par właściwość-wartość. Pary muszą być otoczone nawiasami klamrowymi. Ponieważ średnik służy do separowania par, po ostatniej z nich nie powinno się pisać tego znaku (w przeciwnym razie cała definicja może zostać zignorowana).
selektor { właściwość: wartość; inna-właściwość: inna-wartość }
Przykładowo chcąc przypisać wszystkim akapitom określoną czcionkę użyjemy zapisu:
p { font-family: sans-serif }
Gdzie selektorem jest p (reguła zostanie zastosowana do wszystkich elementów p w dokumencie), właściwością - font-family (poddawana zmianie jest rodzina czcionek) a wartością - sans serif (akapitom przypisywana jest rodzina czcionek bezszeryfowych). Podstawowe selektory CSS zapewniają możliwość opisania docelowej grupy elementów między innymi według ich:
- wartości atrybutów
- aktualnego stanu (np. focus lub hover)
- relacji rodzic-potomek-rodzeństwo względem innego elementu
[edytuj] Umieszczanie arkuszy
Powiązać dokument z arkuszem można określając relację tego pierwszego z osobnym dokumentem CSS za pomocą elementu link:
<link rel="stylesheet" href="arkusz.css"> <!-- wersja dla HTML --> <link rel="stylesheet" href="arkusz.css" /> <!-- wersja dla XHTML -->
W przypadku dokumentu XML (lub XHTML serwowanego z XML-owym typem zawartości) użyć można specyficznej dla XML-a instrukcji przetwarzania:
<?xml-stylesheet type="text/css" href="arkusz.css"?>
Reguły CSS można też umieszczać wewnątrz nagłówka dokumentu (X)HTML dzięki elementowi style:
<style type="text/css">p { color: red }</style>
Lub stosować lokalnie do wybranego elementu (X)HTML za pomocą atrybutu style, co jednak w większości przypadków nie jest ani praktyczne, ani zalecane:
<p style="color: red"></p>
[edytuj] Model kaskadowy
Nazwa "kaskadowe arkusze stylów" wynika z faktu, iż gdy reguły CSS wykluczają się wzajemnie w arkuszu zewnętrznym, arkuszu wewnętrznym oraz na poziomie elementów HTML, priorytet stylów ustalany jest hierarchicznie. Przyjęto, że oddziaływanie stylów z arkuszy zewnętrznych może być modyfikowane przez style zdefiniowane w nagłówku dokumentu, te zaś mogą być modyfikowane przez reguły zdefiniowane bezpośrednio w ciele dokumentu. Pierwszeństwo mają zatem style zdefiniowane "bliżej" formatowanego elementu. Kolejność interpretacji reguł formatujących dany element przez przeglądarkę przedstawia się następująco:
- Domyślny arkusz przeglądarki WWW (niezależny od autora strony)
- Domyślny arkusz użytkownika przeglądarki (jak wyżej)
- Zewnętrzne arkusze stylów
- Definicje stylów w nagłówku dokumentu
- Definicje stylów w atrybucie
styleelementu
Ten model działania pokazuje, w jaki sposób działa kaskada stylów. Między stylami z różnych źródeł nie muszą zresztą wcale występować żadne konflikty - wszystkie style uzupełnią się, tworząc jeden wielki "wirtualny" styl.
[edytuj] Zobacz też
[edytuj] Przypisy
[edytuj] Bibliografia
- Jeffrey Zeldman: Projektowanie serwisów WWW. Standardy sieciowe. Wydanie II. Helion, 2007. ISBN 83-246-0774-9.
