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

edytuj

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

edytuj

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ść

edytuj

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

edytuj

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

edytuj

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

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

edytuj

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

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

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

edytuj

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ń

edytuj

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

edytuj

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.