CSS/Składnia

Na bardzo ogólnym poziomie, plik CSS składa się z listy selektorów oraz przyporządkowanych do nich stylów.

 div { background-color: green; }
 selektor { styl }

Selektor

Selektor to identyfikator, który określa do jakich elementów dopasować (select - wybrać) dany styl. Można rozróżnić kilka rodzajów selektorów.

• element

 blockquote, p, table

Pasuje do dowolnego elementu, odpowiednio: blockquote, p, table

• klasa

 .zielony, .pogrubiony, .wyjustowany, .niewidoczny

Pasuje do dowolnego elementu z atrybutem class="zielony itp.

• identyfikator (id)

 #naglowek, #stopka, #menu, #moj_adres

Pasuje do dowolnego elementu z atrybutem id="naglowek". Może być co najwyżej jeden taki element w całym dokumencie!

Można łączyć selektory, dodając do elementu klasę lub identyfikator. Zawężamy w ten sposób zastosowanie stylu. Na przykład, jeśli chcemy by zielony był tylko paragraf, ale już nie tabelka, piszemy:

 p.zielony{ background-color: green; }

Wtedy wpisanie <table class="zielony"> nie będzie miało żadnego efektu. Możemy też kilka selektorów oddzielić przecinkami i wtedy klamra po nich będzie miała odniesienie do każdego.

Według atrybutów

Nowsze specyfikacje CSS dają nam do ręki potężne narzędzie - możliwość określania stylu w zależności od atrybutów elementu. Dodając:

 [lang="pl"] { color: blue; }

spowodujemy, że tekst w każdym elemencie, który ma ustawiony atrybut lang="pl", będzie miał kolor niebieski.

Przydatnymi i często stosowanymi sztuczkami są:

 a[target] { cursor: crosshair; }
 abbr[title], acronym[title] { border-bottom: 1px dotted black; }

Pierwsza z nich powoduje, że każdy link z określonym atrybutem target (nieważna jest wartość) będzie po najechaniu na niego myszą zmieniał kursor na "celownik" (jest to usankcjonowany sposób ostrzegania użytkownika, że link otwiera się w nowym oknie). Natomiast drugi powoduje podkreślenie skrótów kropkowaną linią.

Niestety, w przypadku obu z nich starsze przeglądarki są zupełnie bezradne.

Kolejność

Jeśli wypiszemy kilka selektorów po sobie, bez przecinków, będzie to oznaczało, że chodzi nam o ich wzajemne położenie.

 table div p{ font-size: smaller; }

oznacza: paragraf zawarty wewnątrz elementu <div>, który z kolei jest zawarty w elemencie <table>.

Natomiast notacja:

 div > p{ font-size: smaller; }

oznacza: paragraf, którego rodzicem (czyli elementem, który bezpośrednio go zawiera) jest element div.

Różnicę można dostrzec rozważając kod:

 <div><pre><p>tekst</p></pre></div>
 <div><p>tekst</p></div>

Pierwszy z wyżej wymienionych selektorów będzie pasował do obu linijek. Drugi - tylko do drugiej (w pierwszej <div> i <p> są rozdzielone przez <pre>).

Niestety, Internet Explorer zupełnie nie rozpoznaje drugiej notacji!

Pseudoelementy

Selektory można rozszerzyć o tzw. pseudoelementy - które określają szczególne zastosowanie elementu. Wśród najważniejszych pseudoelementów wyróżniamy:

:before

zawartość przed elementem

:after

zawartość po elemencie

:first-letter

pierwsza litera

:first-line

pierwszy wiersz

:first-child

element jest pierwszym dzieckiem swojego rodzica

:last-child

element jest ostatnim dzieckiem swojego rodzica

Pseudoelementy występują w selektorze po dwukropku (:). Przykład:

 td:first-child { padding-left: 2em; }

Powyższy przykład powoduje, że zawartość pierwszej kolumny każdego wiersza w tabeli jest odsunięta od lewej strony o 2em.

Jeśli element określony jest dodatkową klasą to pseudoelement występuje po nazwie klasy:

 td.price:after {content: " PLN";}

