CSS
Z Wikibooks, biblioteki wolnych podręczników.
CSS - Kaskadowe arkusze stylów - to język opisu stylu dokumentów XHTML/XML i HTML. Dzięki niemu można oddzielić treść - zachowanej w pliku (X)HTML - od prezentacji, opisanej przez plik CSS. Dzięki kaskadowym arkuszom stylu możemy zmodyfikować wygląd każdego elementu (X)HTML a także iść dalej - zdefiniować własne klasy stylów, tak, że w zależności od nich dany element będzie prezentował się w różny sposób. Do dyspozycji mamy szeroką gamę środków - od zmiany czcionki, koloru, tła po dodanie obramowania, ustalenie pozycji elementu względem strony czy innych elementów. Stosując zaawansowane sztuczki można uzyskać zaskakujące efekty, przypominające użycie JavaScript, jednak pozbawione wad takiego wyjścia (możliwość wyłączenia przez użytkownika, rozbieżności w działaniu u różnych przeglądarek).
Obecnie nadal obsługa standardu CSS przez przeglądarki internetowe nie jest doskonała, ale systematycznie poprawia się. Mimo wszystko, nawet przeglądarki stare i nieaktualne, jak Internet Explorer i Netscape Communicator (w wersji starszej niż 6), będą mogły skorzystać z większości dobrodziejstw CSS. Warto włożyć nieco pracy w naukę kaskadowych arkuszy stylu, gdyż jest to krok w stronę tworzenia stron nowoczesnych, o łatwo modyfikowalnym wyglądzie (nie trzeba zmieniać każdego pliku, gdyż styl mamy zapisany w jednym miejscu) a zatem będących dłużej w użyciu.
Spis treści |
[edytuj] Użycie
CSS jest językiem opisu stylu i osobną sprawą jest jego zastosowanie. Generalnie, istnieją dwa sposoby.
[edytuj] Styl osadzony w kodzie HTML
Czasami chcemy z miejsca zmienić styl w pewnym miejscu dokumentu a z jakiś powodów nie chcemy zmieniać globalnego stylu. Tak jest właśnie na Wikipedii - nie mamy dostępu do pliku styli (o czym później), więc używamy wstawek.
Możemy więc ad hoc dopisać do danego elementu styl - dodając atrybut style i jako jego wartość - sam styl. Na przykład - chcąc zmienić tło tekstu w poniższym paragrafie na zielone:
<p> (tu jest tekst) </p>
dopiszemy, jak to wyjaśniliśmy:
<p style="background-color: green;"> (tu jest tekst) </p>
Tekst między cudzysłowami to właśnie język opisu kaskadowych arkuszy stylów.
Jednak ten sposób prowadzi do duplikacji kodu i powiązania wyglądu z treścią dokumentów, tak samo jak w starych wersjach HTML sprzed czasów CSS, dlatego należy unikać tego sposobu, jeśli to możliwe.
[edytuj] Plik kaskadowych arkuszy stylów
Najlepiej jest zebrać wszystkie style i umieścić w jednym pliku opatrzonym rozszerzeniem .css. Zwyczajowo plik taki umieszczamy w głównym katalogu strony internetowej i nazywamy style.css.
Arkusze stylów załącza się do pliku HTML za pomocą kodu:
<link rel="stylesheet" type="text/css" href="moje_style.css">
który umieszczamy w sekcji HEAD dokumentu.
Natomiast do pliku XML (także XHTML) za pomocą kodu:
<?xml-stylesheet type="text/css" href="moje_style.css"?>
który umieszczamy po deklaracji XML (przed DTD).
Chwilka na wyjaśnienie: pierwszy atrybut elementu <link> czyli href to ścieżka dostępu do pliku ze stylami względem dokumentu (X)HTML. Należy pamiętać, że jest to ścieżka względna, czyli w przypadku pliku (X)HTML w katalogu /help na serwerze załączamy plik style.css położony w katalogu głównym podając ścieżkę: "../style.css". Kolejny parametr: rel - oznacza znaczenie tego arkuszu stylów, np. alternatywny - "alternative", główny "stylesheet" itd. Ostatni atrybut oznacza zawartość dokumentu czyli tekst - css.
Dodatkowo, dobrze jest na początku sekcji HEAD poinformować przeglądarkę, że chcemy użyć stylów CSS:
<meta http-equiv="Content-Style-Type" content="text/css">
Korzystanie z arkuszy stylów w samym kodzie (X)HTML odbywa się poprzez dodanie do elementu np. <P> atrybutu class lub id np:
<p class="zielony">
lub
<p id="zielony">
Gdzie wartościami są zdefiniowane przez nas wcześniej w pliku CSS klasy stylów. Różnica jest taka, że id jest unikalny w skali dokumentu (jak sama nazwa wskazuje), natomiast class może być wspólny dla kilku elementów (nawet różnego typu, jak <P> i <TABLE>).
[edytuj] Budowa pliku kaskadowych arkuszy stylów
Na bardzo ogólnym poziomie, plik CSS składa się z listy selektorów oraz przyporządkowanych do nich stylów:
selektor { styl }
p.zielony { background-color: green; }
[edytuj] Selektory
[edytuj] Podstawy
Czym jednak jest ten tajemniczy selektor? Otóż nazywamy tak identyfikator, który określa do jakich elementów dopasować (select - wybrać) dany styl. Generalnie, najważniejsze selektory to:
- 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.
[edytuj] 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.
[edytuj] 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!
[edytuj] 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.
[edytuj] 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
[edytuj] 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.
[edytuj] 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
[edytuj] Liczniki
Ta sekcja jest zalążkiem. Jeśli możesz, rozbuduj ją
[edytuj] Kaskada
Ważnym pojęciem w CSS jest kaskada - której to standard ten zawdzięcza też nazwę.
Można zawrzeć styl elementu w kilku miejscach. Na przykład oddzielając go innymi definicjami:
.zielony { background-color: green; }
.pogrubiony { font-weight: bold; }
.zielony { font-family: sans-serif; }
Pewien problem pojawia się, gdy kilka selektorów dotyczy danego elementu:
p { margin: 10px 0 5px; }
p.zielony { background-color: green; }
W tym wypadku element <p class="zielony"> będzie miał zarówno zmieniony margines jak i tło. Po prostu interpreter CSS (w naszym przypadku - przeglądarka internetowa) dopasowuje po kolei kolejne selektory do znalezionego elementu - jest to właśnie kaskada. W naszym przypadku pasują oba - więc oba zostaną dopasowane. Co jednak, gdy umieścimy w różnych selektorach sprzeczne informacje?
p { background-color: white; }
p.zielony { background-color: green; }
W tym momencie interpreter będzie kierował się zasadą: obowiązujący jest styl położony najbliżej elementu, to znaczy taki, który najdokładniej go opisuje (kolejno, według istotności: przez identyfikator, klasę, położenie wobec innych elementów, sam element). Tym razem to drugi selektor lepiej opisuje element <p class="zielony"> i dlatego nasz paragraf będzie miał zielone tło. Ostatecznie, gdy interpreter ma wątpliwości, bierze ostatni w kolejności wystąpienia w pliku selektor. Niestety, w praktyce przeglądarki bardzo różnie stosują zasadę kaskady i jedyną radą jest dobre testowanie stron i unikanie niejednoznaczności.
Należy podkreślić, że rozwiązywanie konfliktów odbywa się tylko w odniesieniu do skonfliktowanych atrybutów, pojawiających się w różnych selektorach więcej niż raz - wszystkie pozostałe są stosowane wprost.
[edytuj] 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ę.
[edytuj] 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*/
}
[edytuj] 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)
[edytuj] 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.
