Cascading Style Sheets

From Helionica

Kaskadowe arkusze stylów (ang. Cascading Style Sheets, CSS) jest językiem służącym do opisu sposobu renderowania stron WWW. CSS został wypracowany przez organizację W3C w 1996 r. jako potomek języka DSSSL przeznaczony do używania w połączeniu z HTML-em.

Arkusz CSS to lista dyrektyw ustalających w jaki sposób ma być renderowany przez przeglądarkę tekst znajdujący się wewnątrz danego elementu HTML/XHTML/XML lub inna część składowa dokumentu opisywana przez dany element. Ustalać można w ten sposób rodzaj czcionki tekstu, kolor, marginesy, odstęp międzywierszowy itp. a nawet pozycję danego elementu względem innych elementów lub całej strony. Wykorzystanie arkuszy stylów daje znacznie większe możliwości jakie w zakresie pozycjonowanie elementów na stronie oferuje sam HTML.

Definicja stylu składa się z selektora, wybranej własności selektora i jej konkretnej wartości:

selektor { własność: wartość }

Na przykład, chcąc przypisać akapitowi określoną czcionkę, możemy napisać:

p {font-family: sans-serif}

gdzie selektorem jest p, cechą - rodzina czcionek, wartością - sans serif.

CSS można stosować zewnętrznie tj. w formie oddzielnych plików, do których odwołujemy się w kodzie strony odpowiednim znacznikiem w rodzaju <link rel="stylesheet" type="text/css" href="arkusz.css"> - HTML lub <?xml-stylesheet type="text/css" href="arkusz.css"?> - XML. Można go dołączać do samego kodu, w nagłówku strony lub stosować lokalnie przy każdym użyciu danego znacznika, co jednak nie jest ani praktyczne ani zalecane.

Nazwa "kaskadowy" wynika z faktu, że istnieją ściśle określone zasady wyboru sposobu wyświetlania danego elementu strony jeśli jest on zdefiniowany inaczej przez zewnętrzny arkusz, następnie wewnętrzny i wreszcie lokalnie. Przyjęto, że oddziaływanie stylów z arkuszy zewnętrznych może być modyfikowane przez style zdefiniowane w nagłówku dokumentu, to zaś może być modyfikowane przez style zdefiniowane bezpośrednio w ciele dokumentu. Pierwszeństwo mają zatem style zdefiniowane "bliżej" konkretnego elementu. Przeglądarka sprawdza więc najpierw, czy istnieją jakieś arkusze zewnętrzne i stosownie do ich definicji formatuje stronę. Następnie sprawdza, jakie są definicje stylów w nagłówku strony i modyfikuje wygląd zgodnie z ich ustaleniami. Następnie sprawdza style w samym dokumencie i ponownie modyfikuje fizyczną postać strony. To oczywiście model działania, ale pokazuje on, jak działa taka 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.

Oprócz możliwości bardzo precyzyjnego definiowania sposobów wyświetlania elementów stron WWW, wielką zaletą CSS jest oddzielenie kontroli wyglądu strony od jej struktury logicznej, dzięki czemu kod HTML stron ulega znacznemu uproszczeniu. Stosowanie zewnętrznych arkuszy CSS daje możliwość zmiany wyglądu wielu stron na raz bez ingerowania w sam kod HTML (o ile został on sensownie napisany) gdyż arkusz ten może być wspólny dla wielu stron.

W3C zatwierdził dwa oficjalne standardy CSS: CSS1 i CSS2. Starsze wersje przeglądarek internetowych obsługują w pewnym stopniu CSS1, jednak nie do końca i z wieloma błędami, stąd obecnie z CSS trzeba korzystać bardzo ostrożnie.

CSS1 jest w pełni obsługiwany jedynie przez Mozillę oraz przeglądarki oparte na silniku renderującym Mozilli (Gecko), takie jak Netscape Navigator 6.x/7.x, a także Opera. Konqueror oraz Internet Explorer jeszcze nie w pełni obsługują wszystkie zatwierdzone w standardzie elementy, jednak z wersji na wersję sytuacja ulega poprawie.

W3C przygotowała poprawioną wersję CSS2 - CSS2.1. Trwają rownież prace nad CSS3. Jezyk ten wzbogaci się o wiele nowych elementów w stosunku do poprzedników. Zmiany nie ograniczą się tylko do dodania nowych własności.

[edytuj]

Selektory CSS 3 dla(X)HTML

