|
__NOTOC__
{{integruj z|CSS/Spis treści}}
==Podstawowe wiadomości==
'''CSS''' - '''Kaskadowe arkusze stylów''' - to język opisu stylu dokumentów [[w:XHTML|XHTML]]/[[w:XML|XML]] i [[w:HTML|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 [[w:JavaScript|JavaScript]]u, jednak pozbawione wad takiego wyjścia (możliwość wyłączenia przez użytkownika, rozbieżności w działaniu u różnych przeglądarek).
#[[CSS/Czym jest CSS|Czym jest CSS]]
# [[CSS/Użycie|Użycie]]
# [[CSS/Budowa pliku kaskadowych arkuszy stylów|Budowa pliku kaskadowych arkuszy stylów]]
#[[CSS/Umieszczanie stylów w dokumencie|Umieszczanie stylów w dokumencie]]
#[[CSS/Budowa i działanie stylów|Budowa i działanie stylów]]
#*[[CSS/Budowa i działanie stylów#Dziedziczenie|Dziedziczenie]]
#*[[CSS/Budowa i działanie stylów#Kaskadowość|Kaskadowość]]
#[[CSS/Typy selektorów|Typy selektorów]]
#*[[CSS/Selektory elementów|Selektory elementów]]
#*[[CSS/Selektory klas i identyfikatorów|Selektory klas i identyfikatorów]]
#*[[CSS/Selektory atrybutów|Selektory atrybutów]]
#*[[CSS/Selektory pseudoelementów|Selektory pseudoelementów]]
#[[CSS/Typy media dokumentów|Typy media dokumentów]]
==Atrybuty i ich właściwości==
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 [[w:Internet Explorer|Internet Explorer]] i [[w:Netscape Communicator|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.
#[[CSS/Model prostokątny|Model prostokątny]]
#*[[CSS/Błędy w interpretacji|Błędy interpretacji IE i metody ich obejścia]]
#Przegląd atrybutów
#*[[CSS/Margines|Margines]]
#*[[CSS/Obramowanie|Obramowanie]]
#*[[CSS/Odstęp wewnętrzny|Odstęp wewnętrzny]]
#*[[CSS/Rozmiar|Rozmiar]]
#*[[CSS/Wypełnienie|Wypełnienie]]
#*[[CSS/Kolor|Kolor]]
#*[[CSS/Wyświetlanie i pozycjonowanie|Sposób wyświetlania i pozycjonowanie]]
#*[[CSS/Stronicowanie|Stronicowanie]]
#*[[CSS/Wygląd tekstu|Wygląd tekstu]]
#*[[CSS/Czcionka|Czcionka]]
#*[[CSS/Tabele|Tabele]]
#*[[CSS/Dźwięk|Dźwięk]]
#*[[CSS/Inne|Inne]]
== Użycie Dodatki==
#[[CSS/Jednostki miary|Jednostki miary]]
CSS jest językiem opisu stylu i osobną sprawą jest jego zastosowanie. Generalnie, istnieją dwa sposoby.
#[[CSS/CSS3|CSS3]]
=== StylZobacz osadzony w kodzie HTMLteż ===
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.
=== 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>).
== 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; }
=== Selektory ===
==== 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.
==== 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:
; <nowiki>:</nowiki>before : zawartość przed elementem
; <nowiki>:</nowiki>after : zawartość po elemencie
; <nowiki>:</nowiki>first-letter : pierwsza litera
; <nowiki>:</nowiki>first-line : pierwszy wiersz
; <nowiki>:</nowiki>first-child : element jest pierwszym dzieckiem swojego rodzica
; <nowiki>:</nowiki>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:
; <nowiki>:</nowiki>hover : element został wskazany myszą
; <nowiki>:</nowiki>active : link jest aktywny
; <nowiki>:</nowiki>link : link
; <nowiki>:</nowiki>visited: link został odwiedzony
; <nowiki>:</nowiki>focus : element (który nie jest odnośnikiem) jest aktywny
; <nowiki>:</nowiki>lang(C): element, którego zawartość jest w języku C. Kod języka musi być podany zgodnie ze specyfikacją [http://www.w3.org/TR/REC-html40/ HTML 4.0] lub [ftp://ftp.internic.net/rfc/rfc1766.txt 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 [[#pseudoelementy|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 [[w:Opera (program)|Opera]]
==== Liczniki ====
{{RDoZrobienia}}
=== 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.
=== 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 [[w:palmtop|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==
[[w:World Wide Web Consortium|W3C]] opublikowało domyślny arkusz stylów dla HTML 4.0 [http://www.w3.org/TR/CSS21/sample.html]. Warto jest przyjrzeć się mu aby zobaczyć zastosowanie różnych technik CSS w praktyce.
== Zobacz też ==
* [[HTML]]
=== Linki zewnętrzne ===
{{wikipediaalt|CSS|strona=Kaskadowe arkusze stylów}}
* [http://www.w3.org/Style/CSS/ Strona domowa standardu CSS]
* [http://jigsaw.w3.org/css-validator/ Walidator CSS zgodny z W3C]
<noinclude>
[[Kategoria:Programowanie]]
[[nl:Cascading Style Sheets]]
[[ja:CSS]]
</noinclude>
| 