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
[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
Styl
[edytuj]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ą.
Media
[edytuj]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.