selektor	obejmuje
`*`	wszystkie elementy
`foo`	elementy `foo`
`foo bar`	elementy `bar` będące potomkami `foo` dowolnego stopnia
`foo > bar`	elementy `bar` będące dziećmi `foo`
`foo:first-child`	element `foo`, jeśli `foo` jest pierwszym dzieckiem swojego rodzica
`foo:last-child`	element `foo`, jeśli `foo` jest ostatnim dzieckiem swojego rodzica
`foo:nth-child(n)`	element będący n-tym z kolei dzieckiem swojego rodzica
`foo:nth-last-child(n)`	element będący n-tym od końca dzieckiem swojego rodzica
`foo:nth-of-type(n)`	element będący n-tym wśród swojego rodzeństwa tego samego typu
`E:nth-last-of-type(n)`	element będący n-tym od końca wśród swojego rodzeństwa tego samego typu
`foo:first-of-type`	element `foo` będący pierwszym swojego typu
`foo:last-of-type`	element `foo` będący ostatnim swojego typu
`foo:only-child`	element `foo` będący jedynym dzieckiem swojego rodzica
`foo:only-of-type`	element `foo` będący jedynym z rodzeństwa tego typu
`foo:empty`	element `foo` nie mający żadnych potomków (łącznie z węzłami tekstowymi)
`foo:enabled`, `foo:disabled`	element interfejsu użytkownika `foo` mający odpowiedni atrybut: `enabled` bądź `disabled`
`foo:checked`, `foo:indeterminate`	element interfejsu użytkownika `foo` będący zaznaczyonym (`:checked`) bądź w nieokreślonym stanie (`:indeterminate`) - dotyczy elementów typu 'checkbox' i 'radio'
`foo:contains("bar")`	element `foo` zawierający podciąg `bar`
`foo::first-line`	pierwsza zrenderowana linia elementu `foo`
`foo::first-letter`	pierwsza zrenderowana litera elementu `foo`
`foo::selection`	obszar elementu `foo` zaznaczony przez użytkownika
`foo::before`, `foo::after`	zawartość przed (`::before`) lub za (`::after`) elementem `foo`
`foo:not(s)`	element `foo` nie podlegający selektorowi `s`
`foo ~ bar`	element `foo` poprzedzony elementem `bar`
`foo:link, foo:visited`	element `foo` będący kotwicą (hiperłączem): nieodwiedzonym (pseudoklasa `:link`) lub odwiedzonym (pseudoklasa `:visited`)
`foo:active`, `foo:hover`, `foo:focus`	element `foo` przy odpowiedniej akcji użytkownika: przyciśnięcie klawisza myszy nad elementem (`:active`), najechanie kursorem nad element (pseudoklasa `:hover`), ustawienie fokusu nad obiektem (pseudoklasa `:focus`)
`foo:lang(j)`	element `foo` jeśli jest on w języku `j`
`foo + bar`	element `bar` bezpośrednio następujący po `foo`
`foo[bar]`	element `foo` zawierający atrybut `bar` (bez względu na jego zawartość)
`foo[bar="baz"]`	element `foo` z atrybutem `bar` równym `baz`
`foo[bar~="baz"]`	element `foo` z atrybutem `bar` będącym listą oddzielonych spacjami wartości, z których conajmniej jedna jest równa `baz`
`foo[bar\|="baz"]`	element `foo` z atrybutem `bar` zawierającym listę oddzielonymi znakami \| wartości, z których conajmniej jedna rozpoczyna się od `baz`
`foo[bar^="baz"]`	element `foo` z atrybutem `bar`, którego wartość rozpoczyna się od ciągu `baz`
`foo[bar$="baz"]`	element `foo` z atrybutem `bar`, którego wartość kończy się ciągiem `baz`
`foo:root`	element `foo` będący elementem głównym drzewa XML
`foo.bar`	element `foo` o atrybucie `class` równym `bar`
`foo#bar`	element `foo` o atrybucie `id` równym `bar`
`*.foo`	dowolny element o atrybucie `class` równym `foo` (selektor tożsamy z `.foo`)
`*#foo`	dowolny element o atrybucie `id` równym `foo` (selektor tożsamy z `#foo`)

[edytuj]

Prosty przykład dokumentu CSS

* { font-size: 20pt; }
znacznik { border: 1px solid #000000; }
.klasa { font-style: oblique; text-align: justify; }
#identyfikator { text-decoration: underline; }

Zobacz też:

[edytuj]

Zewnętrzne linki

Specyfikacja CSS2

Artykuł zawiera udostępnione na licencji GNU FDL treści pochodzące w pierwotnej wersji z artykułu Cascading Style Sheets w polskiej Wikipedii. Lista autorów.

Źródło: "http://www.helionica.org/index.php/Cascading_Style_Sheets"