Promocje Heliona
Bestsellery Heliona
1. Wiadomości podstawowe
Zaprojektowanie nieskomplikowanego arkusza stylów nie jest zadaniem trudnym. Wystarczy podstawowa znajomość języka HTML i terminologii związanej z poligrafią komputerową. Np., aby czcionce wszystkich elementów „H1” nadać wybrany kolor, np. niebieski, należy dokonać następującego zapisu:
H1 {color: blue}
Powyższy przykład jest prostą regułą CSS. Reguła składa się z dwóch części: selektora („H1”) oraz deklaracji („color: blue”). Deklaracja również złożona jest z dwóch części: atrybutu („color”) oraz wartości („blue”). Mimo że powyższy przykład zmienia reprezentację elementów tylko jednego typu, to jest on prawidłowym arkuszem stylów. Połączenie wielu arkuszy stylów (jedną z podstawowych właściwości arkuszy stylów jest to, że można je łączyć) stanowi dopiero o ostatecznej prezentacji dokumentu.
Selektor jest łącznikiem pomiędzy dokumentem HTML i arkuszem stylów. Wszystkie typy elementów HTML mogą być selektorami. Typy elementów HTML zdefiniowane zostały w specyfikacji HTML [2].
Jednym z około 50 atrybutów służących do kontroli prezentacji dokumentu HTML jest własność „color”. Lista atrybutów i dostępnych dla nich wartości zawarta jest w tej specyfikacji.
Autorzy dokumentów HTML nie muszą używać arkuszy stylów, chyba że chcą aby ich dokumenty prezentowały się w określony sposób. Każda aplikacja kliencka posiada własny zestaw arkuszy stylów, który pozwoli na wyświetlenie każdego dokumentu HTML w sposób poprawny, chociaż zazwyczaj mało atrakcyjny. W Dodatku A znajduje się przykładowy arkusz stylów dla dokumentów napisanych w HTML 2.0 [3].
Opis gramatyki formalnej CSS1 znajduje się w Dodatku B.
1.1 Wstawianie arkuszy stylów do HTML
Aby arkusze stylów mogły mieć wpływ na prezentację dokumentu, aplikacja kliencka musi zostać poinformowana o ich istnieniu. W specyfikacji HTML [2] znajdują się wskazówki na temat dołączania arkuszy stylów do dokumentów HTML. Poniższy fragment ma zatem charakter informatywny, a nie normatywny:
<HTML>
<HEAD>
<TITLE>Tytuł</TITLE>
<LINK REL=STYLESHEET TYPE="text/css"
HREF="http://style.com/cool" TITLE="Cool">
<STYLE TYPE="text/css">
@import url(http://style.com/basic);
H1 { color: blue }
</STYLE>
</HEAD>
<BODY>
<H1>Nagłówek jest niebieski</H1>
<P STYLE="color: green">Natomiast akapit jest zielony.
</BODY>
</HTML>
Powyższy przykład ilustruje cztery różne sposoby dołączania arkuszy stylów do dokumentów HTML: przy użyciu elementu „LINK” dołączono zewnętrzny arkusz stylów. Element „STYLE” wewnątrz sekcji „HEAD” pozwala na wpisanie arkuszy stylów bezpośrednio do dokumentu. Importowanie arkusza możliwe jest przy użyciu notacji „@import”. Atrybut „STYLE”, natomiast pozwala na definiowanie stylów bezpośrednio w danym elemencie w sekcji „BODY” dokumentu. Ostatni z wymienionych sposobów nie jest jednak zalecany, jako że burzy on podstawowe założenie arkuszy stylów - oddzielenie części prezentacji dokumentu od jego treści.
Element „LINK” wskazuje na alternatywne arkusze stylów, które mogą być wybierane przez odbiorcę. Arkusze importowane są automatycznie łączone z pozostałymi arkuszami stylów.
Aplikacje klienckie zazwyczaj ignorują wszelkie nieznane im znaczniki HTML. Dzięki temu starsze aplikacje zignorują element „STYLE”, ale jego zawartość zostanie potraktowana jako część dokumentu i przetworzona w jego obecnej postaci. Zawartość elementu „STYLE” można ukryć przed starszymi aplikacjami, stosując komentarze w stylu SGML:
<STYLE TYPE="text/css"><!--
H1 { color: green }
--></STYLE>
Ze względu na fakt, że element „STYLE” zadeklarowany jest jako typ "CDATA" w DTD ([2]), parser zgodny z SGML nie potraktuje powyższego arkusza stylów jako komentarza i go nie usunie.
1.2 Grupowanie
Aby zmniejszyć objętość plików CSS, selektory można grupować, oddzielając je przecinkami:
H1, H2, H3 { font-family: helvetica }
Podobnie jak selektory, można także grupować deklaracje:
H1 {
font-weight: bold;
font-size: 12pt;
line-height: 14pt;
font-family: helvetica;
font-variant: normal;
font-style: normal;
}
Dodatkowo, niektóre atrybuty posiadają własną składnię grupowania:
H1 { font: bold 12pt/14pt helvetica }
Powyższy przykład da identyczny rezultat jak przykład poprzedni.
1.3 Dziedziczenie
Na początku tego rozdziału podany został przykład zmieniający kolor wszystkich elementów „H1” na niebieski Załóżmy, że wewnątrz tego elementu znajduje się tekst wyróżniony:
<H1>Nagłówek <EM>jest</EM> ważny!</H1>
Jeżeli elementowi „EM” nie przypisano żadnego innego koloru, to wyróżnione słowo "jest" odziedziczy kolor od swojego elementu rodzica, czyli będzie miało kolor niebieski. Podobnie dziedziczone są inne atrybuty, takie jak np.: „font-family” czy „font-size”. Aby ustawić domyślną wartość stylu dla całego dokumentu, można odpowiednie atrybuty zastosować dla elementu, od którego pochodzą wszystkie pozostałe elementy. W dokumentach HTML do funkcję tę zazwyczaj pełni element „BODY”.
BODY {
color: black;
background: url(texture.gif) white;
}
Powyższy przykład zadziała nawet gdy autor pominie znacznik „BODY” (jest to dopuszczalne), jako że parser doda brakujący znacznik samodzielnie. Powyższy przykład ustawia kolor tekstu na czarny i wstawia grafikę jako tło. Jeżeli obrazek będzie niedostępny, to tło pozostanie białe. (Więcej informacji na ten temat w rozdziale 5.3.)
Niektóre atrybuty nie mogą być dziedziczone. W większości przypadków kwestia dziedziczenia lub nie jest intuicyjna. Np. Atrybut „background” nie jest dziedziczony, ale tło elementu rodzica będzie domyślnie prześwitywać przez inne elementy.
Często wartość atrybutu jest procentem wartości innego atrybutu.
P { font-size: 10pt }
P { line-height: 120% } /* w tym przypadku 12pt (120% z 10 = 12) */
Dla każdego atrybutu, który może przybierać wartości procentowe, zdefiniowano do wartości którego atrybutu wartość ta się odnosi. Elementy dziecka elementu „P” odziedziczą wyliczoną wartość własności „line-height” (12pt), a nie wartość procentową.
1.4 Selektor klasy
W celu zwiększenia możliwości kontroli nad elementami, do HTML [2]dodano nowy atrybut: „CLASS”. Atrybut ten można stosować z wszystkimi elementami znajdującymi się pomiędzy znacznikami <BODY> i </BODY> i odwoływać się do niego z poziomu arkuszy stylów:
<HTML>
<HEAD>
<TITLE>Title</TITLE>
<STYLE TYPE="text/css">
H1.pastoral { color: #00FF00 }
</STYLE>
</HEAD>
<BODY>
<H1 CLASS=pastoral>Way too green</H1>
</BODY>
</HTML>
Elementy posiadające atrybut „CLASS” podlegają zasadom dziedziczenia tak samo jak inne elementy.
Aby odwołać się do wszystkich elementów z określoną wartością atrybutu „CLASS”, należy w miejsce nazwy znacznika wpisać „.” (kropkę), w arkuszu stylów.
.pastoral { color: green } /* dotyczy wszystkich elementów z klasą pastoral */
Do jednego selektora można zastosować tylko jedną klasę. Zatem zapis typu „P.pastoral.marine” jest zapisem nieprawidłowym w CSS1 (W selektorach kontekstowych, opisanych dalej, każdy selektor prosty może należeć do jednej klasy).
Atrybut „CLASS” posiada tak duże możliwości, że dzięki niemu praktycznie z każdego elementu HTML można stworzyć inny element HTML. Aczkolwiek, nadużywanie tych możliwości nie jest zalecane ze względu na możliwość zaburzenia uniwersalnej struktury dokumentu (elementy HTML). Struktura dokumentu oparta o atrybut CLASS okazuje się użyteczna tylko w nielicznych, uzasadnionych przypadkach.
1.5 Selektor identyfikatora
W HTML [2] dostępny jest także atrybut „ID”. Atrybut ten, w przeciwieństwie do atrybutu „CLASS”, jest unikalny, tzn. może występować tylko jeden element w dokumencie posiadający dany identyfikator „ID”. Dzięki temu ma on szczególne znaczenie jako selektor w arkuszach stylów. Do atrybutu „ID” można odwoływać się przy pomocy znaku „#”.
#z98y { letter-spacing: 0.3em }
H1#z98y { letter-spacing: 0.5em }
<P ID=z98y>Wide text</P>
W powyższym przykładzie, pierwszy selektor zmieni wygląd elementu „P”, dzięki odpowiednio ustawionemu atrybutowi „ID”. Drugi selektor, natomiast określa zarówno typ elementu do jakiego zostanie on zastosowany, jak i wartość ID, przez co nie będzie miał wpływu na wygląd elementu „P”.
Używając atrybutu ID jako selektora, każdemu elementowi w dokumencie można nadać unikalny identyfikator. Mimo że arkusze stylów zostały zaprojektowane z myślą o poprawnej strukturze dokumentów HTML, to atrybut „ID” pozwala na tworzenie dokumentów dobrze się prezentujących, ale bez zachowania właściwej struktury dokumentu. Takie użycie arkuszy stylów nie jest zalecane.
1.6 Selektor kontekstowy
Dzięki dziedziczeniu projektant arkusza stylów oszczędza sobie niepotrzebnego pisania. Zamiast ustawiać wszystkie własności stylów, autor może stworzyć style globalne, a następnie wyszczególnić wyjątki. Aby wszystkim elementom „EM” znajdującym się wewnątrz nagłówka „H1” nadać określony kolor, można użyć następującego zapisu:
H1 { color: blue }
EM { color: red }
Powyższy przykład spowoduje zmianę koloru na czerwony wszystkich elementów „H1”. Natomiast, aby tylko elementy „EM” znajdujące się wewnątrz nagłówka „H1” były wyświetlane na czerwono, należy użyć następującego zapisu:
H1 EM { color: red }
Zastosowany w tym przykładzie selektor dopasowuje się do elementów na podstawie kolejności ich występowania w dokumencie. Selektor tego typu nazywa się selektorem kontekstowym. Selektor kontekstowy składa się z kilu selektorów prostych oddzielonych od siebie znakiem spacji (do tej pory mowa była tylko o selektorach prostych). Powyższy przykład zmieni na kolor czerwony zawartość tylko elementów określonych przez ostatni selektor prosty (tutaj element „EM”) i tylko w przypadku, gdy znajdują się one wewnątrz elementu „H1”. Selektory kontekstowe w CSS1 mogą być zapisywane w kolejności rodzic-potomek. Ale niewykluczone, że w przyszłych wersjach CSS możliwe będzie zastosowanie także kolejności odwrotnej. W przykładzie powyżej dopasowanie następuje tylko wtedy, gdy element „EM” jest potomkiem elementu „H1”, tj. znajduje się w jego wnętrzu.
UL LI { font-size: small }
UL UL LI { font-size: x-small }
W tym przykładzie pierwszy selektor pasuje do elementów „LI”, które posiadają co najmniej jeden nadrzędny element „UL”. W drugim przykładzie natomiast, dopasowanie nastąpi, gdy element „LI” będzie potomkiem co najmniej dwóch elementów „UL”. Więcej informacji na ten temat znajduje się w rozdziale 3.2.
Selektory kontekstowe mogą odnajdować elementy na podstawie ich typu, atrybutu CLASS, atrybutu ID lub kombinacji tych wszystkich:
DIV P { font: small sans-serif }
.reddish H1 { color: red }
#x78y CODE { background: blue }
DIV.sidenote H1 { font-size: large }
Pierwszy selektor wyszukuje wszystkie elementy „P”, które są potomkami elementu „DIV”. Drugi selektor wyszukuje wszystkie elementy „H1”, które są potomkami jakiegokolwiek elementu z klasą „reddish”. Trzeci z kolei selektor pasuje do wszystkich elementów „CODE”, które są potomkami elementu o identyfikatorze „78y”. Ostatni selektor pasuje do wszystkich elementów „H1”, które są potomkami elementu „DIV” z klasą „sidenote”.
Selektory kontekstowe można grupować:
H1 B, H2 B, H1 EM, H2 EM { color: red }
Zapis taki równoznaczny jest zapisowi:
H1 B { color: red }
H2 B { color: red }
H1 EM { color: red }
H2 EM { color: red }
1.7 Komentarze
Komentarze w CSS wprowadza się podobnie jak w języku C [7]:
EM { color: red } /* czerwony, naprawdę czerwony!! */
Komentarzy nie można zagnieżdżać. Dla parsera CSS1 komentarz jest równoznaczny z pojedynczym znakiem spacji.
Niniejszy dokument jest tłumaczeniem rekomendacji W3C Cascading Style Sheets, level 1. Tłumaczenie to nie ma statusu dokumentu normatywnego i może zawierać błędy wynikające z tłumaczenia. Tylko dokument znajdujący się na stronie W3C pod adresem http://www.w3.org/TR/REC-CSS1 ma charakter normatywny.
Copyright © 2004 W3C® (MIT, ERCIM, Keio), Wszystkie prawa zastrzeżone. W3C stosuje następujące zasady dotyczące odpowiedzialności cywilnej, znaku towarowego, używania dokumentu i licencji oprogramowania.