Powyższy kod spowoduje automatyczne uzupełnienie każdej komórki zawierającej kwotę o oznaczenie waluty.

Uwaga! Pseudoelementy nie są jeszcze wspierane przez niektóre przeglądarki, a szczególnie przez IE do wersji 6.

Pseudoklasy

Wśród najważniejszych pseudoklas wyróżniamy:

:hover

element został wskazany myszą

:active

link jest aktywny

:link

link

:visited

link został odwiedzony

:focus

element (który nie jest odnośnikiem) jest aktywny

:lang(C)

element, którego zawartość jest w języku C. Kod języka musi być podany zgodnie ze specyfikacją HTML 4.0 lub RFC 1766

Styl

Między klamrami, po selektorze, definiujemy styl elementu. Opisujemy go ciągami: atrybut - wartość. Wartości atrybutom przypisuje się znakiem :. Należy jednak pamiętać by po przypisaniu wartości parametrowi np. "font-weight: bold" oddzielić go od innych średnikiem ("font-weight:bold;") w przeciwnym przypadku dalszy ciąg pliku zostanie potraktowany jako wartość tego elementu. Najlepiej po każdym średniku przejść do nowej linii - zwiększy to czytelność pliku.

Generowanie zawartości

Ciekawe możliwości, jakie stwarza CSS, to generowanie zawartości - tekstu a nawet grafiki.

 content: "generowana zawartość";

powoduje, że tekst zawarty w danym elemencie zostanie usunięty i zastąpiony przez "generowana zawartość". Aby uniknąć straty zawartości elementu, atrybut content umieszcza się w pseudoelementach :before i :after.

To jednak nie wszystko. Chcąc po każdym adresie e-mail na naszej stronie umieścić ikonkę skrzynki pocztowej, możemy użyć stylu CSS, oszczędzając miejsce w kodzie (X)HTML a sobie samemu mnóstwa pracy!

 .mail:after{ content: url("images/mail.gif"); }

Niestety, obecnie dobrą obsługą generowania zawartości może pochwalić się jedynie przeglądarka Opera

Liczniki

Ta sekcja jest zalążkiem. Jeśli możesz, rozbuduj ją.

Media

Najnowsza specyfikacja CSS wprowadza pewne rozróżnienie sposobu wyświetlania elementów, w zależności od tego na jakim urządzeniu jest "wyświetlana" dana strona (ekran,drukarka,urządzenia czytające na głos,itp.).

Pomysł polega na wprowadzeniu przestrzeni nazw dla każdego z tych urządzeń. Elementy zdefiniowane w ogólnej przestrzeni nazw będą interpretowane przez wszystkie urządzenia jednakowo, natomiast elementy znajdujące się w np. przestrzeni dla ekranu nie będą interpretowane przez drukarkę.

Ustanawianie przestrzeni nazw

Przestrzeń można ustawić na dwa sposoby:

• poprzez dyrektywę importującą @import:

@import url('style-drukarkowe.css') print;
@import url('style-ekranowe.css') screen;

• poprzez dyrektywę definiującą przestrzeń @media:

@media screen {
     BODY {background-color:#f2f2f2;}/* tło na ekranie będzie szare*/
}

@media print {
     BODY {background-color:#ffffff;}/* tło na papierze będzie białe*/
}

@media screen,print {
     BODY {color:#000000;}/* tekst na ekranie i papierze będzie czarny*/
}

Rodzaje urządzeń

Wyróżnia się następujące przestrzenie nazw:

• all - wszystkie urządzenia
• print - drukarka
• screen - kolorowy ekran
• handheld - mały ekran (komputery typu palmtop, telefony komórkowe,itp.)
• projection - projektory
• speech - urządzenia głosowe
• tv - telewizory (mało kolorów,ograniczona wielkość,dźwięk)
• tty - przeglądarki tekstowe (podstawową jednostką miary jest znak, nie piksel)
• embossed - drukarki brailowskie (ograniczenia podobne do przeglądarek tekstowych, plus brak kolorów)

Przykład

W3C opublikowało domyślny arkusz stylów dla HTML 4.0 [1]. Warto jest przyjrzeć się mu aby zobaczyć zastosowanie różnych technik CSS w praktyce.