Kaskadowe arkusze stylów
Z Wikipedii
Języki opisu treści
Przesyłanie danych
Przetwarzanie danych
Pojęcia
Kaskadowe arkusze stylów (ang. Cascading Style Sheets, CSS) to język służący do opisu sposobu renderowania 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ć renderowana 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 (W3C odradza używania elementów oraz atrybutów XHTML odpowiedzialnych za wygląd strony).
Spis treści |
[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.
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 artybutó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"> <link rel="stylesheet" href="arkusz.css" />
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] O standardzie
Oprócz możliwości bardzo precyzyjnego definiowania formatowania elementów stron WWW, wielką zaletą CSS jest oddzielenie prezentacji strony od jej struktury logicznej, dzięki czemu pozbawiony elementów formatujących kod (X)HTML dokumentów ulega znacznemu uproszczeniu. 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.
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, lecz 13 czerwca 2005 została cofnięta do statusu Working Draft.
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] Wsparcie przez przeglądarki
CSS 1 jest w pełni obsługiwany przez przeglądarkę Firefox oraz inne przeglądarki oparte na silniku Gecko, Operę, Safari oraz Konquerora. Programy 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 jest bardzo niekompletna.
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] Przykład zastosowania CSS
body {
font-size: 10pt;
font-family: 'Arial', sans-serif;
background: yellow url('../tlo.jpg'); }
/* ścieżki w CSS są zawsze interpretowane
względem położenia arkusza stylów */
h1 {
border: 1px solid black; }
.wazne {
font-size: 120%;
color: red; }
#menu a {
text-decoration: none; }
#menu a:hover {
text-decoration: underline; }
img.ilustracja {
float: left;
margin: 1em; }
li:first-child a {
color: red; }
li:first-child + li + li a {
color: yellow; }
/* odnośniki na pierwszej i trzeciej pozycji
w liście zostaną wyróżnione innym kolorem */
Podane przykłady mogą prezentować się odmiennie w różnych przeglądarkach internetowych.
