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.
Kaskadowe Arkusze Stylów - Poziom 1
Rekomendacja W3C z dnia 17 grudnia 1996 roku, poprawiona dnia 11 stycznia 1999
Status dokumentu
Dokument ten jest rekomendacją W3C. Został on sprawdzony
i zatwierdzony do użytku przez Członków Konsorcjum. Dokument
ten jest stabilny i może być używany jako wiarygodne źródło
informacji oraz cytowany w innych opracowaniach jako normatywne
źródło wiedzy. Konsorcjum W3 popiera wszelkie działania mające na celu
rozpowszechnianie tego dokumentu.
Niniejszy dokument jest poprawioną wersją dokumentu z dnia 17 grudnia 1996 roku.
Streszczenie
Dokument ten opisuje 1 poziom Kaskadowych Arkuszy Stylów (CSS1). CSS1 jest prostym
mechanizmem pozwalającym autorom i odbiorcom na dołączanie stylów do
dokumentów HTML (definiujących np. czcionki, kolory, odstępy). Język CSS1 może być odczytywany i
zapisywany przez człowieka oraz korzysta z
terminologii zaczerpniętej z poligrafii komputerowej.
Jedną z podstawowych właściwości CSS1 jest kaskadowość. Pliki stylów dołączone
przez autora dokumentu, mogą zostać podmienione przez odbiorcę w celu
dopasowania prezentacji do indywidualnych potrzeb. Zasady postępowania
w przypadku konfliktów pomiędzy różnymi arkuszami stylów opisane są
w niniejszej specyfikacji.
Rekomendacja ta jest rezultatem pracy W3C nad Arkuszami Stylów.
Spis treści
Streszczenie
Terminologia
1. Wiadomości podstawowe
1.1 ..... Wstawianie arkuszy stylów do HTML
1.2 ..... Grupowanie
1.3 ..... Dziedziczenie
1.4 ..... Selektor klasy
1.5 ..... Selektor ID
1.6 ..... Selektor potomka
1.7 ..... Komentarze
2. Pseudo klasy i pseudo elementy
2.1 Pseudo klasy hiperłączy
2.2 Pseudo elementy typograficzne
2.3 Pseudo element 'first-line'
2.4 Pseudo element 'first-letter'
2.5 Pseudo elementy w selektorach
2.6 Użycie wielu pseudo elementów na raz
3. Kaskadowość
3.1 ..... Polecenie 'important'
3.2 ..... Kolejność w kaskadzie
4. Model formatowania
4.1 ..... Elementy blokowe
4.1.1 .......... Formatowanie pionowe
4.1.2 .......... Formatowanie poziome
4.1.3 .......... Listy
4.1.4 .......... Elementy pływające
4.2 ..... Elementy śródliniowe
4.3 ..... Elementy osadzone
4.4 ..... Wysokość linii
4.5 ..... Obszar roboczy
4.6 ..... Element br
5. Atrybuty CSS1
5.1 ..... Notacja wartości
5.2 ..... Atrybuty czcionki
5.2.1 .......... Dopasowywanie czcionek
5.2.2 .......... 'font-family'
5.2.3 .......... 'font-style'
5.2.4 .......... 'font-variant'
5.2.5 .......... 'font-weight'
5.2.6 .......... 'font-size'
5.2.7 .......... 'font'
5.3 ..... Atrybuty kolorów i tła
5.3.1 .......... 'color'
5.3.2 .......... 'background-color'
5.3.3 .......... 'background-image'
5.3.4 .......... 'background-repeat'
5.3.5 .......... 'background-attachment'
5.3.6 .......... 'background-position'
5.3.7 .......... 'background'
5.4 ..... Atrybuty tekstu
5.4.1 .......... 'word-spacing'
5.4.2 .......... 'letter-spacing'
5.4.3 .......... 'text-decoration'
5.4.4 .......... 'vertical-align'
5.4.5 .......... 'text-transform'
5.4.6 .......... 'text-align'
5.4.7 .......... 'text-indent'
5.4.8 .......... 'line-height'
5.5 ..... Atrybuty bloków
5.5.1 .......... 'margin-top'
5.5.2 .......... 'margin-right'
5.5.3 .......... 'margin-bottom'
5.5.4 .......... 'margin-left'
5.5.5 .......... 'margin'
5.5.6 .......... 'padding-top'
5.5.7 .......... 'padding-right'
5.5.8 .......... 'padding-bottom'
5.5.9 .......... 'padding-left'
5.5.10 .......... 'padding'
5.5.11 .......... 'border-top-width'
5.5.12 .......... 'border-right-width'
5.5.13 .......... 'border-bottom-width'
5.5.14 .......... 'border-left-width'
5.5.15 .......... 'border-width'
5.5.16 .......... 'border-color'
5.5.17 .......... 'border-style'
5.5.18 .......... 'border-top'
5.5.19 .......... 'border-right'
5.5.20 .......... 'border-bottom'
5.5.21 .......... 'border-left'
5.5.22 .......... 'border'
5.5.23 .......... 'width'
5.5.24 .......... 'height'
5.5.25 .......... 'float'
5.5.26 .......... 'clear'
5.6 ..... Klasyfikowanie
5.6.1 .......... 'display'
5.6.2 .......... 'white-space'
5.6.3 .......... 'list-style-type'
5.6.4 .......... 'list-style-image'
5.6.5 .......... 'list-style-position'
5.6.6 .......... 'list-style'
6. Jednostki
6.1 ..... Jednostki miary
6.2 ..... Jednostki procentowe
6.3 ..... Jednostki kolorów
6.4 ..... URL
7. Zgodność z CSS1
7.1 ..... Przyszłość
8. Literatura
9. Podziękowania
Dodatek A: Przykładowy arkusz stylów dla HTML 2.0
Dodatek B: Gramatyka CSS
Dodatek C: Kodowanie
Dodatek D: Korekcja gamma
Dodatek E: Zastosowanie i rozszerzalność CSS1
Terminologia
Atrybut HTML.
Twórca dokumentu HTML.
Element, po i przed którym następuje złamanie linii (np. 'H1' w HTML).
Ta część klienta, na której wyświetlana jest treść dokumentów.
Podelement w terminologii [5] SGML.
Selektor, który dopasowuje się do elementów na podstawie ich pozycji w strukturze dokumentu.
Selektor kontekstualny składa się z kilku selektorów prostych. Np. selektor kontekstualny 'h1.initial b'
składa się z dwóch selektorów prostych: 'h1.initial' oraz 'b'.
Kaskadowe Arkusze Stylów (ang. Cascading Style Sheets).
Kaskadowe Arkusze Stylów, poziom 1. Dokument ten opisuje CSS1 -
prosty mechanizm stylów stworzony na potrzeby sieci Web.
Własności CSS opisane w tym dokumencie, ale nie należące
do podstawowych cech tego języka.
Ta część specyfikacji, do zgodności z którą powinny dążyć wszystkie przeglądarki obsługujące CSS.
Aplikacja kliencka potrafiąca interpretować CSS1.
Własność (np. 'font-size') i odpowiadająca jej wartość (np. '12pt').
Twórca arkusza stylów.
Dokument HTML.
Element HTML.
Identyfikator rodzajowy w terminologii SGML [5].
Narzędzie pozwalające śledzić zachowanie pseudo klas i pseudo elementów.
Rozmiar, dla jakiego czcionka została zaprojektowana. Zazwyczaj,
rozmiar czcionki jest w przybliżeniu równy odległości pomiędzy spodem najniższej litery
i wierzchem litery najwyższej (opcjonalnie) ze znakiem diakrytycznym.
Hypertext Markup Language [2](Język Znakowania Hipertekstowego) -
aplikacja języka SGML.
Znaczniki wprowadzane przez twórców przeglądarek, najczęściej w celu
dodania możliwości tworzenia pewnych efektów wizualnych. Elementy takie jak: "FONT", "Center" czy "BLINK"
są przykładami rozszerzeń HTML, podobnie jak atrybut "BGCOLOR". Jednym z celów CSS jest
dostarczenie alternatywy dla rozszerzeń HTML.
Element, po i przed którym nie następuje złamanie linii (np. 'STRONG' w HTML).
Szerokość i wysokość własna elementu, nie zmieniona w żaden sposób przez inne elementy.
W specyfikacji tej przyjęto założenie, że wszystkie elementy osadzone (i tylko one) posiadają
wymiary własne.
Element, który może zawierać inne elementy w terminologii SGML [5].
W selektorach CSS, pseudo elementy używane są do odnoszenia się do elementów typograficznych
(np. pierwsza linia tekstu w elemencie).
W selektorach CSS, pseudo klasy pozwalają na dostęp do informacji,
któe nie są zawarte w kodzie HTML (np. czy kliknięto dany link, czy też nie), co pozwala na odpowiednią
klasyfikację elementów.
Parametr stylistyczny, który można zmieniać przy pomocy CSS.
Specyfikacja ta definiuje całą listę własności wraz z odpowiadającymi im wartościami.
Osoba, która jest adresatem dokumentu (także użytkownik).
Element, którego znane są tylko wymiary własne. Przykładami
tego typu elementów w HTML są: 'IMG', 'INPUT', 'TEXTAREA', 'SELECT' oraz
'OBJECT'. Zawartość elementu 'IMG' jest często zastępowana przez obrazek, na źródło którego
wskazuje atrybut SRC. CSS1 nie informuje w jaki sposób klient powinien odnajdować
wymiary własne elementów.
Deklaracja (np. 'font-family: helvetica') z selektorem (np. 'H1').
Ciąg znaków wskazujący do czego odnosi się odpowiadająca mu reguła.
Są dwa rodzaje selektorów: selektor prosty (np. 'H1') i selektor kontekstualny
(np. 'H1 B'), któy składa się z kilku selektorów prostych.
Standard Generalized Markup Language [5] (Standardowy Uniwersalny Język Znakowania). HTML jest aplikacją tego języka.
Selektor, który dopasowuje się do elementów na podstawie
ich typu i/lub atrybutów, a nie na podstawie ich pozycji w hierarchii dokumentu.
Np. 'H1.initial' jest selektorem prostym.
Zbiór reguł
Aplikacja kliencka (klient), najczęściej jest to przeglądarka internetowa (ang. User Agent).
To samo co odbiorca.
Ważność zasady
W specyfikacji tej w apostrofy ('...') ujęto przykłady kodu HTML i CSS.
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 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>title</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>Headline is blue</H1>
<P STYLE="color: green">While the paragraph is green.
</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 idebtyczny 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 kontekstualnych, opisanych poniżej, 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 "ID"
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 potomka
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 potomka. Selektor potomka 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 potomka 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 potomka 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 potomka 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.
2. Pseudo klasy i pseudo elementy
W CSS1 style dopasowują się do elementów na podstawie ich miejsca w strukturze dokumentu. Do wielu zastosowań
ten prosty model postępowania jest wystarczający, ale nie do wszystkich. Głównym zadaniem pseudo klas i pseudo elementów jest
zwiększenie możliwości kontroli nad wyglądem dokumentu poprzez umożliwienie autorowi dostępu do informacji zewnętrznych.
Pseudo klas i pseudo elementów można używać w selektorach, ale nie występują one w kodzie HTML. Są one "wstawiane" przez
aplikację kliencką w określonych warunkach, aby można było się do nich odwoływać. Nazywa się je najczęściej "klasami" lub
"elementami", jako że jest to najdogodniejszy sposób opisu ich zachowania. Bardziej trafnym sposobem opisu ich zachowania
jest fikcyjna sekwencja znaczników.
Pseudo elementy służą do odwoływania się do określonych części elementów, podczas gdy pseudo klasy pozwalają na rozróżnienie pomiędzy typami elementów.
2.1 Pseudo klasy hiperłączy
Nowo odwiedzone linki są zazwyczaj wyświetlane w odmienny sposób przez przeglądarki niż pozostałe łącza na stronie.
W CSS1 można kontrolować ich wygląd przy pomocy pseudo klas dla elementu 'A':
A:link { color: red } /* łącze jeszcze nie odwiedzone */
A:visited { color: blue } /* łącze odwiedzone */
A:active { color: lime } /* łącze aktywne */
Wszystkie elementy 'A' z atrybutem 'HREF' zostaną zaklasyfikowane tylko
do jednej z tych grup (tj. łącza z atrybutem target pozostają bez
zmian). Przeglądarka może po jakimś czasie wrócić do podstawowego koloru
(pseudo klasa 'link') odnośników odwiedzonych (pseudo klasa 'visited'). Pseudo klasa 'active'
służy do zmiany wyglądu odnośników, które są w jakiś sposób zaznaczone (np. kliknięcie przyciskiem myszki) przez odbiorcę.
Formatując element, dla którego zdefiniowano pseudo klasę hieprłączy
przeglądarka nie musi ładować całego dokumentu od nowa, tylko
dokonuje reformatowania elementu na bieżącej stronie, w taki sposób
jakby klasa została wpisana ręcznie. Oznacza to, że
gdy arkusz stylów nakazuje wyświetlać odnośniki aktywne ('active')
czcionką większą niż odnośniki odwiedzone, to przeglądarka nie musi
reformatować dynamicznie całego dokumentu gdy użytkownik kliknie na
odwiedzanym już łączu.
Selektory pseudo klas nie pasują do zwykłych klas i odwrotnie. Poniższa zasada nie wywołałaby żadnego efektu:
A:link { color: red }
<A CLASS=link NAME=target5> ... </A>
W CSS1 pseudo klasy hiperłączy działają tylko na element 'A'. Dzięki
temu w selektorze można opuścić element, do którego się on odnosi:
A:link { color: red }
:link { color: red }
Obydwa powyższe selektory w CSS1 wywołają podobny efekt.
W nazwach pseudo klas nie rozróżniane są małe i wielkie litery
Pseudo klas można używać w selektorach potomka:
A:link IMG { border: solid blue }
Pseudo klasy można także stosować w połączeniu ze zwykłymi klasami:
A.external:visited { color: blue }
<A CLASS=external HREF="http://out.side/">external link</A>
Jeżeli odnośnik w powyższym przykładzie został odwiedzony, to jego kolor zmieni się na niebieski.
Nazwy zwykłych klas w selektorach występują przed nazwami pseudo-klas.
2.2 Pseudo elementy typograficzne
Niektóre efekty typograficzne nie są związane ze strukturą dokumentu, lecz z elementami typograficznymi widocznymi
w oknie przeglądarki lub w obszarze roboczym. W CSS1 można uzyskać dostęp do dwóch takich elementów
przy pomocy pseudo elementów: pierwsza linia elementu oraz pierwsza litera.
CSS1 core: Aplikacja kliencka może zignorować reguły zawierające pseudo elementy
':first-line' lub ':first-letter' w selektorze lub alternatywnie obsługiwać tylko podzbiór tych własności
dla tych pseudo-elementów (rozdział 7).
2.3 Pseudo element 'first-line'
Pseudo element 'first-line' służy do zmiany wyglądu pierwszej linii tekstu.
<STYLE TYPE="text/css">
P:first-line { font-variant: small-caps }
</STYLE>
<P>Pierwsza linia artykułu z Newsweeka</P>
W przeglądarce tekstowej powyższy fragment mógłby wyglądać następująco:
PIERWSZA LINIA
artykułu z Newsweeka.
Fikcyjna sekwencja znaczników w powyższym przykładzie wygląda następująco:
<P>
<P:first-line>
Pierwsza linia
</P:first-line>
artykułu w Newsweeku.
</P>
Znacznik zamykający 'first-line' został umieszczony na końcu pierwszej linii wg formatowania w obszarze roboczym.
Pseudo element 'first-line' może być stosowany tylko z elementami blokowymi.
Pseudo element 'first-line' ma podobne właściwości jak element śródliniowy z pewnymi ograniczeniami.
Tylko następujące atrybuty mogą być stosowane dla elementu 'first-line': atrybuty czcionki
(5.2),
kolory i tło (5.3), 'word-spacing' (5.4.1), 'letter-spacing'
(5.4.2), 'text-decoration' (5.4.3),
'vertical-align' (5.4.4), 'text-transform' (5.4.5),
line-height' (5.4.8), 'clear' (5.5.26).
2.4 Pseudo element 'first-letter'
Pseudo element 'first-letter' służy do zmiany wyglądu pierwszej litery lub rozciągania pierwszej litery na dolne linie.
Pseudo element 'first-letter' przypomina elementy śródliniowe, jeżeli ma ustawioną własność 'float' na 'none'. W przeciwnym
wypadku zachowuje się jak elementy pływające. Atrybuty, które mogą być stosowane dla pseudo elementu 'first-letter':
atrybuty czcionki (5.2), kolory i tło (5.3),
'text-decoration' (5.4.3), 'vertical-align'
(tylko jeżeli wartość 'float' ustawiona jest na 'none', (5.4.4),
'text-transform' (5.4.5), 'line-height' (5.4.8),
marginesy (5.5.1-5.5.5),
dopełnienie (5.5.6-5.5.10),
obramowanie (5.5.11-5.5.22),
'float' (5.5.25), 'clear' (5.5.26).
Poniższy przykład przedstawia jak można uzyskać efekt rozciągnięcia pierwszej litery na dwie linie:
<HTML>
<HEAD>
<TITLE>Title</TITLE>
<STYLE TYPE="text/css">
P { font-size: 12pt; line-height: 12pt }
P:first-letter { font-size: 200%; float: left }
SPAN { text-transform: uppercase }
</STYLE>
</HEAD>
<BODY>
<P><SPAN>The first</SPAN> few words of an article in The Economist.</P>
</BODY>
</HTML>
Jeżeli przeglądarka tekstowa obsługiwałaby pseudo element 'first-line' (a prawdopodobnie nie obsługuje),
powyższy przykład mógłby wyglądać następująco:
___
| HE FIRST few
| words of an
article in the
Economist.
Fikcyjna sekwencja znaczników przedstawia się następująco:
<P>
<SPAN>
<P:first-letter>
T
</P:first-letter>he first
</SPAN>
few words of an article in the Economist.
</P>
Należy zauważyć, że znacznik otwierający i zamykający pseudo elementu 'first-letter'
umieszczone są bezpośrednio przed i po literze, którą zmieniają, podczas gdy
znacznik otwierający pseudo elementu 'first-line' umieszczany jest bezpośrednio
po znaczniku otwierającym elementu, do którego się odnosi.
O tym, które znaki znajdą się wewnątrz elementu 'first-letter' decyduje przeglądarka. Znaki cudzysłowu
poprzedzające pierwszą literę normalnie powinny znaleźć się wewnątrz pseudo elementu.
|| /\ bird in
/ \ the hand
/----\ is worth
/ \ two in
the bush," says an
old proverb.
Natomiast znaki takie jak np. nawias lub wielokropek lub inne normalnie nie zaliczane do liter
(np. cyfry, symbole matematyczne) które pojawiają się na początku, są zazwyczaj ignorowane przez pseudo element
'first-letter'.
W niektórych językach mogą istnieć oddzielne zasady dotyczące traktowania pewnych kombinacji liter.
Na przykład w języku holenderskim kombinacja liter "ij" pojawiająca się na początku słowa
powinna być traktowana przez pseudo element 'first-letter' jako jeden znak.
Pseudo element 'first-letter' można stosować tylko dla elementów blokowych.
2.5 Pseudo elementy w selektorach
Pseudo elementy mogą występować tylko na końcu selektorów potomka:
BODY P:first-letter { color: purple }
Pseudo elementy można także łączyć ze zwykłymi klasami w selektorach:
P.initial:first-letter { color: red }
<P CLASS=initial>First paragraph</P>
Powyższy przykład spowodowałby, że pierwsza litera wszystkich elementów 'P' z klasą 'initial'
miałaby kolor czerwony. W kombinacji z klasami lub pseudo klasami, pseudo elementy powinny
występować na końcu selektora. W selektorze może znajdować się maksymalnie jeden pseudo element.
2.6 Użycie wielu pseudo elementów naraz
Możliwe jest użycie kilku pseudo-elementów naraz:
P { color: red; font-size: 12pt }
P:first-letter { color: green; font-size: 200% }
P:first-line { color: blue }
<P>Trochę tekstu, który zajmuje dwie linijki</P>
W tym przykładzie, pierwsza litera każdego elementu 'P' miałaby kolor zielony, a wielkość czcionki
wynosiłaby 24pt. Reszta pierwszej linii (zgodnie z tym jak tekst został wyświetlony na ekranie)
byłaby niebieska. Zakładając, że złamanie linii nastąpi przed słowem "zajmuje", fikcyjna
sekwencja znaczników wyglądałaby następująco:
<P>
<P:first-line>
<P:first-letter>
T
</P:first-letter>Trochę tekstu, który
</P:first-line>
zajmuje dwie linijki
</P>
Element 'first-letter' znajduje się wewnątrz elementu 'first-line'. Element 'first-letter' odziedziczy wszystkie właściwości
elementu 'first-line'. Jeżeli, natomiast takie same własności zostały zdefiniowane dla obu elementów, to zostaną one
nadpisane.
Jeżeli zdarzy się sytuacja, w której pseudo element "rozrywa" jakiś rzeczywisty element, to zachodzi potrzeba
utworzenia dodatkowych znaczników w fikcyjnej sekwencji znaczników. Na przykład, jeżeli element SPAN rozciąga
się poza fikcyjny znacznik </P:first-line>, to zostanie utworzona dodatkowa para otwierającego i zamykającego
znacznika SPAN, a fikcyjna sekwencja znaczników wygląda następująco:
<P>
<P:first-line>
<SPAN>
Ten tekst znajduje się wewnątrz długiego
</SPAN>
</P:first-line>
<SPAN>
elementu SPAN
</SPAN>
3. Kaskadowość
W CSS na prezentację dokumentu można wpływać przy pomocy wielu arkuszy stylów naraz.
Decydują o tym dwie właściwości CSS: modularność oraz równowaga autor/odbiorca.
Modularność
Projektant może połączyć kilka arkuszy stylów, aby uniknąć niepotrzebnego pisania:
@import url(http://www.style.org/pastoral);
@import url(http://www.style.org/marine);
H1 { color: red } /* zastępuje importowane arkusze */
Równowaga autor/odbiorca
Zarówno autor jak i odbiorca może wpływać na prezentację dokumentu przy pomocy arkuszy stylów. W tym celu korzystają
oni z tego samego języka odzwierciedlając w ten sposób jedną z fundamentalnych cech sieci WWW, że każdy może publikować
własne dokumenty. Sposób postępowania z osobistymi arkuszami stylów uzależniony jest od konkretnej aplikacji klienckiej.
Czasami mogą wystąpić konflikty pomiędzy różnymi arkuszami stylów. Problem ten rozwiązuje się za pomocą
nadania stylom stopni ważności. Domyślnie, style użytkownika mają mniejszą ważność od stylów autora. To znaczy, że jeżeli
w przychodzącym dokumencie wystąpią jakiekolwiek konflikty pomiędzy stylami autora i użytkownika, to
zastosowane zostaną style autora dokumentu. Ważność najmniejszą mają style domyślne aplikacji.
Importowane arkusze stylów segregowane są kaskadowo, wg kolejności w jakiej zostały dołączone zgodnie z
zasadami opisanymi poniżej. Jeżeli w dokumencie istnieją jakiekolwiek wpisane arkusze, to mają one
pierwszeństwo przed arkuszami importowanymi. Mówiąc inaczej, arkusze importowane znajdują się na niższym
poziomie w kaskadzie niż style wpisane. Style importowane mogą same importować i nadpisywać
inne arkusze stylów w sposób rekurencyjny.
W CSS1, wszystkie polecenia '@import' muszą pojawić się na samym początku arkusza stylów, przed
jakimikolwiek deklaracjami. Dzięki temu jasne jest, że style wpisane mają pierwszeństwo
przed stylami importowanymi.
3.1 Polecenie 'important'
Twórca arkusza stylów może podnieść ważność swoich deklaracji:
H1 { color: black ! important; background: white ! important }
P { font-size: 12pt ! important; font-style: italic }
W powyższym przykładzie, trzy pierwsze deklaracje mają podwyższoną ważność, natomiast ostatnia deklaracja
ma ważność normalną.
Reguła użytkownika z deklaracją opatrzoną poleceniem important ma
pierwszeństwo przed regułą autora o normalnej ważności.
Natomiast zasada autora z deklaracją opatrzoną poleceniem ważności ma
pierwszeństwo przed regułą użytkownika z deklaracją z poleceniem
ważności.
3.2 Kolejność w kaskadzie
Konflikty reguł towarzyszą nieodłącznie mechanizmowi CSS. Aby odnaleźć wartość elementu/atrybutu, należy
zastosować następującą procedurę postępowania:
- Znajdź wszystkie deklaracje, które mają zastosowanie do danego elementu/reguły. Deklaracje
mają zastosowanie, gdy selektor pasuje do danego elementu. Jeżeli nie ma żadnych pasujących deklaracji,
to dziedziczona jest wartość elementu nadrzędnego. Jeżeli nie ma takiej wartości (dotyczy elementu 'HTML'
oraz reguł, które nie są dziedziczone), to stosowana jest wartość domyślna.
- Posortuj deklaracje wg poziomu ich ważności: deklaracje oznaczone jako '!important' mają podwyższony priorytet
w stosunku do zwykłych deklaracji (nieoznaczonych).
- Posortuj według pochodzenia: arkusze autora dokumentu mają większą ważność
od arkuszy użytkownika. Najniższy priorytet mają domyślne style przeglądarki (aplikacji klienckiej). Importowane
arkusze stylów mają taki sam priorytet jak arkusze, z których zostały one pobrane.
- Posortuj wg precyzji selektorów: selektory bardziej precyzyjne mają pierwszeństwo przed
selektorami ogólniejszymi. Aby obliczyć precyzyjność selektora, należy ustawić w kolejności
jedna po drugiej następujące cyfry: liczba atrybutów ID w selektorze (a), liczba atrybutów CLASS
w selektorze (b), liczba nazw znaczników HTML w selektorze (c).
LI {...} /* a=0 b=0 c=1 -> szczegółowość = 1 */
UL LI {...} /* a=0 b=0 c=2 -> szczegółowość = 2 */
UL OL LI {...} /* a=0 b=0 c=3 -> szczegółowość = 3 */
LI.red {...} /* a=0 b=1 c=1 -> szczegółowość = 11 */
UL OL LI.red {...} /* a=0 b=1 c=3 -> szczegółowość = 13 */
#x34y {...} /* a=1 b=0 c=0 -> szczegółowość = 100 */
Pseudo elementy i pseudo klasy traktowane są jak zwykłe elementy i klasy.
- Sortuj wg ustalonej kolejności. Jeżeli dwie reguły mają taką samą ważność, pod uwagę brana jest ta druga.
Wszelkie importowane reguły, występują przed regułami znajdującymi się bezpośrednio w arkuszu.
Szukanie wartości atrybutu może zostać przerwane jeżeli znajdzie się reguła o większym stopniu
ważności niż inne reguły, które odnoszą się do tej samej kombinacji elementu/atrybutu.
Dzięki takiej strategii, arkusze stylów twórcy dokumentu zyskują znaczną przewagę nad stylami użytkownika.
Ważne jest więc, aby umożliwić użytkownikowi wyłączenie niektórych arkuszy stylów, np. przy pomocy
listy rozwijanej.
Deklaracja w atrybucie 'STYLE' elementu HTML ma taką samą ważność jak zawartość atrybutu ID dopisanego na końcu arkusza stylów:
<STYLE TYPE="text/css">
#x97z { color: blue }
</STYLE>
<P ID=x97z STYLE="color: red">
W powyższym przykładzie, zawartość elementu 'P' byłaby wyświetlona na czerwono. Mimo że obie deklaracje posiadają
taki sam stopień precyzji, to deklaracja zawarta w atrbucie 'STYLE' ma pierwszeństwo przed regułą w elemencie
'STYLE' ze względu na 5 zasadę powyżej.
Przeglądarka może także uznawać pewne stylistyczne atrybuty HTML, jak
np. atrybut 'ALIGN'. W takim przypadku
atrybuty te konwertowane są na odpowiadające im reguły CSS i nadawana
jest im precyzyjność na poziomie 1.
Umieszczane są one umownie na samym początku arkusza stylów i mogą
zostać zastąpione przez następujące po nich
reguły. W ten sposób łatwiej jest pogodzić współwystępujące ze sobą
atrybuty stylistyczne i arkusze stylów w fazie transformacji.
4. Model formatowania
W CSS 1 istnieje prosty mechanizm zwany modelem formatowania blokowego, który zakłada, że
każdy element reprezentowany jest w postaci jednego lub więcej prostokątnych bloków
(elementy z wartością 'none' dla własności 'display' nie są w ogóle formatowane,
w związku z czym nie występują jako bloki). Każdy blok składa się z właściwej treści oraz
opcjonalnie towarzyszących mu dopełnienia (padding) i marginesów (margin).
_______________________________________
| margines |
| (przezroczysty) |
| _________________________________ |
| | | |
| | krawędź | |
| | ___________________________ | |
| | | | | |
| | | dopełnienie | | |
| | | _____________________ | | |
| | | | | | | |
| | | | zawartość | | | |
| | | |_____________________| | | |
| | |___________________________| | |
| |_________________________________| |
|_______________________________________|
| szerokość elementu |
| szerokość bloku |
Rozmiar marginesów zewnętrznych, marginesów wewnętrznych oraz ramek ustawia się odpowiednio przy pomocy
atrybutów: margin 5.5.1-5.5.5,
padding 5.5.6-5.5.10 oraz
border 5.5.11-5.5.22.
Obszar zajmowany przez dopełnienie przyjmuje tło (ustawione przy pomocy atrybutów
tła 5.3.2-5.3.7)
takie samo jak element, dla którego zostało zdefiniowane. Kolor i styl ramek ustalane są przy
pomocy odpowiednich atrybutów CSS. Marginesy są zawsze przezroczyste.
Rozmiar całego bloku jest sumą szerokości elementu (tj. tekstu który zawiera lub obrazka), marginesów,
dopełnienia oraz ramek.
Z punktu widzenia formatera istnieją dwa typy elementów: elementy blokowe i elementy śródliniowe.
4.1 Elementy blokowe
Elementy z atrybutem 'display' ustawionym na 'block' lub 'list-item' są elementami
blokowymi. Do elementów blokowych zalicza się również elementy pływające (floating elements),
czyli elementy których wartość atrybutu 'float' jest różna od 'none'.
Poniższy przykład ilustruje sposób formatowania elementu 'UL' z dwoma elementami potomnymi
przy obecności dopełnienia i marginesów. Dla uproszczenia pominięto ramki.
Litery zastosowane jako wartości nie są prawidłowymi wartościami
w CSS1, ale ich zastosowanie pozwala na przedstawienie relacji pomiędzy
arkuszem stylów a obrazkiem w sposób bardziej przejrzysty.
<STYLE TYPE="text/css">
UL {
background: red;
margin: A B C D;
padding: E F G H;
}
LI {
color: white;
background: blue; /* biały tekst na niebieskim tle */
margin: a b c d;
padding: e f g h;
}
</STYLE>
..
<UL>
<LI>Pierwszy element listy
<LI>Drugi element listy
</UL>
_______________________________________________________
| |
| A margines UL (przezroczysty) |
| _______________________________________________ |
| D | | B |
| | E dopełnienie UL(czerwone) | |
| | _______________________________________ | |
| | H | | F | |
| | | a margines LI (przezroczysty | | |
| | | prześwituje kolor czerwony) | | |
| | | _______________________________ | | |
| | | d | | b | | |
| | | | e dopełnienie LI (niebieskie)| | | |
| | | | | | | |
| | | | h pierwszy element listy f | | | |
| | | | | | | |
| | | | g | | | |
| | | |_______________________________| | | |
| | | | | |
| | | max(a, c) | | |
| | | _______________________________ | | |
| | | | | | | |
| | | d | e dopełnienie LI (niebieskie)| | | |
| | | | | | | |
| | | | h Drugi element listy f | | | |
| | | | | | | |
| | | | g | | | |
| | | |_______________________________| | | |
| | | | | |
| | | c margines LI (przezroczysty, | | |
| | | prześwituje kolor czerwony) | | |
| | |_______________________________________| | |
| | | |
| | G | |
| |_______________________________________________| |
| |
| C |
|_______________________________________________________|
Technicznie rzecz biorąc, dopełnienie i marginesy nie są dziedziczone. Ale przykład pokazuje,
że umiejscowienie elementu jest uzależnione od jego przodków i elementów braci, przez co marginesy elementów
rodzica mają wpływ na elementy potomka.
Gdyby w powyższym przykładzie uwzględniono ramki, to znajdowałyby się one pomiędzy
dopełnieniem a marginesami
Poniższy diagram wprowadza trochę przydatnej terminologii:
--------------- <-- wierzch bloku
margines górny
---------------
krawędź górna
---------------
dopełnienie górne
+-------------+ <-- wierzch elementu
| | | | | | | |
|--lewy-- |--lewa--|--lewe--|-- treść --|--prawe--|--prawa--|--prawy--|
| margines | krawędź| dopełn.| | dopełn. | krawędź | margin. |
| | ramki | | | | ramki | |
+-------------+ <-- spód elementu
^ ^ ^ ^
lewa lewa krawędź wewnętrzna prawa krawędź wewn. prawa
krawędź krawędź
zewnętrzna dopełnienie dolne zewnętrzna
---------------
krawędź dolna
---------------
margines dolny
--------------- <-- spód bloku
Lewą krawędź zewnętrzną stanowi krawędź elementu z uwzględnieniem dopełnienia, krawędzi i marginesu. Lewą krawędź wewnętrzną stanowi krawędź zawartości elementu. To samo tyczy się prawej krawędzi wewnętrznej. Wierzch bloku to wierzch elementu znajdujący się ponad
dopełnieniem, krawędzią i marginesem (zdefiniowany tylko dla elementów śródliniowych i pływających.
Nie dotyczy elementów "niepływających" oraz blokowych). Wierzch elementu to górna granica
zawartości elementu, bez dopełnienia, krawędzi i marginesu. Spód bloku to dolna granica bloku, znajdująca
się poniżej dopełnienia, krawędzi i marginesu (zdefiniowany tylko dla
elementów śródliniowych i pływających.
Nie dotyczy elementów "niepływających" oraz blokowych). Spód elementu to
dolna granica zawartości elementu, bez dopełnienia, krawędzi i
marginesu.
Szerokość elementu odpowiada szerokości jego zawartości. Inaczej mówiąc jest to odległość pomiędzy
prawą i lewą krawędzią wewnętrzną. Wysokość elementu to odległość pomiędzy wierzchem i spodem elementu.
Szerokość marginesów "niepływających" elementów blokowych określa minimalną odległość bloku
od krawędzi otaczających go bloków. Jeżeli dwa marginesy pionowe znajdą się obok siebie
(tzn. nie będzie pomiędzy nimi obramowania ani dopełnienia), to ich wartości nie zsumują się, ale
ulegną połączeniu w ten sposób, że margines o mnieszej wartości zostanie usunięty, a odległość między
elementami będzie równa wartości większego marginesu.
W większości przypadków, rezultat takiego zabiegu jest wizualnie
bardziej atrakcyjny i bliższy zamierzeniom autora. W przykładzie powyżej, marginesy pomiędzy dwoma elementami
'LI' zostały scalone. Podobnie, gdyby pomiędzy elementem 'UL' i pierwszym elementem 'LI' dopełnienie wynosiło zero,
to marginesy tych elementów scaliłyby się.
Jeżeli wartość marginesów scalonych ma wartość ujemną, to wartość ta jest odejmowana od dodatniej
wartości marginesów scalonych. Jeżeli nie ma marginesu o dodatniej wartości, to odejmowanie wartości
marginesu scalonego wykonywane jest od zera.
Rozmiar i położenie w poziomie "niepływających" elementów blokowych określa się przy
pomocy siedmiu atrybutów: 'margin-left', 'border-left', 'padding-left', 'width', 'padding-right',
'border-right' oraz 'margin-right'. Suma wartości tych wszystkich atrybutów jest zawsze równa szerokości ('width')
elementu nadrzędnego, w którym znajduje się dany blok.
Domyślnie szerokość ('width') elementu ustawiona jest na wartość'auto'. Jeżeli element nie jest elementem osadzonym,
oznacza to że jego szerokość obliczona zostanie przez przeglądarkę, w taki sposób, że suma wartości
wszystkich siedmiu atrybutów, o których mowa powyżej będzie równa szerokości elementu rodzica. W przypadku
elementów osadzonych, wartość 'auto' atrybutu 'width' jest automatycznie zamieniana na wymiary własne elementu.
Trzy z siedmiu wymienionych atrybutów może przybierać wartość 'auto': 'margin-left', 'width' oraz 'margin-right'.
W przypadku elementów osadzonych, których wartość 'auto' dla atrybutu 'width' jest automatycznie zastępowana wymiarami
własnymi elementu, możliwe są wartości 'auto' tylko dla dwóch atrybutów.
Minimalna szerokość elementu uzależniona jest od aplikacji klienckiej, ale nie może
być liczbą ujemną (minimalna szerokość może być różna dla różnych elementów i uzależniona od
innych atrybutów). Jeżeli szerokość elementu jest mniejsza od dopuszczalnej, to zostanie
ona automatycznie powiększona do dopuszczalnej wartości.
Jeżeli tylko jeden z atrybutów 'margin-left', 'width' lub 'margin-right' ma wartość 'auto',
to aplikacja kliencka nada mu taką szerokość, aby suma wartości wszystkich siedmiu ztrybutów
była równa szerokości elementu rodzica.
Jeżeli żaden atrybut nie ma przypisanej wartości 'auto', to zostanie ona
nadana atrybutowi 'margin-right'.
Jeżeli więcej niż jeden z tych trzech atrybutów ma wartość 'auto' i jeden z nich to atrybut 'width',
to pozostałe ('margin-left' i/lub 'margin-right') zostaną ustawione na zero a szerokość ('width') zostanie
ustawiona w taki sposób, aby suma wszystkich siedmiu wynosiła tyle samo co szerokość elementu rodzica.
Jeżeli zarówno atrybut 'margin-left' jak i 'margin-right' mają ustaloną wartość 'auto', to zostaną im nadane takie
same wartości. Dzięki temu element zostanie wypośrodkowany wewnątrz elementu rodzica.
Jeżeli wartość 'auto' zostanie nadana jednemu z wymienionych siedmiu atrybutów w elemencie śródliniowym lub
pływającym, to zostanie ona potraktowana jako zero.
W przeciwieństwie do marginesów pionowych, marginesy poziome nie podlegają scalaniu.
4.1.3 Listy
Elementy z atrybutem 'display' o wartości 'list-item' formatowane są jako elementy blokowe poprzedzone
symbolem reprezentującym element listy. Rodzaj symbolu określany jest przez atrybut 'list-style'.
Umiejscowienie symbolu elementu listy uzależnione jest od wartości atrybutu 'list-style':
<STYLE TYPE="text/css">
UL { list-style: outside }
UL.compact { list-style: inside }
</STYLE>
<UL>
<LI>pierwszy element listy jest zawsze pierwszy
<LI>drugi element listy jest zawsze drugi
</UL>
<UL CLASS=COMPACT>
<LI>pierwszy element listy jest zawsze pierwszy
<LI>drugi element listy jest zawsze drugi
</UL>
</pre>
Sposób formatowania powyższego przykłady może wyglądać następująco:
* pierwszy element listy
jest zawsze pierwszy
* drugi element listy
jest zawsze drugi
* pierwszy element listy
jest zawsze pierwszy
* drugi element listy
jest zawsze drugi
W tekście pisanym od prawej do lewej, symbole elementów listy pojawiłyby się po prawej stronie.
4.1.4 Elementy pływające
Przy użyciu atrybutu 'float' można wykluczyć dany element z normalnego układu elementów na stronie.
Wszystkie elementy pływające (floating elements) są zarazem elementami blokowymi. Np. nadając wartość 'left'
atrybutowi 'float' dla elementu 'IMG' spowoduje się przesunięcie obrazka w lewo aż do napotkania marginesu,
dopełnienia lub krawędzi innego elementu blokowego. Pozostałe elementy na stronie
będą otaczały element pływający z prawej strony. Marginesy i dopełnienie oraz ramki takiego elementu
pozostają bez zmian. Ponadto marginesy elementów pływających nigdy nie ulegają scalaniu.
Pozycjonowanie elementów pływających podlega następującym zasadom (objaśnienie użytych terminów
znajduje się w podrozdziale 4.1):
- Lewa krawędź zewnętrzna elementu pływającego do lewej nie może znajdować się
po lewej stronie lewej krawędzi wewnętrznej elementu nadrzędnego. Analogicznie
dla elementów pływających do prawej.
- Lewa krawędź zewnętrzna elementu pływającego do lewej musi znajdować się po prawej stronie
prawej zewnętrznej krawędzi wszystkich wcześniejszych (w kodzie HTML) elementów pływających do lewej lub
jego wierzch musi znajdować się poniżej spodu wszystkich wcześniejszych elementów pływających. Analogicznie dla elementów
pływających do prawej.
- Prawa krawędź zewnętrzna elementu pływającego do lewej nie może znajdować się po prawej stronie
lewej krawędzi zewnętrznej elementu pływającego do prawej, który znajduje się po jego prawej stronie.
Analogicznie dla elementów pływających do prawej.
- Wierzch pływającego bloku nie może znajdować się wyżej niż wierzch jego elementu rodzica.
- Wierzch pływającego bloku nie może znajdować się wyżej niż wierzch któregokolwiek wcześniejszego
bloku pływającego lub elementu blokowego.
- Wierzch pływającego bloku nie może znajdować się wyżej niż wierzch bloku-linii
(patrz podrozdział 4.4) z zawartością, która poprzedza
ten element w kodzie HTML.
- Element pływający musi znajdować się jak najwyżej.
- Element pływający do lewej musi być wysunięty jak najdalej w lewo, natomiast
element pływający do prawej, w prawo. Jeżeli jest możliwość umieszczenia elementu
albo wyżej albo dalej, w którąś stronę, preferowana jest wyższa pozycja.
<STYLE TYPE="text/css">
IMG { float: left }
BODY, P, IMG { margin: 2em }
</STYLE>
<BODY>
<P>
<IMG SRC=img.gif>
To jest tylko przykładowy tekst...
</BODY>
Przykładowy sposób formatowania powyższego przykładu:
________________________________________
|
| max(BODY margin, P margin)
| ______________________________
| | | To jest tylko
| B | P | IMG margins przykładowy tekst
| O | | _____ którego zadaniem
| D | m | | | jest pokazać sposób
| Y | a | | IMG | w jaki elementy pływające
| | r | | | przesuwają się wewnątrz
| m | g | |_____| elementu rodzica
| a | i | z uwzględnieniem
| r | n | marginesów, obramowania
| g | | i dopełnienia. Warto
| i | |zauważyć, jak przylegające marginesy pionowe
| n | |łączą się pomiędzy "niepływającymi"
| | |elementami blokowymi.
Warto zauważyć, że element 'IMG' w całości zawiera się w obrębie elementu 'P'.
Elementy pływające mogą nachodzić na marginesy, ramki lub dopełnienie innych
elementów tylko w dwóch sytuacjach:
- Kiedy margines elementu pływającego ma ustawioną wartość ujemną.
(marginesy ujemne w elementach pływających traktowane są tak samo jak w
w elementach blokowych).
- Kiedy element pływający jest szerszy lub wyższy od elementu, w którym się znajduje.
4.2 Elementy śródliniowe
Elementy, które nie są formatowane jako elementy blokowe są elementami śródliniowymi. Oznacza to, że mogą one występować
razem z innymi elementami w jednej linii. Rozpatrzmy poniższy przykład:
<P>Kilka <EM>wyróżnionych</EM> słów <STRONG>na ekranie</STRONG>.</P>
Domyślnie, element 'P' jest elementem blokowym, natomiast 'EM' i 'STRONG' to elementy śródliniowe.
Jeżeli szerokość elementu 'P' na to pozwoli, w jednej linijce znajdą się dwa elementy śródliniowe:
Kilka wyróżnionych słów na ekranie.
W sytuacji, gdy element śródliniowy nie mieści się w jednej linijce, następuje jego podział
na kilka bloków:
<P>Kilka <EM>wyróżnionych</EM> słów <STRONG>na ekranie</STRONG>.</P>
Przykładowy sposób formatowania powyższego przykładu:
Kilka wyróżnionych
słów na ekranie.
Marginesy, ramki, dopełnienie i styl tekstu nie mają wpływu na miejsce wystąpienia złamania linii.
----------
Kilka |wyróżnionych
----------
-----
słów| na ekranie. -----
Powyższy obrazek jest nieco zniekształcony ze względu na użycie techniki ASCII.
W podrozdziale 4.4 znajdują się wytyczne do obliczania wysokości linii.
4.3 Elementy osadzone
Element osadzony sam w sobie nie posiada żadnej zawartości, a służy on jedynie wskazaniu na pewną
treść, która powinna znaleźć się na jego miejscu. Np. w języku HTML takim elementem jest element 'IMG',
którego atrybut 'SRC' wskazuje na źródło do pobrania, a następnie wyświetlenia grafiki. Używając tego
elementu można założyć, że posiada on pewne wymiary własne. Jeżeli wartość atrybutu 'width' jest ustawiona na
'auto', to zostaną zastosowane wymiary własne elementu. Natomiast w przypadku użycia innej wartości,
element jest w razie potrzeby odpowiednio przeskalowywany (metoda skalowania zależy od rodzaju użytych mediów).
Te same zasady dotyczą własności 'height'.
Elementy osadzone mogą być zarówno elementami blokowymi jak i śródliniowymi.
4.4 Wysokość linii
Wszystkie elementy posiadają własność 'line-height', która w zasadzie określa całkowitą wysokość linii tekstu.
Jeżeli wysokość linii jest większa od wysokości tekstu, dodawana jest dodatkowa przestrzeń nad i pod tekstem. Np.
jeżeli tekst ma 12pt wysokości a wartość 'line-height' wynosi 14pt, to dodawana jest przestrzeń o
szerokości 2pt. Jeden punkt dodawany jest nad tekstem i jeden pod tekstem. Puste elementy mają taki sam wpływ
na te wyliczenia jak elementy zawierające treść.
Różnica pomiędzy wielkością czcionki i wartością 'line-height' zwana jest leadingiem. Połowa tej wartości to half-leading.
Po sformatowaniu, każda linia tworzy prostokątny blok zwany blokiem linii.
Jeżeli w jednej linii tekstu znajduje się kilka odcinków o różnych wartościach 'line-height'
(ponieważ linia składa się z kilku różnych elementów śródliniowych), to każdy odcinek posiada
własny half-leading u góry i u dołu. Wysokość bloku linii liczona jest od wierzchu najwyższego
odcinka do spodu odcinka najniższego. Należy pamiętać, że wierzch i spód niekoniecznie muszą
należeć do najwyższego elementu ze względu na możliwość ich pozycjonowania w pionie przy pomocy
własności 'vertical-align'. W akapicie, każdy blok linii umieszczany jest bezpośrednio pod
poprzednim blokiem.
Dopełnienie, marginesy i obramowanie pod i nad śródliniowymi elementami nieosadzonymi nie mają wpływu
na wysokość linii. Innymi słowy, jeżeli wartość 'line-height' jest niewystarczająca by pomieścić
określone dopełnienie lub obramowanie, to będzie ona nachodziła na tekst w innych liniach.
Elementy osadzone (np. obrazy) mogą rozciągać linię, jeżeli wierzch takiego elementu
(włącznie z dopełnieniem, obramowaniem i marginesem) znajduje się powyżej najwyższego odcinka tekstu
lub gdy jego spód znajduje się poniżej najniższego odcinka.
W przypadku, gdy wartość atrybutu 'line-height' dla całego akapitu jest jednakowa i nie ma żadnych wysokich obrazków,
można mieć pewność, na podstawie powyżej omówionych zasad, że odległość pomiędzy następującymi po sobie liniami
tekstu będzie równa wartości określonej dla atrybutu 'line-height'. Jest to ważne w przypadkach kiedy zachodzi
potrzeba wyrównania kolumn tekstu o różnych wielkościach czcionki, np. w tabelach.
Nie wyklucza to jednak możliwości nakładania się dwóch przylegających do siebie linii. Wartość
'line-height' może być mniejsza niż wysokość tekstu, przez co wartość leadingu będzie liczbą ujemną.
Przydaje się to w przypadku, gdy wiadomo jest, że tekst nie będzie zawierał żadnych elementów
umieszczonych pod wierszem (np. składający się z samych wielkich liter), dzięki czemu linie można
umieścić trochę bliżej siebie.
4.5 Obszar roboczy
Obszar roboczy to pole, na którym prezentowane są dokumenty.
Nie istnieje żaden element strukturalny dokumentu, który odpowiada obszarowi roboczemu.
Ta sytuacja stwarza dwa problemy:
- Z którego miejsca powinno się ustalać wymiary obszaru roboczego.
- Co zrobić z powierzchnią, której nie pokrywa aktualnie prezentowany dokument.
Rozsądnym rozwiązaniem pierwszego problemu jest traktowanie rozmiarów okna jako domyślnej
szerokości obszaru roboczego, ale ostateczna decyzja zależy od aplikacji klienckiej.
Wydaje się także, że aplikacja kliencka powinna zmieniać szerokość obszaru roboczego wraz
ze zmianą wielkości okna, ale to także leży poza zasięgiem CSS1.
Dzięki rozszerzeniom HTML możliwe jest rozwiązanie drugiego problemu. Dzięki atrybutom znacznika
'BODY' można ustawić tło dla całego obszaru roboczego. W celu spełnienia oczekiwań projektantów,
w CSS1 stworzono specjalną zasadę służącą do określania tła obszaru roboczego:
Jeżeli wartość parametru 'background' elementu 'HTML' jest różna od 'transparent', to
zostanie ona zastosowana, w przeciwnym przypadku zastosowane zostanie tło elementu
'BODY'. Jeżli tło tego drugiego także jest ustawione na 'transparent', to sposób
prezentacji jest nieokreślony.
Dzięki tej zasadzie możliwy jest poniższy przykład:
<HTML STYLE="background: url(http://style.com/marble.png)">
<BODY STYLE="background: red">
Powyższy przykład kodu spowoduje, że obszar roboczy pokryty zostanie tłem z pliku "marble.png".
Tło elementu 'BODY' (który może, ale nie musi w pełni pokrywać obszaru roboczego) przybierze kolor czerwony.
Rekomendowane jest ustalanie własności tła obszaru roboczego przy pomocy elementu 'BODY', przynajmniej do
czasu pojawienia się nowych metod.
4.6 Element BR
Obecnie w CSS1 brak sposobów kontroli sposobu funkcjonowania elementu 'BR'. W HTML element 'BR'
służy do łamania linii w wybranym miejscu. Efektem działania tego elementu jest pojawienie się
złamania linii. Możliwe, że w przyszłych wersjach CSS zostanie dodana możliwość kontroli tego
typu elementów, ale klienty działające w oparciu o CSS1 muszą traktować element 'BR' w sposób
wyjątkowy.
5. Atrybuty CSS1
Przy pomocy arkuszy stylów można kontrolować prezentację dokumentów. Kontrola ta jest możliwa
dzięki nadaniu atrybutom CSS określonych wartości. Rozdział ten zawiera listę zdefiniowanych
atrybutów CSS 1 wraz z odpowiadającymi im dopuszczalnymi wartościami.
5.1 Notacja wartości
Zastosowana w tym rozdziale notacja atrybutów wraz z towarzyszącymi im wartościami przedstawia się następująco:
Wartości: N | NW | NE
Wartości: [ <length> | thick | thin ]{1,4}
Wartości: [<family-name> , ]* <family-name>
Wartości: <url>? <color> [ / <color> ]?
Wartości: <url> || <color>
Tekst pomiędzy znakami "<" i ">" informuje o typie wartości. Najczęściej spotykane
typy wartości to: <length> (długość), <percentage> (wartość procentowa),
<url>, <number> (cyfra lub liczba) oraz <color> (kolor). Dokładniejszy opis jednostek miary
znajduje się w rozdziale 6. Więcej szczegółów na temat typów (np. <font-family> i
<border-style>) można znaleźć przy opisach poszczególnych atrybutów.
Pozostałe słowa to słowa kluczowe, które nie mogą występować w towarzystwie żadnych dodatkowych znaków, np. cudzysłowów. To
samo dotyczy znaków prawego ukośnika (/) - ang. slash - oraz przecinka (,).
Kilka parametrów ustawionych jeden po drugim oznacza, że wszystkie one
muszą wystąpić w podanej kolejności.
Pionowa kreska (|) oddziela wartości alternatywne, z których jedna musi
zostać użyta. Dwie pionowe
kreski (A||B) oznaczają, że użyty musi zostać jeden z dwóch, w dowolnej
kolejności.
Nawiasy klamrowe ([]) służą do grupowania parametrów. Zestawienie kilku
parametrów jeden po drugim ma większą wagę od dwóch pionowych kresek,
które
są, natomiast ważniejsze od pojedynczej pionowej kreski. W związku z
czym zapis w postaci "a b | c || d e"
jest równoznaczny z zapisem "[ a b ] | [ c || [ d e ]]".
Po każdym typie wartości, słowie kluczowym lub ich grupie w nawiasach klamrowych
może wystąpić jeden z następujących modyfikatorów:
- Gwiazdka (*) oznacza, że znajdujący się przed nią typ, słowo lub grupa powtarza się zero lub więcej razy.
- Plus (+) oznacza, że znajdujący się przed nim typ, słowo lub grupa powtarza się jeden lub więcej razy.
- Znak zapytania (?) oznacza, że to co się przed nim znajduje jest opcjonalne.
- Dwie cyfry lub liczby w nawiasach klamrowych({A,B}) oznaczają, że to co znajduje się przed nimi
powtarza się conajmniej A i co najwyżej B razy.
5.2 Atrybuty czcionki
Określanie właściwości czcionki należy do najczęściej wtykorzystywanych
możliwości CSS. Niestety, nie istnieje żadna jednolita taksonomia
klasyfikująca czcionki, przez
co terminy dobrze opisujące właściwości jednej czcionki mogą nie być
właściwe
do opisu innych czcionek. Np. 'italic' to najczęściej używane słowo i
wartość
określająca tekst pochyły, ale nie jedyna. Inne to:
Oblique, Slanted, Incline, Cursive lub Kursiv. Sytuacja ta sprawia, że
niezwykle
trudno jest określić typowy zestaw własności dla danej czcionki.
W CSS 1 zdefiniowane zostały następujące atrybuty czcionki: 'font-family', 'font-style', 'font-variant' i 'font-weight', 'font-size' oraz 'font'
5.2.1 Dopasowywanie czcionek
Ze względu na brak uniwersalnej taksonomii własności czcionek, ich dopasowywanie
musi odbywać się przy zachowaniu szczególnej ostrożności. Własności dopasowywane są w ustalonej
kolejności, co umożliwia do pewnego stopnia jednolitość sposobu prezentacji tekstu w różnych
aplikacjach klienckich (zakładając, że każda z nich dysponuje podobnym zestawem czcionek).
- Klient tworzy (lub otwiera) bazę danych wszystkich atrybutów CSS 1 dostępnych dla wszystkich
czcionek, do których ma dostęp (zainstalowanych lub pobranych z internetu). Jeżeli dwie
czcionki mają identyczne własności, to jedna z nich jest odrzucana.
- Klient zbiera informacje na temat wszystkich dostępnych atrybutów czcionki mających zastosowanie
do każdego znaku znajdującego się w danym elemencie. Dysponując tymi informacjami, klient dokonuje
wstępnego wyboru czcionki przy pomocy atrybutu 'font-family'. Następnie, wszystkie pozostałe
atrybuty poddawane są testowi zgodności z wybraną rodziną czcionek i jeżeli każda z nich przejdzie
test pomyślnie, to wybrana czcionka zostaje zastosowana do danego elementu.
- Jeżeli żadna czcionka nie zostanie dopasowana w wyniku działań w punkcie 2 i podano alternatywną rodzinę czcionek, to należy
powtórzyć czynności z punktu 2 dla tej rodziny.
- Jeżeli uda się znaleźć pasującą czcionkę, ale brakuje jakiegoś znaku, a dostępna jest alternatywna rodzina
czcionek, to należy powtórzyć czynności z punktu 2 dla tej rodziny.
Sposób kodowania czcionek i znaków wyjaśniono w Dodatku C.
- Jeżeli nie uda się dopasować żadnej czcionki, należy użyć domyślnej rodziny czcionek klienta
i powtórzyć czynności z punktu 2.
Powyższy algorytm można zoptymalizować unikając sprawdzania atrybutów CSS dla każdego znaku.
Kolejność dopasowywania każdego atrybutu w punkcie 2 powyżej jest następująca:
- Jako pierwszy sprawdzany jest atrybut 'font-style'. Aby tekst
był pochyły ('italic') klient musi posiadać w swojej bazie danych czcionkę ze słowem
kluczowym 'italic' (preferowane) lub 'oblique'. W przeciwnym przypadku wartości muszą
pasować dokładnie lub styl nie wywoła żadnego efektu.
- Drugi z kolei atrybut to 'font-variant'. Wartość 'normal' pasuje do
czcionek nie oznaczonych jako 'small-caps'. Wartość 'small-caps', natomiast pasuje do: (1) czcionek
oznaczonych jako 'small-caps', (2) czcionek, w których małe litery zostały zsyntetyzowane, (3) czcionek,
w których wszystkie małe litery zastępowane są wielkimi literami. Małe litery można syntetyzować za pomocą
elektronicznego skalowania wielkich liter.
- Jako trzeci testowany jest atrybut 'font-weight'.
Atrybut ten zawsze wywołuje pożądany efekt.
- Jako ostatni dopasowywany jest atrybut 'font-size' a jego
wartość jest uzależniona w pewnym stopniu od marginesu tolerancji klienta (zazwyczaj
wielkość czcionki jest zaokrąglana do pełnego piksela, natomiast tolerancja czcionek
bitmapowych może sięgać nawet do 20%). Późniejsze obliczenia, np. przy użyciu elementu
'em' dokonywane są na bazie rzeczywistej wielkości czcionki, a nie na tej, którą określono
pierwotnie w arkuszu stylów.
5.2.2 'font-family'
Wartości: [[<family-name> | <generic-family>],]* [<family-name> | <generic-family>]
Wartość domyślna: zależna od klienta
Zastosowanie: wszystkie elementy
Dziedziczenie: tak
Wartości procentowe: nie dotyczy
W polu wartość znajduje się uszeregowana pod względem ważności lista nazw i rodzin czcionek.
W przeciwieństwie do większości innych atrybutów CSS 1, wartości atrybutu 'font-family' oddzielone są przecinkami,
co oznacza, że nie wykluczają one siebie nawzajem i mogą być stosowane razem.
BODY { font-family: gill, helvetica, sans-serif }
Istnieją dwa typy wartości dla atrybutu 'font-family':
<family-name>
Nazwa rodziny czcionek. W przykładzie powyżej nazwami czcionek są
"gill" oraz "helvetica".
<generic-family>
Rodzaj czcionek. W powyższym przykładzie "sans-serif" jest nazwą rodzaju czcionek. Dostępne są następujące
rodzaje czcionek:
- 'serif' (e.g. Times)
- 'sans-serif' (np. Helvetica)
- 'cursive' (np. Zapf-Chancery)
- 'fantasy' (np. Western)
- 'monospace' (np. Courier)
Zaleca się zawsze podawać na końcu deklaracji nazwę rodzajową czcionki.
Nazwy czcionek zawierające białe znaki powinny być ujmowane w cudzysłowy:
BODY { font-family: "new century schoolbook", serif }
<BODY STYLE="font-family: 'My own font', fantasy">
Ujmowanie tego typu nazw czcionek w nawiasy jest ważne ze względu na fakt, że wszelkie białe znaki
przed i po nazwie czcionki są ignorowane, a dłuższe sekwencje białych znaków wewnątrz nazwy redukowane
są do znaków pojedynczych.
5.2.3 'font-style'
Wartości: normal | italic | oblique
Wartość domyślna: normal
Zastosowanie: wszystkie elementy
Dziedziczenie: tak
Wartości procentowe: nie dotyczy
Napotykając wartość 'normal', klient przeszukuje swoją bazę danych w poszukiwaniu czcionek z tą właśnie etykietą.
Podobnie wygląda sytuacja z wartością 'oblique'. Wartość
'italic', natomiast pasuje do czcionek z kategorii zarówno 'italic' lub, jeżeli takich nie ma, 'oblique'.
Czcionki oznaczone jako 'oblique' mogą być zwykłymi czcionkami pochylonymi komputerowo.
Czcionki zawierające w nazwie słowo Oblique, Slanted lub Incline w bazie danych
klienta zazwyczaj zaliczane są do kategorii 'oblique'. Natomiast czcionki ze słowem
Italic, Cursive lub Kursiv w nazwie należą do kategorii 'italic'.
H1, H2, H3 { font-style: italic }
H1 EM { font-style: normal }
Powyższy przykład spowoduje wyświetlenie wyróżnionego tekstu, znajdującego się
wewnątrz nagłówka 'H1' czcionką normalną.
5.2.4 'font-variant'
Wartości: normal | small caps
Wartość domyślna: normal
Zastosowanie: wszystkie elementy
Dziedziczenie: tak
Wartości procentowe: nie dotyczy
Kapitaliki (small-caps), to znaki o wyglądzie wielkich liter, ale rozmiarami odpowiadające małym literom
o nieco zmienionych proporcjach.
Wartość 'normal' dobiera czcionki, nie będące kapitalikami, które dopasowywane są przez wartość 'small-caps'.
W CSS 1 dopuszczalne jest (ale nie wymagane), tworzenie kapitalików przy pomocy skalowania zwykłej
czcionki. W ostateczności wielkie litery mogą zostać użyte w miejsce brakujących kapitalików.
Poniższy przykład spowoduje wyświetlenie zawartości elementu 'H3' kapitalikami, a
słów wyróżnionych (znajdujących się wewnątrz elementu 'EM') pochylonymi kapitalikami.
H3 { font-variant: small-caps }
EM { font-style: oblique }
Oczywiście istnieje więcej różnych rodzajów czcionek, ale CSS 1 obsługuje tylko wyżej wymienione.
CSS1 core: Jako że własność ta powoduje transformację tekstu do wielkich liter, to zastosowanie tutaj mają
zasady dotyczące atrybutu 'text-transform'.
5.2.5 'font-weight'
Wartości: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Wartość domyślna: normal
Zastosowanie: wszystkie elementy
Dziedziczenie: tak
Wartości procentowe: nie dotyczy
Atrybut 'font-weight' służy do określania sposobu pogrubienia czcionki. Wartości od '100'
do '900' oznaczają odpowiednio czcionkę najmniej i najbardziej pogrubioną. Słowo kluczowe
'normal' jest synonimem wartości liczbowej '400', a słowo 'bold' jest odpowiednikiem
wartości '700'. Na zastosowanie numerycznej skali zdecydowano się ze względu na fakt, że słowa kluczowe inne niż
'normal' i 'bold' były często mylone z nazwami czcionek.
P { font-weight: normal } /* 400 */
H1 { font-weight: 700 } /* bold */
Wartości 'bolder' i 'lighter' służą do określania grubości czcionki względem grubości
odziedziczonej od elementu nadrzędnego.
STRONG { font-weight: bolder }
Elementy potomne dziedziczą rzeczywistą grubość czcionki, a nie jej wartość słowną.
Czcionki zazwyczaj posiadają jedną lub więcej atrybutów, których wartości wskazują na
"grubość" danej czcionki. Nie istnieją żadne oficjalne regulacje dotyczące
znaczenia tych nazw. Ich głównym zadaniem jest rozróżnienie czcionek o różnym odcieniu
w obrębie jednej rodziny. W różnych rodzinach czcionek, nazwy te mogą mieć inne znaczenie.
Np. czcionka pogrubiona może być opisywana jako: Regular, Roman, Book, Medium, Semi lub
DemiBold, Bold lub Black w zależności jak ciemna jest "normalna" czcionka w
danym projekcie. Ze względu na brak jednolitych standardów używania nazw czcionek, atrybut
'font-weight' operuje skalą numeryczną, w której '400' (lub 'normal) odpowiada normalnej
grubości czcionki zdefiniowanej dla danej rodziny. Nazwy odnoszące się do grubości czcionki to
zazwyczaj: Book, Regular, Roman, Normal lub rzadziej Medium.
Dopasowanie wartości grubości czcionki w obrębie jednej rodziny, do
różnych
wartości numerycznych ma na celu umożliwienie stopniowania tonacji
czcionek. Poniżej znajduje się objaśnienie sposobu przypisywania różnym
słowom kluczowym ich odpowiedników numerycznych :
- Jeżeli dana czcionka korzysta już z 9 stopniowej skali numerycznej (np. OpenType),
to skala CSS powinna pokrywać się z tą skalą.
- Jeżeli w rodzinie znajduje się zarówno czcionka typu Medium i typu Book, Regular, Roman lub Normal,
to czcionce Medium zazwyczaj odpowiada wartość '500'.
- Czcionce typu "Bold" często odpowiada wartość '700'.
- Jeżeli czcionka operuje skalą mniejszą niż 9 stopniową i brakuje odpowiednika dla wartości '500',
to wartość ta zostanie przypisana do tego samego słowa kluczowego co wartość '400'. Jeżeli którakolwiek z
wartości: '600', '700', '800' lub '900' pozostaje bez odpowiednika, to zostanie ona przypisana do
tej samej czcionki co wartość o jeden stopień ciemniejsza lub jeżeli taka nie istnieje, to o jeden
stopień jaśniejsza. Jeżeli któraś z wartości: '300', '200' lub '100' pozostaje bez odpowiednika,
to zostanie ona przypisana do słowa kluczowego odpowiadającego czcionce o jeden stopień jaśniejszej
lub jeżeli taka nie istnieje o jeden stopień ciemniejszej.
Powyższy proces ilustrują następujące przykłady. W przykładzie 1, dostępne są cztery grubości czcionki:
Regular, Medium, Bold oraz Heavy. W przykładzie 2, natomiast dostępnych jest sześć wartości:
Book, Medium, Bold, Heavy, Black oraz ExtraBlack. Warto zwrócić uwagę, że w drugim przykładzie
wartości "ExtraBlack" nie został przypisany żaden odpowiednik.
Dostępne kroje | Przypisania | Brakujące wartości
----------------------+---------------+-------------------
"Example1 Regular" | 400 | 100, 200, 300
"Example1 Medium" | 500 |
"Example1 Bold" | 700 | 600
"Example1 Heavy" | 800 | 900
Dostępne kroje | Przypisania | Brakujące wartości
----------------------+---------------+-------------------
"Example2 Book" | 400 | 100, 200, 300
"Example2 Medium" | 500 |
"Example2 Bold" | 700 | 600
"Example2 Heavy" | 800 |
"Example2 Black" | 900 |
"Example2 ExtraBlack" | (brak) |
Jako że zadaniem słów kluczowych 'bolder' i 'lighter' jest pogrubienie lub odchudzenie
czcionki, a w danej rodzinie czcionek nie zawsze dostępne są kroje odpowiadające wszystkim
wartościom, wartość 'bolder' wybiera najbliższą dostępną grubszą czcionkę, a wartość 'lighter'
najbliższą chudszą. Słowa kluczowe 'bolder' i 'lighter' mają następujące znaczenie:
- Słowo kluczowe 'bolder' wybiera następną wartość, która jest przypisana do czcionki ciemniejszej
niż odziedziczona. Jeżeli nie ma takiej wartości, to wybierana jest następna wartość numeryczna, a
wygląd czcionki pozostaje bez zmian. Wyjątkiem jest sytuacja, w której wartość odziedziczona wynosi
'900'. W tym przypadku wartość pozostaje bez zmian.
- W odwrotny sposób działa słowo kluczowe 'lighter', które wybiera następną wartość, która jest przypisana
do czcionki jaśniejszej niż odziedziczona. Jeżeli nie ma takiej wartości, to wybierana jest następna
"lżejsza" wartość numeryczna, a wygląd czcionki pozostaje bez zmian.
Nie ma gwarancji, że dla każdej wartości 'font-weight' znajdzie się
grubsza czcionka.
Na przykład, niektóre kroje mogą występować tylko w dwóch wariantach:
'normal' i 'bold', a inne, natomiast w
ośmiu. Nie ma też pewności w jaki sposób aplikacja kliencka dokona
dopasowania krojów czcionki do wartości atrybutu 'font-weight'.
Pewne jest tylko to, że krój o danej wartości nie będzie jaśniejszy od
czcionki o niższej wartości.
5.2.6 'font-size'
Wartości: <absolute-size> | <relative-size> | <length> | <percentage>
Wartość domyślna: medium
Zastosowanie: wszystkie elementy
Dziedziczenie: tak
Wartości procentowe: zależne od rozmiaru czcionki rodzica.
<absolute-size>
Słowo kluczowe <absolute-size> służy jako wskaźnik w tablicy zawierającej rozmiary czcionek obliczone i
przechowywane przez klienta. Możliwe wartości to: [ xx-small | x-small | small | medium | large | x-large | xx-large ].
Sugerowany współczynnik skalowania pomiędzy sąsiadującymi wskaźnikami na ekranie monitora to 1.5. Jeżeli rozmiar czcionki
'medium' wynosi 10pt, to rozmiar czcionki oznaczonej jako 'large' wynosiłby 15pt. Wartość
wskaźnika dla różnych nośników może się wahać. Ponadto, także sama aplikacja kliencka powinna brać pod uwagę
takie czynniki jak jakość i dostępność czcionek, podczas wyliczania wartości tablicy. Dla każdej rodziny czcionek
tablica może być inna.
<relative-size>
Słowo kluczowe <relative-size> jest interpretowane względem tablicy rozmiarów czcionek oraz rozmiaru
czcionki zastosowanej dla elementu rodzica. Możliwe wartości to: [ larger | smaller ]. Jeżeli na przykład dla
pewnego elementu zdefiniowano czcionkę o rozmiarze 'medium', a dla jego elementu potomka zdefiniowano
wartość 'larger', to rozmiar czcionki elementu dziecka przyjmie wartość 'large'. Jeżeli, natomiast brak w tablicy
rozmiaru zdefiniowanego dla elementu, to aplikacja kliencka może wstawić wartości pośrednie lub je zaokrąglić.
Wstawianie dodatkowych wartości może być konieczne w przypadku, gdy jest więcej wartości liczbowych niż słów
kluczowych.
Przy zastosowaniu dwóch ostatnich wartości (<length> i <percentage>) do obliczania
rozmiaru czcionki dla danego elementu, tablica rozmiarów czcionek nie powinna być brana pod uwagę.
Niedozwolone są wartości ujemne.
Jednostki 'em' oraz 'ex' użyte do określenia rozmiaru czcionki (własność 'font-size') odnoszą się do
rozmiaru czcionki elementu rodzica. Natomiast użyte w wartościach innych atrybutów, odnoszą się do elementu bieżącego.
Należy pamiętać, że aplikacja może dokonać reinterpretacji rozmiaru czcionki w zależności
od kontekstu. Na przykład ze względu na zniekształcenia obrazu spowodowane zastosowaniem nietypowych
metod prezentacji.
Przykłady:
P { font-size: 12pt; }
BLOCKQUOTE { font-size: larger }
EM { font-size: 150% }
EM { font-size: 1.5em }
Przy zastosowaniu sugerowanego współczynnika skalowania 1.5 trzy ostatnie deklaracje są identyczne.
5.2.7 'font'
Wartości: [ <font-style> ||
<font-variant> || <font-weight> ]? <font-size> [ /
<line-height> ]? <font-family>
Wartość domyślna: brak dla deklaracji zbiorczych
Zastosowanie: wszystkie elementy
Dziedziczenie: tak
Wartości procentowe: dozwolone dla <font-size> oraz <line-height>
Atrybut 'font' jest atrybutem zbiorczym służącym do definiowania wszystkich własności czcionek
('font-style', 'font-variant', 'font-weight', 'font-size', 'line-height' oraz 'font-family') w jednym miejscu. Składnia tego atrybutu została oparta o tradycyjną notację typograficzną definiowania
własności czcionek.
Dokładny opis każdego atrybutu znajduje się we wcześniejszej części tego rozdziału.
Atrybutom pominiętym w atrybucie zbiorczym nadawana jest wartość domyślna.
P { font: 12pt/14pt sans-serif }
P { font: 80% sans-serif }
P { font: x-large/110% "new century schoolbook", serif }
P { font: bold italic large Palatino, serif }
P { font: normal small-caps 120%/120% fantasy }
W drugiej z powyższych reguł wartość 80% odnosi się do rozmiaru czcionki elementu rodzica. W trzeciej, natomiast
wartość procentowa odnosi się do elementu bieżącego.
W pierwszych trzech regułach nie określono wartości dla atrybutów 'font-style', 'font-variant' oraz 'font-weight'.
Oznacza to, że przyjmą one wartości domyślne. Czwarta zasada ustawia wartość 'bold' dla atrybutu 'font-weight',
wartość 'italic' dla atrybutu 'font-style' oraz wartość 'normal' dla atrybutu 'font-variant'.
Piąta reguła określa następujące parametry: 'font-variant' na 'small-caps', 'font-size' na 120% czcionki elementu rodzica,
'line-height' na 120% wielkości czcionki oraz 'font-family' na 'fantasy'. Wartość 'normal' odnosi się do
dwóch pozostałych atrybutów: 'font-style' i 'font-weight'.
5.3 Kolory i tło
Atrybuty kolorów i tła służą do określania koloru tekstu (ang. foreground color) oraz tła elementu
(powierzchni, na której wyświetlana jest zawartość elementu). Jako tło można stosować nie tylko określone kolory,
ale również grafikę. Dodatkowo można kontrolować takie własności tła jak: pozycja obrazka w tle, czy i jak ma się
on powtarzać oraz czy tło ma być ruchome czy nie względem obszaru roboczego.
Atrybut 'color' jest dziedziczony w normalny sposób. Wartości atrybutów tła, natomiast nie są dziedziczone, ale
tło elementu rodzica prześwituje przez element potomka, ze względu na fakt, że domyślna wartość dla atrybutu
'background-color' to 'transparent' (ang. prześwitujący).
5.3.1 'color'
Wartości: <color>
Wartość domyślna: zależna od klienta
Zastosowanie: wszystkie elementy
Dziedziczenie: tak
Wartości procentowe: nie dotyczy
Atrybut ten służy do określania koloru tekstu znajdującego się w obrębie danego elementu. Istnieje kilka
sposobów na określenie koloru tekstu:
EM { color: red } /* język naturalny */
EM { color: rgb(255,0,0) } /* wartość RGB od 0 do 255 */
W rozdziale 6.3 znajduje się dokładniejszy opis
metod zapisu kolorów.
5.3.2 'background-color'
Wartości: <color> | transparent
Wartość domyślna: transparent
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Wartości procentowe: nie dotyczy
Atrybut ten służy do określania koloru tła elementu.
H1 { background-color: #F00 }
5.3.3 'background-image'
Wartości: <url> | none
Wartość domyślna: none
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Wartości procentowe: nie dotyczy
Atrybut ten służy do określania obrazu mającego służyć jako tło danego elementu. Ustawiając jako tło grafikę
powinno się zawsze podawać także kolor tła, na wypadek gdyby obraz był z jakiegoś powodu niedostępny. Jeżeli obraz
jest dostępny, to nałoży się on na zdefiniowany kolor.
BODY { background-image: url(marble.gif) }
P { background-image: none }
5.3.4 'background-repeat'
Wartości: repeat | repeat-x | repeat-y | no-repeat
Wartość domyślna: repeat
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Wartości procentowe: nie dotyczy
Atrybut 'background-repeat' służy do kontrolowania sposobu powtarzania się obrazu
w tle oraz do określania czy ma się on w ogóle powtarzać.
Wartość 'repeat' oznacza, że obrazek ma się powtarzać zarówno w pionie jak i w poziomie.
Wartość 'repeat-x' oznacza, że obrazek będzie powtarzał się tylko w poziomie, a repeat-y
tylko w pionie. Wartość 'no-repeat' powoduje brak powtarzania.
BODY {
background: red url(pendant.gif);
background-repeat: repeat-y;
}
W powyższym przykładzie obrazek powtarza się tylko w pionie.
5.3.5 'background-attachment'
Wartości: scroll | fixed
Wartość domyślna: scroll
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Wartości procentowe: nie dotyczy
Atrybut 'background-attachment' jest używany, gdy jako tło elementu określono obraz. Za jego pomocą można
określić czy grafika w tle ma pozostać nieruchoma w miarę przewijania dokumentu, czy też przewijać się razem z jego
zawartością.
BODY {
background: red url(pendant.gif);
background-repeat: repeat-y;
background-attachment: fixed;
}
CSS1 core: Aplikacje klienckie mogą wartość atrybutu 'fixed'
traktować jako 'scroll'. Rekomenduje się jednakże, aby
wartość atrybutu 'fixed' była interpretowana poprawnie przynajmniej dla
elementów HTML i BODY ponieważ brak jest jakichkolwiek sposobów
definiowania
grafiki tylko dla tych aplikacji, które obsługują wartość 'fixed' (patrz
rozdział 7).
5.3.6 'background-position'
Wartości: [<percentage> | <length>]{1,2} | [top | center | bottom] || [left | center | right]
Wartość domyślna: 0% 0%
Zastosowanie: elementy blokowe i osadzone
Dziedziczenie: nie
Wartości procentowe: odnoszące się do rozmiaru samego elementu
Jeżeli jako tło elementu zastosowano obraz graficzny, to atrybut 'background-position' służy
do określania jego pozycji początkowej.
Wartość '0% 0%' powoduje, że lewy górny róg obrazu jest wyrównany do lewego górnego rogu
elementu (bez otaczjących go marginesów i dopełnienia oraz obramowania).
Wartość '100% 100%' umieszcza prawy dolny róg obrazu w prawym dolnym rogu elementu. Wartość '14% 84%' powoduje
że punkt znajdujący się w odległości 14% szerokości obrazu od lewej krawędzi obrazu i 84% wysokości obrazu od
górnej krawędzi obrazu zostanie umieszczony w analogicznym punkcie elementu.
Wartość '2cm 2cm' umieszcza lewy górny róg obrazu w punkcie znajdującym
się w odległości 2cm od lewej i górnej krawędzi elementu.
Jeżeli podana jest tylko jedna wartość (procentowa lub w jednostkach miary), to zostanie ona użyta do
określenia pozycji w poziomie, a pozycja w pionie automatycznie zostanie ustawiona na 50%. Jeżeli podane są obie wartości,
to pierwsza z nich określa pozycję w poziomie. Wartości procentowe i zwykłe można stosować razem, np.
'50% 2cm'. Dozwolone są także wartości ujemne.
Dostępny jest także zestaw słów kluczowych służących do określania pozycji tła. Słów kluczowych nie można
mieszać z wartościami liczbowymi. Poniżej znajduje się lista możliwych słów kluczowych i
objaśnienie ich znaczenia:
- 'top left' i 'left top' - to samo co '0% 0%'.
- 'top', 'top center' oraz 'center top' - to samo co '50% 0%'.
- 'right top' i 'top right' - to samo co '100% 0%'.
- 'left', 'left center' oraz 'center left' - to samo co '0% 50%'.
- 'center' i 'center center' - to samo co '50% 50%'.
- 'right', 'right center' oraz 'center right' - to samo co '100% 50%'.
- 'bottom left' i 'left bottom' - to samo co '0% 100%'.
- 'bottom', 'bottom center' oraz 'center bottom' - to samo co'50% 100%'.
- 'bottom right' i 'right bottom' - to samo co '100% 100%'.
Przykłady:
BODY { background: url(banner.jpeg) right top } /* 100% 0% */
BODY { background: url(banner.jpeg) top center } /* 50% 0% */
BODY { background: url(banner.jpeg) center } /* 50% 50% */
BODY { background: url(banner.jpeg) bottom } /* 50% 100% */
Jeżeli obraz w tle jest nieruchomy (po zastosowaniu atrybutu 'background-attachment')
względem powierzchni roboczej, to jego położenie ustalane jest względem powierzchni roboczej, a nie elementu.
BODY {
background-image: url(logo.png);
background-attachment: fixed;
background-position: 100% 100%;
}
Powyższy przykład spowoduje umieszczenie obrazu w tle w prawym dolnym rogu powierzchni roboczej.
5.3.7 'background'
Wartości: <background-color> || <background-image> || <background-repeat>
|| <background-attachment> || <background-position>
Wartość domyślna: Brak dla atrybutów zbiorczych
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Wartości procentowe: tylko dla <background-position>
'background' jest atrybutem zbiorczym służącym do określania wszystkich dostępnych atrybutów tła
('background-color', 'background-image', 'background-repeat', 'background-attachment' oraz 'background-position')
w jednym miejscu arkusza stylów.
Możliwe wartości odpowiadają wartościom dostępnym dla wszystkich poszczególnych atrybutów.
BODY { background: red }
P { background: url(chess.png) gray 50% repeat fixed }
Atrybut 'background' służy do definiowania wszystkich atrybutów tła. W pierwszej regule powyżej zdefiniowano tylko
kolor tła (background-color'), w związku z czym pozostałe atrybuty przyjęły wartości domyślne. W drugiej regule,
natomiast wartości wszystkich atrybutów zostały określone.
5.4 Atrybuty tekstu
5.4.1 'word-spacing'
Wartości: normal | <length>
Wartość domyślna: normal
Zastosowanie: wszystkie elementy
Dziedziczenie: tak
Wartości procentowe: nie dotyczy
Wartość 'length' oznacza rozmiar dodatkowego odstępu pomiędzy wyrazami. Możliwe są też wartości ujemne, ale uzależnione są one
od konkretnej implementacji. Aplikacja kliencka może samodzielnie decydować jakiego użyć algorytmu obliczania odstępów
między wyrazami. Na wielkość odstępów między wyrazami może mieć też wpływ justowanie tekstu (które może być wartością
atrybutu 'text-align').
H1 { word-spacing: 1em }
Powyższy przykład doda dodatkowy odstęp o rozmiarze '1em' pomiędzy wyrazami znajdującymi się w obrębie elementów 'H1'.
CSS1 core: Aplikacje klienckie mogą traktować każdą wartość atrybutu 'word-spacing' jako 'normal'
(patrz rozdział 7.
5.4.2 'letter-spacing'
Wartości: normal | <length>
Wartość domyślna: normal
Zastosowanie: wszystkie elementy
Dziedziczenie: tak
Wartości procentowe: nie dotyczy
Atrybut 'letter-spacing' służy do określania rozmiaru dodatkowych odstępów pomiędzy poszczególnymi znakami.
Atrybut ten może przyjmować także wartości ujemne, ale są one uzależnione od konkretnej implementacji. Aplikacja kliencka może
samodzielnie decydować jakiego algorytmu obliczania odstępów między wyrazami użyć. Na wielkość odstępów między
znakami może mieć też wpływ justowanie tekstu (które może być wartością własności tekstu 'text-align').
BLOCKQUOTE { letter-spacing: 0.1em }
Powyższy przykład spowoduje, że odstęp pomiędzy poszczególnymi znakami wszystkich elementów
'BLOCKQUOTE' zostanie powiększony o '0.1em'.
Aby wyjustować tekst, klient może zmienić odstęp między literami, jeżeli wartość jest ustawiona na
'normal'. Nie może natomiast tego zrobić, jeżeli podano konkretną wartość liczbową:
BLOCKQUOTE { letter-spacing: 0 }
BLOCKQUOTE { letter-spacing: 0cm }
Jeżeli odległość pomiędzy dwiema literami wychodzi inna niż domyślna, to klient nie powinien
używać ligatur.
CSS1 core: Aplikacja kliencka może traktować wartości 'letter-spacing' jako 'normal'
(patrz rozdział 7).
5.4.3 'text-decoration'
Wartości: none | [ underline || overline || line-through || blink ]
Wartość domyślna: none
Zastosowanie: wszystkie elementy
Dziedziczenie: nie, ale poniżej znajdują się dodatkowe informacje na ten temat
Wartości procentowe: nie dotyczy
Atrybut 'text-decoration' służy do wzbogacania tekstu o pewne dodatkowe właściwości. Właściwości te nie
będą widoczne jeżeli element jest pusty lub zawiera tylko grafikę. Wartość 'blink' powoduje migotanie tekstu.
Kolor wyświetlania dodatków jest taki sam jak tekstu do którego zostały one zastosowane.
Atrybut ten nie jest dziedziczony, ale zastosowany dla jednego elementu ma też wpływ na elementy
wewnątrz niego. To znaczy, jeżeli dla pewnego elementu zostanie zdefiniowana wartość 'underline' (podkreślenie),
to podkreślenie to obejmując cały element, obejmie także elementy znajdujące się w jego wnętrzu. Kolor
podkreślenia pozostanie taki sam jaki zdefiniowano dla elementu rodzica, bez względu na to jaki zdefiniowano
dla elementów potomków.
A:link, A:visited, A:active { text-decoration: underline }
Powyższy przykład spowoduje podkreślenie wszystkich odnośników na stronie (tj. wszystkich
elementów 'A' z atrybutem 'HREF').
Słowo kluczowe 'blink' musi być rozpoznawane przez wszystkie aplikacje, ale nie muszą go one obsługiwać.
5.4.4 'vertical-align'
Wartości: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage>
Wartość domyślna: baseline
Zastosowanie: elementy śródliniowe
Dziedziczenie: nie
Wartości procentowe: odnoszą się do atrybutu 'line-height' danego elemntu
Atrybut ten służy do pionowego pozycjonowania elementów. Wartości można podzielić na dwie grupy wg
sposobu ich działania:
Pierwsza grupa wartości, to te słowa kluczowe, których efekt uzależniony jest od elementu rodzica:
'baseline'
Wyrównuje podstawową linię pisma elementu dziecka (lub linię dolną,
jeżeli element nie posiada linii podstawowej) z linią podstawową pisma
elementu rodzica.
'middle'
Wyrównuje punkt znajdujący się dokładnie w połowie wysokości elementu (zazwyczaj obrazka) do punktu znajdującego
się na wysokości równej połowie wartości atrybutu 'x-height' licząc od linii podstawowej pisma elementu rodzica.
'sub'
Powoduje przeniesienie elementu do indeksu dolnego.
'super'
Powoduje przeniesienie elementu do indeksu górnego.
'text-top'
Wyrównuje wierzch elementu z wierzchem tekstu elementu, w którym się ten element znajduje.
'text-bottom'
Wyrównuje spód elementu do spodu tekstu elementu, w którym się ten element znajduje.
Drugą grupę stanowią wartości, których efekt uzależniony jest od linii formatowania,
której częścią jest sam element:
'top'
Wyrównuje wierzch elementu z najwyższym elementem w linii.
'bottom'
Wyrównuje spód elementu z najniższym elementem w linii.
Użycie wartości 'top' i 'bottom' może powodować konflikty, kiedy zależności pomiędzy
elementami się zapętlają.
Wartości procentowe odnoszą się do wartości atrybutu 'line-height'
elementu. Powodują one uniesienie linii podstawowej pisma elementu
(lub jego linię dolną jeżeli nie posiada on linii podstawowej) na
określoną wysokość ponad linię podstawową pisma elementu rodzica.
Możliwe są tu także wartości ujemne, np.
wartość'-100%' spowoduje przeniesienie linii podstawowej elementu do
miejsca, w którym powinna się znajdować następna
linia podstawowa. Dzięki temu możliwa jest bardzo precyzyjna kontrola
pionowego ułożenia elementów (np. obrazów graficznych
użytych w miejsce znaków), które nie posiadają linii podstawowej pisma.
Oczekuje się, że w przyszłych wersjach CSS będzie można używać wartości liczbowych jako atrybutów tej własności.
5.4.5 'text-transform'
Wartości: capitalize | uppercase | lowercase | none
Wartość domyślna: none
Zastosowanie: wszystkie elementy
Dziedziczenie: tak
Wartości procentowe: nie dotyczy
'capitalize'
Zamienia pierwszą literę na wielką.
'uppercase'
Zamienia wszystkie litery na wielkie.
'lowercase'
Zamienia wszystkie litery na małe.
'none'
Neutralizuje działanie odziedziczonych wartości.
Właściwa transformacja tekstu w każdym przypadku uzależniona jest od użytego języka ludzkiego (jeśli chcesz wiedzieć
więcej na temat sprawdzania języka dokumentu, patrz [4]).
H1 { text-transform: uppercase }
Powyższy przykład spowoduje zamianę wszystkich liter znajdujących się w elemencie 'H1' na wielkie.
CSS1 core: Aplikacja kliencka może zignorować atrybut 'text-transform' w przypadku liter
spoza zestawu Latin-1 oraz języków dla których określono inny sposób transformacji niż opisany w
tabelach case-conversion Unicode [8].
5.4.6 'text-align'
Wartości: left | right | center | justify
Wartość domyślna: zależna od klienta
Zastosowanie: elementy blokowe
Dziedziczenie: tak
Wartości procentowe: nie dotyczy
Atrybut ten służy do kontroli wyrównania tekstu. Algorytm justowania tekstu uzależniony jest od
klienta oraz użytego języka ludzkiego.
Przykład:
DIV.center { text-align: center }
Ze względu na fakt, że atrybut 'text-align' jest atrybutem dziedziczonym, wszystkie elementy blokowe znajdujące się
wewnątrz elementu 'DIV' z klasą 'center' zostaną wyśrodkowane. Warto zwrócić uwagę, że wyrównanie odbywa się względem
szerokości elementu, a nie względem całego obszaru roboczego. Wartość 'justify' jest zastępowana inną wartością jeżeli
nie jest ona obsługiwana przez danego klienta. Zazwyczaj w zastępstwie stosowane jest wyrównanie do lewej dla języków
zachodnich.
CSS1 core: Przeglądarka może wartość 'justify' zastąpić wyrównaniem do lewej lub prawej w zależności od
sposobu zapisu tekstu: od lewej do prawej, czy od prawej do lewej.
5.4.7 'text-indent'
Wartości: <length> | <percentage>
Wartość domyślna: 0
Zastosowanie: elementy blokowe
Dziedziczenie: tak
Wartości procentowe: zależne od szerokości elementu rodzica
Atrybut ten służy do określania rozmiaru wcięcia pierwszej linii tekstu. Wartości ujemne są dozwolone, ale
mogą występować pewne ogranicznia implementacyjne. Jeżeli w obrębie akapitu występuje łamanie linii (np.
z powodu użycia elementu 'BR'), to linia taka nie zostanie wcięta.
Przykład:
P { text-indent: 3em }
5.4.8 'line-height'
Wartości: normal | <number> | <length> | <percentage>
Wartość domyślna: normal
Zastosowanie: wszystkie elementy
Dziedziczenie: tak
Wartości procentowe: zależne od rozmiaru czcionki samego elementu
Własność 'line-height' służy do określania odstępu pomiędzy liniami podstawowymi pisma dwóch bezpośrednio
sąsiadujących ze sobą linii tekstu.
Jeżeli wartość numeryczna jest podana, to wysokość linii jest sumą tej wartości i rozmiaru czcionki bieżącego elementu.
Sposób dziedziczenia wartości procentowych i liczbowych jest różny. W przypadku wartości liczbowej elementy dziedziczą
wartość samego parametru a nie wartość wynikową (w przeciwieństwie do innych wartości).
Wartości ujemne nie są dozwolone.
Wysokość linii będzie taka sama po zastosowaniu każdej z trzech poniższych reguł.
DIV { line-height: 1.2; font-size: 10pt } /* number */
DIV { line-height: 1.2em; font-size: 10pt } /* length */
DIV { line-height: 120%; font-size: 10pt } /* percentage */
Wartość 'normal' powoduje ustawienie takiej wysokości linii, która jest odpowiednia dla danej czcionki.
Zakłada się, że wartość liczbowa odpowiadająca wartości 'normal' powinna zawierać się w przedziale
1.0 - 1.2.
Więcej na temat sposobu działania atrybutu 'line-height' znajduje się w rozdziale 4.4.
5.5 Atrybuty bloków
Atrybuty bloków służą do określania rozmiarów, obwodu i pozycjonowania elementów blokowych.
W rozdziale 4 znajdują się przykłady
użycia atrybutów bloków.
Atrybuty marginesów służą do określania marginesów elementów. Aby ustawić wszystkie
marginesy na raz należy użyć atrybutu 'margin'. Marginesy z poszczególnych stron elementu ustawiane
są przy pomocy bardziej precyzyjnych atrybutów marginesów.
Własność 'padding' służy do określania wielkości odstępu pomiędzy krawędziami elementu a jego zawartością.
Aby ustawić wszystkie marginesy wewnętrzne (dopełnienie) na raz należy użyć atrybutu 'padding'. Dopełnienie
pomiędzy treścią i poszczególnymi krawędziami elementu ustawiane jest przy pomocy bardziej precyzyjnych
atrybutów.
Atrybut 'border' służy do kontrolowania wyglądu krawędzi elementu. Każdy element posiada
cztery krawędzie (jedna z każdej strony), które posiadają następujące właściwości: szerokość (width),
kolor (color) oraz styl (style).
WAtrybuty 'width' i 'height' służą do określania rozmiarów bloku. Atrybuty 'float' i 'clear' służą natomiast do
pozycjonowania elementów na stronie.
5.5.1 'margin-top'
Wartości: <length> | <percentage> | auto
Wartość domyślna: 0
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Wartości procentowe: zależne od szerokości najbliższego elementu blokowego przodka
Atrybut ten służy do ustawiania marginesu górnego:
H1 { margin-top: 2em }
Dozwolone są także wartości ujemne, ale mogą istnieć ograniczenia zależne od implementacji.
5.5.2 'margin-right'
Wartości: <length> | <percentage> | auto
Wartość domyślna: 0
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Wartości procentowe: zależne od szerokości najbliższego elementu blokowego przodka
Atrybut ten służy do ustawiania prawego marginesu:
H1 { margin-right: 12.3% }
Dozwolone są także wartości ujemne, ale mogą istnieć ograniczenia zależne od implementacji.
5.5.3 'margin-bottom'
Wartości: <length> | <percentage> | auto
Wartość domyślna: 0
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Wartości procentowe: zależne od szerokości najbliższego elementu blokowego przodka
Atrybut ten służy do ustawiania marginesu dolnego:
H1 { margin-bottom: 3px }
Dozwolone są także wartości ujemne, ale mogą istnieć ograniczenia zależne od implementacji.
5.5.4 'margin-left'
Wartości: <length> | <percentage> | auto
Wartość domyślna: 0
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Wartości procentowe: zależne od szerokości najbliższego elementu blokowego przodka
Atrybut ten służy do ustawiania lewego marginesu:
H1 { margin-right: 2em }
Dozwolone są także wartości ujemne, ale mogą istnieć ograniczenia zależne od implementacji.
5.5.5 'margin'
Wartości: [ <length> | <percentage> | auto ]{1,4}
Wartość domyślna: brak dla deklaracji zbiorczych
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Wartości procentowe: zależne od szerokości najbliższego elementu blokowego przodka
Atrybut 'margin' jest atrybutem zbiorczym służącym do określania wartości następujących atrybutów:
'margin-top', 'margin-right', 'margin-bottom' oraz 'margin-left' w jednym miejscu.
Jeżeli określone zostały wszystkie cztery wartości, to odnoszą się one odpowiednio do marginesów:
górnego, prawego, dolnego i lewego. Jeżeli jest tylka jedna wartość, to ma ona zastosowanie do wszystkich
stron. Jeżeli określone są tylko dwie lub trzy wartości, to brakujące wartości dobierane są z przeciwnych stron.
BODY {margin: 2em} /* wszystkie marginesy będą miały wartość 2em */
BODY {margin: 1em 2em} /* margines górny i dolny = 1em, prawy i lewy = 2em */
BODY {margin: 1em 2em 3em} /* górny=1em, prawy=2em, dolny=3em, lewy=2em */
Ostatnia reguła jest równoznaczna z następującym zapisem:
BODY {
margin-top: 1em;
margin-right: 2em;
margin-bottom: 3em;
margin-left: 2em; /* wartość skopiowana od strony prawej */
}
Dozwolone są także wartości ujemne, ale mogą istnieć ograniczenia zależne od implementacji.
5.5.6 'padding-top'
Wartości: <length> | <percentage>
Wartość domyślna: 0
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Wartości procentowe: zależne od szerokości najbliższego elementu blokowego przodka
Atrybut ten służy do określania górnego dopełnienia.
BLOCKQUOTE { padding-top: 0.3em }
Dopełnienie nie może przyjmować wartości ujemnych.
5.5.7 'padding-right'
Wartości: <length> | <percentage>
Wartość domyślna: 0
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Wartości procentowe: zależne od szerokości najbliższego elementu blokowego przodka
Atrybut ten służy do określania dopełnienia prawego.
BLOCKQUOTE { padding-right: 10px }
Dopełnienie nie może przyjmować wartości ujemnych.
5.5.8 'padding-bottom'
Wartości: <length> | <percentage>
Wartość domyślna: 0
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Wartości procentowe: zależne od szerokości najbliższego elementu blokowego przodka
Atrybut ten służy do określania dolnego dopełnienia.
BLOCKQUOTE { padding-bottom: 2em }
Dopełnienie nie może przyjmować wartości ujemnych.
5.5.9 'padding-left'
Wartości: <length> | <percentage>
Wartość domyślna: 0
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Wartości procentowe: zależne od szerokości najbliższego elementu blokowego przodka
Atrybut ten służy do określania dopełnienia lewego.
BLOCKQUOTE { padding-left: 20% }
Dopełnienie nie może przyjmować wartości ujemnych.
5.5.10 'padding'
Wartości: [ <length> | <percentage> ]{1,4}
Wartość domyślna: brak dla deklaracji zbiorczych
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Wartości procentowe: zależne od szerokości najbliższego elementu blokowego przodka
Atrybut 'padding' jest atrybutem zbiorczym służącym do określania wartości następujących atrybutów:
'padding-top', 'padding-right', 'padding-bottom' oraz 'padding-left' w jednym miejscu.
Jeżeli określone zostały wszystkie cztery wartości, to odnoszą się one odpowiednio do dopełnienia:
górnego, prawego, dolnego i lewego. Jeżeli jest tylka jedna wartość, to ma ona zastosowanie do wszystkich
stron. Jeżeli określone są tylko dwie lub trzy wartości, to brakujące wartości dobierane są z przeciwnych stron.
Obszar zajmowany przez dopełnienie przyjmuje tło ustawione za pomocą atrybutu 'background':
H1 {
background: white;
padding: 1em 2em;
}
Powyższy przykład ustawia dopełnienie górne i dolne na '1em' oraz prawe i lewe na '2em'.
Jednostka 'em' jest zależna od rozmiaru czcionki: wartość '1em' równa się rozmiarowi używanej czcionki.
Dopełnienie nie może przyjmować wartości ujemnych.
5.5.11 'border-top-width'
Wartości: thin | medium | thick | <length>
Wartość domyślna: 'medium'
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Wartości procentowe: nie dotyczy
Atrybut 'border-top-width' służy do określania szerokości górnej krawędzi elementu.
Szerokość jaka zostanie zastosowana po użyciu słów kluczowych jest uzależniona od klienta,
ale przy zachowaniu następującej zasady: 'thin' <= 'medium' <= 'thick'.
Wartości przypisane słowom kluczowym są takie same dla całego dokumentu.
H1 { border: solid thick red }
P { border: solid thick blue }
Powyższy przykład spowoduje, że zarówno elementy 'H1' jak i elementy 'P' będą mieć takie samo obramowanie
bez względu na rozmiar użytej czcionki. W celu uzależnienia szerokości obramowania od czcionki można
użyć jednostek 'em':
H1 { border: solid 0.5em }
Wartości krawędzi nie mogą być ujemne.
5.5.12 'border-right-width'
Wartości: thin | medium | thick | <length>
Wartość domyślna: 'medium'
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Wartości procentowe: nie dotyczy
Atrybut ten służy do określania szerokości prawej krawędzi elementu. W razie jej braku szerokość prawej
krawędzi jest taka sama jak krawędzi górnej.
5.5.13 'border-bottom-width'
Wartości: thin | medium | thick | <length>
Wartość domyślna: 'medium'
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Wartości procentowe: nie dotyczy
Atrybut ten służy do określania szerokości dolnej krawędzi elementu. W razie jej braku szerokość dolnej
krawędzi jest taka sama jak krawędzi górnej.
5.5.14 'border-left-width'
Wartości: thin | medium | thick | <length>
Wartość domyślna: 'medium'
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Wartości procentowe: nie dotyczy
Atrybut ten służy do określania szerokości lewej krawędzi elementu. W razie jej braku szerokość lewej
krawędzi jest taka sama jak krawędzi górnej.
5.5.15 'border-width'
Wartości: [thin | medium | thick | <length>]{1,4}
Wartość domyślna: brak dla deklaracji zbiorczych
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Wartości procentowe: nie dotyczy
Atrybut ten jest atrybutem zbiorczym służącym do ustawiania wartości następujących atrybutów:
'border-width-top', 'border-width-right', 'border-width-bottom' oraz 'border-width-left'
w jednym miejscu.
Możliwe jest użycie od jednej do czterech wartości:
- jedna wartość: wszystkie cztery krawędzie przyjmą tę samą szerokość
- dwie wartości: szerokość krawędzi górnej i dolnej przyjmą wartość pierwszą, a krawędzie lewa i prawa drugą
- trzy wartości: krawędź górna przyjmuje pierwszą wartość,
krawędzie lewa i prawa przyjmują wartość drugą, a trzecia wartość
zostaje dla krawędzi dolnej
- cztery wartości: każda z nich jest dopasowywana do odpowiednich krawędzi w następującej kolejności:
góra, prawa, dół oraz lewa
Komentarze w poniższym przykładzie odpowiadają wartościom jakie przybiorą poszczególne krawędzie w kolejności:
góra, prawa, dół, lewa:
H1 { border-width: thin } /* thin thin thin thin */
H1 { border-width: thin thick } /* thin thick thin thick */
H1 { border-width: thin thick medium } /* thin thick medium thin */
H1 { border-width: thin thick medium thin } /* thin thick medium thin */
Szerokość krawędzi nie może być wartością ujemną.
5.5.16 'border-color'
Wartości: <color>{1,4}
Wartość domyślna: wartośćwłasności 'color'
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Wartości procentowe: nie dotyczy
Atrybut 'border-color' służy do określania koloru wszystkich czterech krawędzi. Atrybut
ten może przyjmować od jednej do czterech wartości. Zasady dopasowywania wartości do odpowiednich
krawędzi są takie same jak dla atrybutu 'border-width'.
Jeżeli nie zostanie określony kolor krawędzi, to przyjmą one kolor określony przez
wartość atrybutu 'color' elementu.
P {
color: black;
background: white;
border: solid;
}
Powyższy przykład spowoduje, że obramowanie elementu będzie reprezentowane w postaci
czarnej linii ciągłej.
5.5.17 'border-style'
Wartości: none | dotted | dashed | solid | double | groove | ridge | inset | outset
Wartość domyślna: brak
Zastosowanie: wszystkie elementy
Dziedziczenie: niebr /> Wartości procentowe: nie dotyczy
Atrybut 'border-color' służy do określania koloru wszystkich czterech krawędzi. Atrybut
ten może przyjmować od jednej do czterech wartości. Zasady dopasowywania wartości do odpowiednich
krawędzi są takie same jak dla atrybutu 'border-width'.
#xy34 { border-style: solid dotted }
Powyższy przykład spowoduje, że krawędzie poziome elementu będą liniami ciągłymi ('solid'),
a krawędzie pionowe kropkowanymi ('dotted').
Ze względu na fakt, że wartością domyślną atrybutu 'border-style' jest 'none', krawędzie nie będą widoczne
dopóki nie zostanie ustalona inna wartość dla tego atrybutu.
Znaczenie poszczególnych wartości dostępnych dla atrybutu 'border-style' jest następujące:
none
Brak krawędzi (bez względu na atrybut 'border-width').
dotted
Krawędź jest linią przerywaną, złożoną z kropek, stykającą się z miejscem gdzie kończy się tło.
dashed
Krawędź stanowi linia przerywana złożona z kresek, stykająca się z miejscem gdzie kończy się tło.
solid
Krawędź stanowi linia ciągła.
double
Krawędź stanowi podwójna linia, stykająca się z miejscem gdzie kończy się tło. Suma szerokości
poszczególnych linii oraz przestrzeni między nimi równa jest wartości atrybutu <border-width>.
groove
Trójwymiarowe zagłębienie o kolorze określonym przez atrybut <color>
ridge
Trójwymiarowy grzbiet o kolorze określonym przez atrybut <color>
inset
Tworzy wrażenie, że zawartość elementu jest zapadnięta. Kolor krawędzi określony jest przez atrybut <color>.
outset
Tworzy wrażenie, że zawartość elementu jest wypchnięta. Kolor krawędzi określony jest przez atrybut <color>.
CSS core: Aplikacja kliencka może potraktować każdą z wartości: 'dotted', 'dashed',
'double', 'groove', 'ridge', 'inset' oraz 'outset' jako 'solid'
5.5.18 'border-top'
Wartości: <border-top-width> || <border-style> || <color>
Wartość domyślna: brak dla deklaracji zbiorczych
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Wartości procentowe: nie dotyczy
Atrybut ten służy do ustawiania szerokości, stylu i koloru górnej krawędzi elementu.
H1 { border-bottom: thick solid red }
Powyższa reguła ustawia szerokość, styl i kolor dolnej krawędzi elementu 'H1'. Atrybuty pominięte
przybiorą wartości domyślne:
H1 { border-bottom: thick solid }
Jako że nie ustalono koloru obramowania, to przyjmie ono taki sam kolor jaki określa wartość parametru 'color' elementu.
Warto również pamiętać, że w odróżnieniu od atrybutu 'border-style', który może przyjmować maksymalnie do
czterech wartości, ten atrybut ogranicza się tylko do jednej wartości stylu.
5.5.19 'border-right'
Wartości: <border-right-width> || <border-style> || <color>
Wartość domyślna: brak dla deklaracji zbiorczych
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Wartości procentowe: nie dotyczy
Jest to atrybut zbiorczy służący do kontrolowania szerokości, stylu i koloru prawej krawędzi elementu.
Pod pozostałymi względami jest on równoznaczny z atrybutem 'border-top'.
5.5.20 'border-bottom'
Wartości: <border-bottom-width> || <border-style> || <color>
Wartość domyślna: brak dla atrybutów zbiorczych
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Wartości procentowe: nie dotyczy
Jest to atrybut zbiorczy służący do kontrolowania szerokości, stylu i koloru dolnej krawędzi elementu.
Pod pozostałymi względami jest on równoznaczny z atrybutem 'border-top'.
5.5.21 'border-left'
Wartości: <border-left-width> || <border-style> || <color>
Wartość domyślna: brak dla atrybutów zbiorczych
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Wartości procentowe: nie dotyczy
Jest to atrybut zbiorczy służący do kontrolowania szerokości, stylu i koloru lewej krawędzi elementu.
Pod pozostałymi względami jest on równoznaczny z 'border-top'.
5.5.22 'border'
Wartości: <border-width> || <border-style> || <color>
Wartość domyślna: brak dla atrybutów zbiorczych
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Wartości procentowe: nie dotyczy
Jest to atrybut zbiorvzy służący do kontrolowania szerokości, stylu i koloru wszystkich krawędzi elementu.
Na przykład pierwsza deklaracja w poniższym przykładzie wywoła taki sam efekt jak wszystkie pozostałe razem wzięte.
P { border: solid red }
P {
border-top: solid red;
border-right: solid red;
border-bottom: solid red;
border-left: solid red
}
W przeciwieństwie do atrybutów zbiorczych 'margin' i 'padding', przy pomocy atrybutu 'border' nie
można ustawić innych wartości dla każdej krawędzi. W tym celu należy zastosować jeden lub więcej
z pozostałych atrybutów krawędzi.
W związku z tym, że przy użyciu atrybutów krawędzi mogą zachodzić pewne konflikty, ważne jest
w jakiej kolejności zostaną one wpisane:
BLOCKQUOTE {
border-color: red;
border-left: double
color: black;
}
Powyższy przykład spowoduje, że lewa krawędź będzie czarna, a pozostałe krawędzie będą czerwone.
Dzieje się tak dlatego, że atrybut 'border-left' ustawia szerokość, styl i kolor lewej krawędzi,
a wartość atrybutu 'color', jeżeli nie zostanie zdefiniowana, jest zastępowana przez wartość atrybutu 'color'
elementu. Fakt, że atrybut 'color' elementu został wpisany dopiero po 'border-left' nie ma
tutaj znaczenia.
Godne zauważenia jest, że atrybut 'border' umożliwia ustawienie tylko jednego rozmiaru dla wszystkich krawędzi w
przeciwieństwie do atrybutu 'border-width'.
5.2.23 'width'
Wartości: <length> | <percentage> | auto
Wartość domyślna: auto
Zastosowanie: elementy blokowe i osadzone
Dziedziczenie: nie
Wartości procentowe: odnoszą się do szerokości elementu rodzica
Atrybut ten może być stosowany do elementów tekstowych, ale najbardziej przydaje się do elementów
osadzonych, takich jak obrazy. W razie potrzeby obraz jest przeskalowywany, aby dopasować się do
rozmiarów określonych przez wartość tego atrybutu. Współczynnik kształtu obrazu jest zachowany
jeżeli wartość atrybutu 'height' zostanie ustawiona na 'auto'.
Przykład:
IMG.icon { width: 100px }
Jeżeli zarówno atrybut 'height' jak i 'width' zostaną ustawione na 'auto', to wymiary elementu
zostaną takie same jak jego wymiary własne.
Wartości ujemne nie są dozwolone.
Zależności pomiędzy tym atrybutem, a atrybutami marginesów i dopełnienia wyjaśnione zostały w
rozdziale 4.
5.5.24 'height'
Wartości: <length> | auto
Wartość domyślna: auto
Zastosowanie: elementy blokowe i osadzone
Dziedziczenie: nie
Wartości procentowe: nie dotyczy
Atrybut ten może być stosowany do elementów tekstowych, ale najbardziej przydaje się do elementów
osadzonych, takich jak obrazy. W razie potrzeby obraz jest przeskalowywany, aby dopasować się do
rozmiarów określonych przez wartość tego atrybutu. Współczynnik kształtu obrazu jest zachowany
jeżeli wartość atrybutu 'width' zostanie ustawiona na 'auto'.
Przykład:
IMG.icon { height: 100px }
Jeżeli zarówno atrybut 'width' jak i 'height' zostaną ustawione na 'auto', to wymiary elementu
zostaną takie same jak jego wymiary własne.
W przypadku elementów tekstowych wysokość elementu może być wymuszona przy pomocy np. paska przewijania.
Wartości ujemne nie są dozwolone.
CSS core: Aplikacje klienckie mogą ignorować (np. traktować jako 'auto') wartość atrybutu 'height'
jeżeli zostanie ona zastosowana do elementu innego niż element osadzony.
5.5.25 'float'
Wartości: left | right | none
Wartość domyślna: none
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Wartości procentowe: nie dotyczy
Jeżeli wartością atrybutu 'float' jest 'none', to element zostanie wyświetlony tam gdzie go umieszczono
w dokumencie. Przy zastosowaniu wartości 'left' lub 'right' element zostanie wyrównany do odpowiedniej strony,
a sąsiadujący z nim tekst będzie go otaczał z odpowiedniej strony. Przy zastosowaniu wartości 'left'
lub 'right' element traktowany jest jako element blokowy (tj. atrybut 'display' jest ignorowany).
Więcej szczegółów na ten temat znajduje się w rozdziale 4.1.4.
IMG.icon {
float: left;
margin-left: 0;
}
Powyższy przykład spowoduje, że wszystkie elementy 'IMG' z klasą 'icon' zostaną umieszczone
wzdłuż lewej krawędzi elementu rodzica.
Atrybut ten najczęściej stosowany jest do obrazów będących elementami śródliniowymi, ale
może być także stosowany dla elementów zawierających tekst.
5.5.26 'clear'
Wartości: none | left | right | both
Wartość domyślna: none
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Wartości procentowe: nie dotyczy
Atrybut ten określa, czy i po której stronie elementu mogą znajdować się elementy pływające.
Mówiąc dokładniej, wartości tego atrybutu wskazują te strony, po których elementy pływające
występować nie mogą. Zastosowanie wartości 'left' spowoduje przesunięcie elementu poniżej
wszystkich elementów pływających do lewej. Przy wartości 'none' elementy pływające mogą
znajdować się po obu stronach elementu.
Przykład:
H1 { clear: left }
5.6 Klasyfikowanie
Atrybuty opisane w tym rozdziale służą do klasyfikowania elementów do odpowiednich
kategorii, w odróżnieniu od dotychczas omawianych, które wpływały w pewien sposób na ich
prezentację. Atrybuty typu 'list-style' służą do kontrolowania sposobu formatowania elementów
list (tzn. elementów posiadających wartość 'list-item' dla atrybutu 'display'). Atrybuty
'list-style' mogą być stosowane do wszystkich elementów z zachowaniem normalnego dziedziczenia.
Aczkolwiek efekt ich działania na element jest widoczny dopiero po ustawieniu atrybutu 'display'
na 'list-item'. W języku HTML element 'LI' zazwyczaj odpowiada tym wymaganiom.
5.6.1 'display'
Wartości: block | inline | list-item | none
Wartość domyślna: block
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Wartości procentowe: nie dotyczy
Atrybut ten służy do określania, czy i w jaki sposób element powinien zostać pokazany
(w druku, na ekranie monitora itd.).
Zastosowanie wartości 'block' powoduje, powstanie elementu blokowego. Element ten podlega pozycjonowaniu
względem sąsiadujących bloków zgodnie z modelem formatowania CSS.
Typowe elementy blokowe to np. 'H1' i 'P'. Atrybutem o podobnym działaniu jest 'list-item'. Od
atrybutu 'block' różni się on tym, że dodaje jeszcze punktor listy. W języku 'HTML' typowym
elementem listy jest element 'LI'.
Wartość 'inline' dla atrybutu 'display' z kolei, powoduje powstanie elementu śródliniowego. Element
taki jest wielkością dopasowywany automatycznie do rozmiaru jego zawartości. Jeżeli zawiera on tekst
o długości kilku linijek, to powstanie kilka bloków-linii. Atrybuty marginesów, dopełnienia i obramowania
także mają zastosowanie do tego typu elementów, z tym że łamania linii nie są uwzględniane.
Wartość 'none' powoduje wyłączenie atrybutu 'display' dla danego elementu włącznie z elementami potomnymi
i otaczającą go ramką.
P { display: block }
EM { display: inline }
LI { display: list-item }
IMG { display: none }
Ostatnia reguła w powyższym przykładzie wyłącza wszystkie obrazy graficzne.
Mimo że wartością domyślną atrybutu 'display' jest 'block', to aplikacje klienckie posiadają
własny zestaw wartości domyślnych dla każdego elementu HTML, zgodnych z zaleceniami zawartymi w specyfikacji
tego języka [2].
CSS1 core: Aplikacje klienckie mogą ignorować atrybut 'display' i używać własnego zestawu wartości
(patrz rozdział 7).
5.6.2 'white-space'
Wartości: normal | pre | nowrap
Wartość domyślna: normal
Zastosowanie: elementy blokowe
Dziedziczenie: tak
Wartości procentowe: nie dotyczy
Atrybut ten służy do określania sposobu zachowania spacji wewnątrz elementu. Wartość
'normal' oznacza, że wielokrotne spacje redukowane są do pojedynczych; wartość 'pre'
powoduje, że spacje zachowują się tak samo jak w elemncie HTML 'PRE'; 'nowrap' powoduje,
że łamanie linii następuje wyłącznie po zastosowaniu elementu 'BR'.
PRE { white-space: pre }
P { white-space: normal }
Mimo że wartością domyślną atrybutu 'white-space' jest 'normal', to aplikacje klienckie posiadają
własny zestaw wartości domyślnych dla każdego elementu HTML, zgodnych z zaleceniami zawartymi w specyfikacji
tego języka [2].
CSS1 core: Aplikacje klienckie mogą ignorować atrybut 'white-space' w arkuszach zarówno czytelnika
jak i autora i używać własnego zestawu wartości (patrz rozdział 7).
5.6.3 'list-style-type'
Wartości: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
Wartość domyślna: disc
Zastosowanie: elementy z atrybutem 'display' ustawionym na 'list-item'
Dziedziczenie: tak
Wartości procentowe: nie dotyczy
Atrybut ten służy do określania sposobu prezentacji symboli elementów listy, gdy wartość atrybutu
'list-style-image' jest ustawiona na 'none' lub obraz wskazany przez niego jest niedostępny.
OL { list-style-type: decimal } /* 1 2 3 4 5 etc. */
OL { list-style-type: lower-alpha } /* a b c d e etc. */
OL { list-style-type: lower-roman } /* i ii iii iv v etc. */
5.6.4 'list-style-image'
Wartości: <url> | none
Wartość domyślna: none
Zastosowanie: elementy z atrybutem 'display' ustawionym na 'list-item'
Dziedziczenie: tak
Wartości procentowe: nie dotyczy
Atrybut ten służy do określania obrazu graficznego użytego jako symbol elementu listy. Jeżeli obraz ten jest
dostępny, to nadpisze on symbol określony przez atrybut 'list-style-type'.
UL { list-style-image: url(http://png.com/ellipse.png) }
5.6.5 'list-style-position'
Wartości: inside | outside
Wartość domyślna: outside
Zastosowanie: elementy z atrybutem 'display' ustawionym na 'list-item'
Dziedziczenie: tak
Wartości procentowe: nie dotyczy
Atrybut 'list-style-position' służy do określania sposobu rysowania symbolu elementu listy w zależności od
treści elementu. Przykład formatowania znajduje się w rozdziale 4.1.3.
5.6.6 'list-style'
Wartości: [disc | circle | square |
decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none]
|| [inside | outside] || [<url> | none]
Wartość domyślna: brak dla deklaracji zbiorczych
Zastosowanie: elementy z atrybutem 'display' ustawionym na 'list-item'
Dziedziczenie: tak
Wartości procentowe: nie dotyczy
Atrybut 'list-style' jest atrybutem zbiorczym służącym do ustawiania
wartości trzech atrybutów: 'list-style-type', 'list-style-image' oraz
'list-style-position'.
UL { list-style: upper-roman inside }
UL UL { list-style: circle outside }
LI.square { list-style: square }
Zastosowanie atrybutu 'list-style-type' bezpośrednio do elementów 'LI' może wywołać nieoczekiwany rezultat:
<STYLE TYPE="text/css">
OL.alpha LI { list-style: lower-alpha }
UL LI { list-style: disc }
</STYLE>
<BODY>
<OL CLASS=alpha>
<LI>level 1
<UL>
<LI>level 2
</UL>
</OL>
</BODY>
Jako że pierwsza reguła jest bardziej precyzyjna od drugiej w powyższym przykładzie, to narzuci
ona swój styl dla wszystkich elementów 'LI', tzn. tylko wartość 'lower-alpha' będzie miała zastosowanie.
W związku z tym rekomendowane jest użycie atrybutu 'list-style' tylko dla elementów określających typ listy:
OL.alpha { list-style: lower-alpha }
UL { list-style: disc }
Dzięki dziedziczeniu powyższy przykład spowoduje, że każdy element listy będzie poprzedzony
odpowiednim punktorem.
Adresy URL można stosować łącznie z innymi wartościami:
UL { list-style: url(http://png.com/ellipse.png) disc }
Wartość 'disc' zostanie użyta, gdy obraz wskazany przez adres url będzie niedostępny.
6 Jednostki
6.1 Jednostki miary
Format zapisu jednostek miary składa się z opcjonalnego znaku plus ("+") lub minus ("-"), po którym
następuje cyfra lub liczba (z przecinkiem lub bez przecinka) oraz określnik jednostki w postaci dwuliterowego skrótu.
Określnik jednostki jest opcjonalny po cyfrze '0'. Pomiędzy poszczególnymi członami nie może być spacji.
Dla niektórych atrybutów dostępne są jednostki ujemne, ale ich zastosowanie może przyczynić się do
nadmiernej komplikacji modelu formatowania, a także mogą wystąpić pewne ograniczenia implementacyjne.
W przypadku braku obsługi jednostek ujemnych, powinny one być zaokrąglone do najbliższych obsługiwanych
wartości.
Wyróżnia się dwa typy jednostek miary: jednostki względne i jednostki absolutne. Jednostki względne
określają wielkość w odniesieniu do innych jednostek. Arkusze stylów zaprojektowane przy użyciu jednostek
względnych łatwiej się skalują przy przenoszeniu z jednego medium na inne (np. z ekranu monitora do druku
laserowego). Jednostki procentowe (opisane poniżej) i słowa kluczowe (np. 'x-large') posiadają podobne zalety.
Obsługiwane są następujące jednostki względne:
H1 { margin: 0.5em } /* em oznacza, że margines będzie miał taki sam
rozmiar jak połowa wielkości czcionki tego
elementu */
H1 { margin: 1ex } /* x-height, ~ wysokość litery 'x' */
P { font-size: 12px } /* piksele - zależne od obszaru roboczego */
Jednostki względne 'em' i 'ex' zależne są od rozmiaru czcionki zastosowanej dla danego elementu.
Jedynym wyjątkiem od tej reguły w CSS1 jest atrybut 'font-size', którego wartości wyrażone przy
pomocy jednostek względnych 'em' lub 'ex' odnoszą się do rozmiaru czcionki elementu rodzica.
Jednostki pikselowe, które zostały użyte w ostatniej regule, są zależne od rozdzielczości
obszaru roboczego - najczęściej ekranu monitora. Jeżeli różnica pomiędzy rozdzielczością urządzenia
wyjściowego i typową rozdzielczością monitora jest bardzo duża, to aplikacja kliencka powinna dokonać
przeskalowania rozmiaru pikseli. Sugerowany piksel odniesienia to kąt z jakiego można zobaczyć jeden piksel na
urządzeniu o rozdzielczości 90dpi i przy odległości od ekranu na wyciągnięcie ręki.
Przy założeniu, że typowa długość ręki to około 70 cm, kąt widzenia wynosi 0,0227 stopnia.
Elementy dziecka dziedziczą wartość wyliczoną, a nie wartość względną:
BODY {
font-size: 12pt;
text-indent: 3em; /* czyli 36pt */
}
H1 { font-size: 15pt }
W powyższym przykładzie wartość atrybutu 'text-indent' dla elementu 'H1' wynosi 36pt, a nie 45pt.
Jednostki absolutne przydatne są tylko w sytuacji, gdy znany jest rodzaj medium wyjściowego.
Obsługiwane są następujące jednostki absolutne:
H1 { margin: 0.5in } /* cale, 1 cal = 2.54cm */
H2 { line-height: 3cm } /* centymetry */
H3 { word-spacing: 4mm } /* millimetry */
H4 { font-size: 12pt } /* punkty, 1pt = 1/72 cala */
H4 { font-size: 1pc } /* picas (kwadraty), 1pc = 12pt (więcej) */
Jeżeli zastosowana jednostka nie jest obsługiwana, klient powinien dokonać próby zaokrąglenia. Pozostałe
obliczenia dotyczące poszczególnych wartości powinny być wykonywane z uwzględnieniem już zaokrąglonej wartości.
6.2 Jednostki procentowe
Format zapisu wartości przy użyciu jednostek procentowych składa się z opcjonalnego znaku '+' lub '-'
('+' jest znakiem domyślnym), bezpośrednio po którym następuje liczba lub cyfra (z przecinkiem lub bez przecinka)
z towarzyszącym jej znakiem '%'.
Wartości procentowe zawsze zależne są od innych wartości, np. od jednostek długości.
Dla każdego atrybutu, dla którego dozwolone są wartości procentowe, określono także
wartość, do której ten procent się odnosi. Najczęściej jest nią wartość rozmiaru czcionki
elementu, do którego ta wartość się odnosi:
P { line-height: 120% } /* 120% wartości atrybutu 'font-size' */
Elementy dziecka dziedziczą od rodzica wartość uzyskaną w wyniku dokonania nizebędnych obliczeń,
a nie wartość procentową. Zasada ta dotyczy wszystkich dziedziczonych atrybutów CSS 1, dla których
zdefiniowano wartość procentową.
6.3 Jednostki kolorów
Są dwa sposoby definiowania kolorów: przy pomocy słów kluczowych lub wartości RGB.
Lista sugerowanych słów kluczowych przedstawia się następująco: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, oraz yellow.
Wszystkie te słowa pochodzą z 16 kolorowej palety Windows VGA i brak ich odpowiedników w postaci RGB
w tej specyfikacji.
* Aby sprawdzić znaczenie danego słowa kluczowego należy najechać na nie kursorem
i chwilę zaczekać.
BODY {color: black; background: white }
H1 { color: maroon }
H2 { color: olive }
Model RGB bazuje na kilku sposobach numerycznej prezentacji kolorów. Wszystkie poniższe przykłady
definiują ten sam kolor:
EM { color: #f00 } /* #rgb */
EM { color: #ff0000 } /* #rrggbb */
EM { color: rgb(255,0,0) } /* liczby całkowite w przedziale 0 - 255 */
EM { color: rgb(100%, 0%, 0%) } /* liczby zmiennoprzecinkowe
w przedziale 0.0% - 100.0% */
Format wartości RGB w notacji szesnastkowej (heksadecymalnej) składa się ze znaku '#', bezpośrednio
po którym następują trzy lub sześć znaków alfanumerycznych. Notacja trzyznakowa (#rgb) jest przekształcana
w notację sześcioznakową przy pomocy duplikacji poszczególnych znaków (a nie dodawania zer). Na przykład: wartość
#fb0 zostanie przekształcona na wartość #ffbb00. Dzięki tej metodzie kolor biały (#ffffff) można krótko zapisać
w postaci #fff oraz można uniknąć zależności od dostępnej głębi kolorów.
Format zapisu wartości RGB w notacji funkcjonalnej składa się z łańcucha 'rgb(', po którym następuje
lista trzech wartości numerycznych oddzielonych przecinkami (mogą to być, albo liczby całkowite ze zbioru
0-255, albo wartości procentowe ze zbioru 0.0% - 100.0%) oraz zamknięcia nawiasu okrągłego - ')'.
Wokół wartości numerycznych mogą występować białe znaki.
Wartości spoza dozwolonego zbioru powinny być zaokrąglane do najbliższej dozwolonej wartości.
Wszystkie trzy reguły w poniższym przykładzie są równoważne:
EM { color: rgb(255,0,0) } /* zbiór liczb całkowitych 0 - 255 */
EM { color: rgb(300,0,0) } /* zaokrąglone do 255 */
EM { color: rgb(110%, 0%, 0%) } /* zaokrąglone do 100% */
Kolory RGB zdefiniowano w przestrzeni kolorów sRGB [9].
Wierność odwzorowywania tych kolorów może być różna u różnych klientów, ale zastosowanie tej
przestrzeni zapewnia jednoznaczność i obiektywną definicję koloru, o który chodzi, z możliwością
odniesienia się do standardów międzynarodowych [10].
Aplikacje klienckie mogą ograniczyć się do zastosowania korekcji gamma do określonych kolorów.
Przestrzeń sRGB określa, w określonych warunkach, współczynnik gamma na poziomie 2.2.
Aplikacje klienckie dostosowują kolory określone przez CSS w taki sposób, że w połączeniu z
naturalnym współczynnikiem gamma urządzenia, efektywny współczynnik gamma wynosi 2.2.
Więcej szczegółów na ten temat znajduje się w Dodatku D.
Należy pamiętać również, że powyższym zasadom nie podlegają obrazy graficzne.
6.4 URL
Notacja funkcjonalna służąca do określania adresów URL (ang. Uniform Resource Locator)
jest następująca:
BODY { background: url(http://www.bg.com/pinkish.gif) }
Format zapisu wartości URL składa się z łańcucha 'url(', po którym następuje opcjonalny biały znak oraz znak apostrofu
lub cudzysłowu, a dopiero po nim właściwy adres URL (patrz [11]). Całość zamknięta
jest okrągłym nawiasem ')'. Znaki cudzysłowów, które nie należą do adresu URL muszą występować parami.
Nawiasy okrągłe, przecinki, białe znaki, apostrofy oraz cudzysłowy w adresach URL muszą być zapisywane przy użyciu
lewego ukośnika: '\(', '\)', '\,'.
Adresy niepełne interpretowane są względem lokalizacji arkusza stylów, a nie dokumnetu, do którego
został on dołączony.
BODY { background: url(yellow) }
7 Zgodność z CSS1
Aplikacja kliencka prezentująca dokumenty przy użyciu CSS odpowiada wymogom specyfikacji CSS 1, gdy:
- Podczas wczytywania dokumentu próbuje odszukać wszystkie arkusze stylów, do których znajduje się odniesienie
w danym dokumencie oraz parsuje je zgodnie z wymogami specyfikacji CSS 1.
- Sortuje reguły zgodnie z zasadą kaskadowości.
- W miarę możliwości środka przekazu używa wszystkich atrybutów CSS 1 (patrz niżej).
Aplikacja kliencka, która tworzy własne arkusze stylów, odpowiada wymaganiom specyfikacji CSS 1, gdy:
- Utworzone przez nią arkusze stylów są prawidłowe.
Aplikacja, która prezentuje dokumenty przy użyciu CSS 1 i która tworzy dokumenty CSS 1, jest zgodna ze specyfikacją
CSS 1 tylko wtedy, gdy spełnia wszystkie powyższe wymagania.
Aby osiągnąć zgodność ze specyfikacją CSS1, aplikacja nie musi mieć zaimplementowanych wszystkich atrybutów CSS1.
Do tego celu wystarczy implementacja tylko funkcji podstawowych. Funkcje podstawowe CSS 1 to cała specyfikacja z wyjątkiem
tych części, które zostały z niej wyraźnie wykluczone. W specyfikacji te części oznaczone są jako:
"CSS1 core:", po czym następuje wyjaśnienie, które funkcje wykraczają poza zestaw funkcji
podstawowych. Funkcje wykluczone z podstawowego zestawu zwane są funkcjami zaawansowanymi.
Rozdział ten zawiera opis wymagań, które należy spełnić, aby aplikacja kliencka była zgodna z CSS 1.
W przyszłości pojawią się następne wersje CSS, które mogą stawiać inne wymagania przed twórcami aplikacji
klienckich.
Przykłady ograniczeń mediów prezentujących dokumenty: ograniczone zasoby (czcionki, kolory) i ograniczona
zdolność rozdzielcza (co może powodować nieprawidłowe odwzorowanie marginesów). W takich przypadkach klient
powinien zaokrąglać wartości. Różne paradygmaty interfejsów użytkownika mogą być obciążone pewnymi
ograniczeniami: przeglądarka VR może przeskalowywać dokumenty na podstawie "odległości" od
użytkownika.
Aplikacja kliencka może udostępniać użytkownikom dodatkowe opcje. Na przykład może być wyposażona w
funkcje przydatne dla użytkowników z wadami wzroku lub pozwalać na wyłączanie funkcji mrugania.
Należy jednak pamiętać, że CSS 1 nie reguluje wszystkich aspektów formatowania dokumentów.
Na przykład aplikacja kliencka ma możliwość wyboru własnego algorytmu obliczania odelgłości między
literami.
Specyfikacja ta zaleca, ale nie jest to wymóg konieczny, aby aplikacja kliencka:
- Pozwalała użytkownikowi na samodzielny wybór arkuszy stylów,
- pozwalała użytkownikowi włączać i wyłączać własne arkusze stylów.
Powyższe zasady służą do opisu funkcjonalności, a nie interfejsu użytkownika.
7.1 Przyszłość
Specyfikacja ta opisuje język CSS 1. W przyszłości prawdopodobnie powstaną następne wersje tego języka, wzbogacone o
nowe funkcje. Niniejszy rozdział poświęcony jest opisowi zachowania aplikacji klienckich, obsługujących tylko CSS 1,
które napotkają arkusze stylów nie należące do tej specyfikacji.
- Deklaracje z nieznanymi atrybutami są ignorowane. Na przykład, jeżeli w arkuszu pojawi się następujący zapis:
H1 { color: red; rotation: 70deg }
to zostanie on potraktowany następująco:
H1 { color: red; }
- Nieznane wartości lub wartości częściowo nieznane są ignorowane:
IMG { float: left } /* CSS1 */
IMG { float: left top } /* "top" nie jest wartością atrybutu 'float' */
IMG { background: "red" } /* słowa kluczowe nie występują w cudzysłowie */
IMG { border-width: 3 } /* wartości liczbowe muszą posiadać jednostki */
Tylko pierwsza z powyższych reguł byłaby uznana przez parser CSS 1. Reszta zostałaby zignorowana:
IMG { float: left }
IMG { }
IMG { }
IMG { }
Aplikacja kliencka zgodna z przyszłymi wersjami CSS może także akceptować jedną lub więcej z pozostałych zasad.
- Nieprawidłowa reguła typu '@' zostanie zignorowana łącznie z wszystkim co następuje po niej, aż
do napotkania średnika lub zamknięcia nawiasu klamrowego włącznie:
@three-dee {
@background-lighting {
azimuth: 30deg;
elevation: 190deg;
}
H1 { color: red }
}
H1 {color: blue}
Reguła '@three-dee' jest nieprawidłowa z punktu widzenia CSS 1. W związku z tym, jest ona w całości ignorowana przez parser.
Arkusz stylów wygląda teraz następująco:
H1 {color: blue}
Mówiąc ściślej:
Kaskadowy Arkusz Stylów w każdej wersji składa się z listy instrukcji. Są dwa rodzaje instrukcji: tzw. "at-rules"
oraz zwykłe reguły. Każde z nich mogą występować w towarzystwie białych znaków (spacji, tabulatorów, znaków nowej linii).
Jako że arkusze stylów bywają często włączane bezpośrednio do dokumentów HTML, to dobrą praktyką jest
ukrywanie ich przed starszymi aplikacjami za pomocą komentarzy HTML. Znaki otwarcia i zamknięcia komentarzy
HTML mogą pojawiać się przed, po i wewnątrz instrukcji w otoczeniu białych znaków lub nie.
Reguły typu 'at-rule' rozpoczynają się od słowa kluczowego, będącego identyfikatorem rozpoczynającym się od
znaku '@'. (np. '@import', '@page'). Identyfikator może składać się z liter, cyfr, myślników oraz znaków unikowych
(bardziej szczegółowo opisanych poniżej).
Regułę 'at-rule' stanowi wszystko co znajduje się pomiędzy znakiem '@' oraz znakiem średnika włącznie ';' lub następnym blokiem
(o blokach będzie mowa poniżej), w zależności co występuje jako pierwsze. Reguły 'at-rule' nie rozpoczynające się od słowa
kluczowego '@import' są ignorowane przez parser CSS 1. To samo dotyczy reguł 'at-rule' nie znajdujących się na samym początku
arkusza stylów, tj. znajdujących się po jakichkolwiek innych regułach (nawet zignorowanych).
Załóżmy, że parser CSS 1 napotyka następujący fragment kodu CSS1:
@import "subs.css";
H1 { color: blue }
@import "list.css";
Druga reguła 'at-rule' jest umiejscowiona niezgodnie ze specyfikacją CSS 1, przez co zostanie ona zignorowana. Po
przetworzeniu arkusz stylów wygląda następująco:
@import "subs.css";
H1 {color: blue}
Blokiem jest wszystko co znajduje się pomiędzy otwierającym i zamykającym nawiasem klamrowym. Pomiędzy tymi nawiasami
możę pojawić się każdy znak, z tym że nawiasy okrągłe, nawiasy kwadratowe oraz nawiasy klamrowe muszą zawsze występować
w odpowiadających sobie parach oraz mogą być zagnieżdżane. Cudzysłowy pojedyncze i podwójne także muszą występować
parami, a treść zawarta pomiędzy nimi jest parsowana jako łańcuch znaków (więcej na temat łańcuchów w Dodatku B). Poniżej znajduje się przykładowy blok. Zamykający nawias klamrowy znajdujący się
w podwójnych cudzysłowach nie jest odpowiednikiem nawiasu otwierającego, a drugi cudzysłów pojedynczy służy jako znak unikowy,
a nie jako para dla pierwszego pojedynczego cudzysłowu:
{ causta: "}" + ({7} * '\'') }
Reguła zwykła składa się z selektora, po którym następuje deklaracja bloku. Selektor stanowi wszystko co
znajduje się przed otwierającym nawiasem klamrowym ({). Reguła rozpoczynająca się od nieprawidłowego selektora
jest ignorowana.
Załóżmy, że parser CSS 1 napotyka następujący fragment kodu CSS 1:
H1 { color: blue }
P[align], UL { color: red; font-size: large }
P EM { font-weight: bold }
Druga z kolei reguła zawiera nieprawidłowy dla specyfikacji CSS 1 selektor. Aplikacja kliencka zignoruje zatem tę regułę:
H1 { color: blue }
P EM { font-weight: bold }
Blok deklaracji rozpoczyna się od otwierającego nawiasu klamrowego({), a kończy nawiasem klamrowym zamykającym (}).
Pomiędzy tymi nawiasami znajduje się zero lub więcej deklaracji oddzielonych znakiem średnika (;).
Deklaracja składa się z atrybutu, średnika oraz wartości. Wokół nich mogą występować białe znaki.
Atrybut służy jako identyfikator, o czym mowa była powyżej. W wartościach można używać wszystkich znaków,
ale nawiasy okrągłe (()), nawiasy kwadratowe ([]), nawiasy klamrowe ({}), pojedyncze (') i podwójne (") cudzysłowy muszą
występować w uzupełniających się parach. Nawiasy okrągłe, klamrowe i kwadratowe można zagnieżdżać. Znaki w cudzysłowach
traktowane są jako łańcuchy znaków.
Aby dodawanie nowych wartości dla istniejących już atrybutów było możliwe, aplikacje klienckie
muszą ignorować nieznane im atrybuty lub wartości. Każdy atrybut posiada własne ograniczenia
syntaktyczne i semantyczne w odniesieniu do akceptowanych wartości.
Wyobraźmy sobie następujący arkusz stylów:
H1 { color: red; font-style: 12pt }
P { color: blue; font-vendor: any; font-variant: small-caps }
EM EM { font-style: normal }
Druga deklaracja w pierwszej linijce posiada nieprawidłową wartość '12pt'. Druga deklaracja w drugiej linijce
zawiera niezdefiniowany atrybut 'font-vendor'. Parser CSS 1 zignoruje te deklaracje, a arkusz stylów będzie
wyglądał następująco:
H1 { color: red; }
P { color: blue; font-variant: small-caps }
EM EM { font-style: normal }
Komentarze (patrz rozdział 1.7) można umieszczać wszędzie
i traktowane są one jako pojedyncze spacje. W CSS 1 zdefiniowano miejsca, w których mogą znajdować się pojedyncze odstępy
(np. wewnątrz wartości). Komentarze dozwolone są także w tych miejscach.
Poniższe zasady mają zastosowanie zawsze:
- Arkusze stylów nie rozróżniają wielkich i małych liter. Wyjątkiem są te części, które nie należą do
specyfikacji CSS. To znaczy, w CSS 1 w nazwach rodzin czcionek i adresach URL mogą być rozpoznawane
wielkie i małe litery. Atrybuty CLASS oraz ID pozostają pod kontrolą języka HTML.
- Selektory (nazwy elementów, klas oraz identyfikatory ID) mogą zawierać znaki ze zbiorów A-Z, 0-9, znaki
Unicode 161-255 oraz myślniki. Nie mogą się one rozpoczynać od myślnika ani cyfry. Dopuszczalne jest także
użycie znaków unikowych oraz znaków Unicode zapisanych w postaci kodu numerycznego (patrz następny punkt).
- Lewy ukośnik, bezpośrednio po którym znajdują się nie więcej niż cztery cyfry heksadecymalne (0-9A-F)
stanowi znak w systemie Unicode, o określonym numerze.
- Od każdego znaku, za wyjątkiem znaków zapisanych systemem heksadecymalnym, można uciec umieszczając
przed nim lewy ukośnik, np.: "\"" - łańcuch składający się z otwierającego i zamykającego cudzysłowu.
- Dwa powyższe punkty opisują sposoby zastosowania lewego ukośnika jako znaku unikowego. Lewy ukośnik zastosowany jako
znak unikowy jest zawsze traktowany jako część identyfikatora, z wyjątkiem sytuacji, kiedy pojawia się on wewnątrz
łańcucha znaków (tj. "\7B" nie jest znakiem przestankowym, ale "{" jest, "\32" może
znaleźć się na początku nazwy klasy, ale "2" nie).
Ważne: W HTML dozwolone jest więcej znaków, które mogą wystąpić w nazwie atrybutu CLASS niż te które mogą wystąpić
w selektorach opisanych powyżej. W CSS 1 do zapisu tych znaków należy zastosować znaki unikowe lub zapisać je jako
wartości liczbowe systemu Unicode: "B&W?" można zapisać jako "B\&W\?" lub "B\26W\3F",
"??????" (Greckie: "kouros") powinno być zapisane jako:
"\3BA\3BF\3C5\3C1\3BF\3C2". Oczekuje się, że w przyszłych wersjach CSS można będzie wpisywać więcej znaków
bezpośrednio.
Gramatyka CSS1 znajduje się w Dodatku B.
8. Źródła
[1] Strona W3C poświęcona CSS (http://www.w3.org/Style)
[2] "Specyfikacja HTML 4.0", D. Raggett, A. Le Hors, I. Jacobs, Grudzień 1997. Dostępna pod adresem internetowym http://www.w3.org/TR/REC-html40/.
[3] T Berners-Lee, D Connolly: "Hypertext Markup Language - 2.0", RFC 1866, MIT/W3C, November 1995.
Specyfikacja ta dostępna jest także w formacie HTML (http://www.w3.org/MarkUp/html-spec/html-spec_toc.html).
[4] F Yergeau, G Nicol, G Adams, M Dürst:: "Internationalization of the Hypertext Markup Language" (ftp://ds.internic.net/rfc/rfc2070.txt).
[5] ISO 8879:1986. Information Processing - Text and Office Systems - Standard Generalized Markup Language (SGML)
[6] ISO/IEC 10179:1996 Information technology -- Processing languages -- Document Style Semantics and Specification Language (DSSSL).
[7] ISO/IEC 9899:1990 Programming languages -- C.
[8] The Unicode Consortium, "The Unicode Standard -- Worldwide Character
Encoding -- Version 1.0", Addison-Wesley, Volume 1, 1991, Volume 2,
1992.
[9] "A Standard Default color Space for the Internet", version 1.10, M. Stokes, M. Anderson, S. Chandrasekar, and R. Motta, 5 November 1996.
[10] CIE Publication 15.2-1986, "Colorimetry, Second Edition", ISBN 3-900-734-00-3 (http://www.hike.te.chiba-u.ac.jp/ikeda/CIE/publ/abst/15-2-86.html)
[11] T Berners-Lee, L Masinter, M McCahill: "Uniform Resource Locators (URL)", RFC 1738, CERN, Xerox Corporation, University of Minnesota, December 1994
[12] "PNG (Portable Network Graphics) Specification, Version 1.0 specification" (http://www.w3.org/TR/REC-png-multi.html)
[13] Charles A. Poynton: "Gamma correction on the Macintosh Platform" (ftp://ftp.inforamp.net/pub/users/poynton/doc/Mac/Mac_gamma.pdf)
[14] International Color Consortium: "ICC Profile Format Specification, version 3.2", 1995 (ftp://sgigate.sgi.com/pub/icc/ICC32.pdf)
[15] S C Johnson: "YACC - Yet another compiler compiler", Technical Report, Murray Hill, 1975
[16] "Flex: The Lexical Scanner Generator", Version 2.3.7, ISBN 1882114213
9. Podziękowania
W trakcie trwania niedługiego jeszcze życia języka HTML zgłoszono kilka propozycji arkuszy stylów, za co jesteśmy
wdzięczni. W szczególności chcielibyśmy podziękować Robertowi Raisch, Joe English oraz Pei Wei, za ich bardzo
przydatne propozycje.
Do utworzenia tej specyfikacji przyczyniło się wiele osób. W
szczególności chcielibyśmy podziękować
następującym osobom: Terry Allen, Murray Altheim, Glenn Adams, Walter
Bender, Tim Berners-Lee, Yves Bertot, Scott Bigham, Steve Byrne, Robert
Cailliau, James Clark, Daniel Connolly, Donna Converse, Adam Costello,
Todd Fahrner, Todd Freter, Roy Fielding, Neil Galarneau, Wayne Gramlich,
Phill Hallam-Baker, Philipp Hoschka, Kevin Hughes, Scott Isaacs, Tony
Jebson, William Johnston, Gilles Kahn, Philippe Kaplan, Phil Karlton,
Evan Kirshenbaum, Yves Lafon, Murray Maloney, Lou Montulli, Colas
Nahaboo, Henrik Frystyk Nielsen, David Perrell, William Perry, Scott
Preece, Paul Prescod, Liam Quin, Vincent Quint, Jenny Raggett, Thomas
Reardon, Cécile Roisin, Michael Seaton, David Seibert, David Siegel,
David Singer, Benjamin Sittler, Jon Smirl, Charles Peyton Taylor, Irene
Vatton, Daniel Veillard, Mandira Virmani, Greg Watkins, Mike Wexler,
Lydja Williams, Brian Wilson, Chris Wilson, Lauren Wood oraz Stephen
Zilles.
Trzy osoby zasługują na szczególne wyróżnienie: Dave Raggett (za zachęcanie nas do pracy i pracę nad HTML3),
Chris Lilley (za nieoceniony wkład w prace, w szczególności nad rozdziałami o koloroach i czcionkach)
oraz Steven Pemberton (za zdolności organizacyjne i pomysłowość).
Dodatek A
Przykładowy arkusz stylów dla HTML 2.0
Dodatek ten ma charakter informatywny, a nie normatywny.
Poniższy arkusz stylów został napisany zgodnie z formatowaniem przyjętym w HTML 2.0 [3]. Niektóre style, takie jak np. kolory, zostały
dodane jako uzupełnienie całości. Rekomenduje się użycie podobnego arkusza stylów jako
domyślnego arkusza aplikacji klienckiej.
BODY {
margin: 1em;
font-family: serif;
line-height: 1.1;
background: white;
color: black;
}
H1, H2, H3, H4, H5, H6, P, UL, OL, DIR, MENU, DIV,
DT, DD, ADDRESS, BLOCKQUOTE, PRE, BR, HR, FORM, DL {
display: block }
B, STRONG, I, EM, CITE, VAR, TT, CODE, KBD, SAMP,
IMG, SPAN { display: inline }
LI { display: list-item }
H1, H2, H3, H4 { margin-top: 1em; margin-bottom: 1em }
H5, H6 { margin-top: 1em }
H1 { text-align: center }
H1, H2, H4, H6 { font-weight: bold }
H3, H5 { font-style: italic }
H1 { font-size: xx-large }
H2 { font-size: x-large }
H3 { font-size: large }
B, STRONG { font-weight: bolder } /* zależny od rodzica */
I, CITE, EM, VAR, ADDRESS, BLOCKQUOTE { font-style: italic }
PRE, TT, CODE, KBD, SAMP { font-family: monospace }
PRE { white-space: pre }
ADDRESS { margin-left: 3em }
BLOCKQUOTE { margin-left: 3em; margin-right: 3em }
UL, DIR { list-style: disc }
OL { list-style: decimal }
MENU { margin: 0 } /* ścisłe formatowanie */
LI { margin-left: 3em }
DT { margin-bottom: 0 }
DD { margin-top: 0; margin-left: 3em }
HR { border-top: solid } /* można też było użyć 'border-bottom' */
A:link { color: blue } /* łącze nie odwiedzony */
A:visited { color: red } /* odwiedzone łącze */
A:active { color: lime } /* łącze aktywne */
/* Ustawienie obramowania wokół obrazów służących
jako odnośniki wymaga użycia selektorów
kontekstualnych */
A:link IMG { border: 2px solid blue }
A:visited IMG { border: 2px solid red }
A:active IMG { border: 2px solid lime }
Dodatek B - gramatyka CSS1
Ten dodatek ma charakter normatywny
Minimalne wymagania gramatyki CSS opisano w rozdziale 7.
Poniższa gramatyka opisuje zagadnienie o wiele węższe - składnię CSS 1.
Aczkolwiek niniejszy dokument stanowi w pewnym sensie nadzbiór specyfikacji CSS 1:
istnieją dodatkowe ograniczenia, o których nie ma mowy w tej gramatyce. Aplikacja kliencka
zgodna ze specyfikacją CSS 1 musi także stosować się do zasad opisanych w rozdziałach: 5, 6, 7.1.
Dodatkowo istnieją pewne ograniczenia ze strony samego HTML, np.: nazw mogących występować jako wartość atrybutu CLASS.
Gramatyka ta nie powinna być używana przez aplikacje klienckie wprost, jako że brak w niej zasad dotyczących
parsowania. Forma zapisu systemu produkcji została dostosowana w taki sposób, aby była możliwa do odczytania dla człowieka.
Wykorzystano też częściowo notację wykraczającą poza dokument [15]
* : 0 lub więcej
+ : 1 lub więcej
? : 0 lub 1
| : oddziela wartości, które mogą być stosowane zamiennie
[] : grupowanie
System produkcji:
stylesheet
: [CDO|CDC]* [ import [CDO|CDC]* ]* [ ruleset [CDO|CDC]* ]*
;
import
: IMPORT_SYM [STRING|URL] ';' /* np.: @import url(fun.css); */
;
unary_operator
: '-' | '+'
;
operator
: '/' | ',' | /* empty */
;
property
: IDENT
;
ruleset
: selector [ ',' selector ]*
'{' declaration [ ';' declaration ]* '}'
;
selector
: simple_selector+ [ pseudo_element | solitary_pseudo_element ]?
| solitary_pseudo_element
;
/* An "id" is an ID that is attached to an element type
** on its left, as in: P#p007
** A "solitary_id" is an ID that is not so attached,
** as in: #p007
** Analogously for classes and pseudo-classes.
*/
simple_selector
: element_name id? class? pseudo_class? /* np.: H1.subject */
| solitary_id class? pseudo_class? /* np.: #xyz33 */
| solitary_class pseudo_class? /* np.: .author */
| solitary_pseudo_class /* np.: :link */
;
element_name
: IDENT
;
pseudo_class /* jak: A:link */
: LINK_PSCLASS_AFTER_IDENT
| VISITED_PSCLASS_AFTER_IDENT
| ACTIVE_PSCLASS_AFTER_IDENT
;
solitary_pseudo_class /* jak: :link */
: LINK_PSCLASS
| VISITED_PSCLASS
| ACTIVE_PSCLASS
;
class /* jak: P.note */
: CLASS_AFTER_IDENT
;
solitary_class /* jak: .note */
: CLASS
;
pseudo_element /* jak: P:first-line */
: FIRST_LETTER_AFTER_IDENT
| FIRST_LINE_AFTER_IDENT
;
solitary_pseudo_element /* jak: :first-line */
: FIRST_LETTER
| FIRST_LINE
;
/* Po znaku # dla id i solitary_id powinna występować
** nazwa zgodna ze specyfikacją HTML;
** np.: "#x77" jest poprawna, ale "#77" nie.
*/
id
: HASH_AFTER_IDENT
;
solitary_id
: HASH
;
declaration
: property ':' expr prio?
| /* empty */ /* Zapobiega błędom składni... */
;
prio
: IMPORTANT_SYM /* !important */
;
expr
: term [ operator term ]*
;
term
: unary_operator?
[ NUMBER | STRING | PERCENTAGE | LENGTH | EMS | EXS
| IDENT | hexcolor | URL | RGB ]
;
/* Kolor musi być zapisany przy pomocy
** 3 lub 6 znaków alfanumerycznych (ze zbioru: [0-9a-fA-F])
** po znaku "#". Np.: "#000" jest poprawny,
** ale "#abcd" nie.
*/
hexcolor
: HASH | HASH_AFTER_IDENT
;
Poniżej znajduje się tokenizer napisany w notacji flex [16].
Zakłada się implementację 8 bitowej wersji flex. Tokenizer nie rozróżnia wielkich i małych liter
(komenda wiersza poleceń: -i).
unicode \\[0-9a-f]{1,4}
latin1 [!-y]
escape {unicode}|\\[ -~!-y]
stringchar {escape}|{latin1}|[ !#$%&(-~]
nmstrt [a-z]|{latin1}|{escape}
nmchar [-a-z0-9]|{latin1}|{escape}
ident {nmstrt}{nmchar}*
name {nmchar}+
d [0-9]
notnm [^-a-z0-9\\]|{latin1}
w [ \t\n]*
num {d}+|{d}*\.{d}+
string \"({stringchar}|\')*\"|\'({stringchar}|\")*\'
%x COMMENT
%s AFTER_IDENT
%%
"/*" {BEGIN(COMMENT);}
<COMMENT>"*/" {BEGIN(0);}
<COMMENT>\n {/* ignore */}
<COMMENT>. {/* ignore */}
@import {BEGIN(0); return IMPORT_SYM;}
"!"{w}important {BEGIN(0); return IMPORTANT_SYM;}
{ident} {BEGIN(AFTER_IDENT); return IDENT;}
{string} {BEGIN(0); return STRING;}
{num} {BEGIN(0); return NUMBER;}
{num}"%" {BEGIN(0); return PERCENTAGE;}
{num}pt/{notnm} {BEGIN(0); return LENGTH;}
{num}mm/{notnm} {BEGIN(0); return LENGTH;}
{num}cm/{notnm} {BEGIN(0); return LENGTH;}
{num}pc/{notnm} {BEGIN(0); return LENGTH;}
{num}in/{notnm} {BEGIN(0); return LENGTH;}
{num}px/{notnm} {BEGIN(0); return LENGTH;}
{num}em/{notnm} {BEGIN(0); return EMS;}
{num}ex/{notnm} {BEGIN(0); return EXS;}
<AFTER_IDENT>":"link {return LINK_PSCLASS_AFTER_IDENT;}
<AFTER_IDENT>":"visited {return VISITED_PSCLASS_AFTER_IDENT;}
<AFTER_IDENT>":"active {return ACTIVE_PSCLASS_AFTER_IDENT;}
<AFTER_IDENT>":"first-line {return FIRST_LINE_AFTER_IDENT;}
<AFTER_IDENT>":"first-letter {return FIRST_LETTER_AFTER_IDENT;}
<AFTER_IDENT>"#"{name} {return HASH_AFTER_IDENT;}
<AFTER_IDENT>"."{name} {return CLASS_AFTER_IDENT;}
":"link {BEGIN(AFTER_IDENT); return LINK_PSCLASS;}
":"visited {BEGIN(AFTER_IDENT); return VISITED_PSCLASS;}
":"active {BEGIN(AFTER_IDENT); return ACTIVE_PSCLASS;}
":"first-line {BEGIN(AFTER_IDENT); return FIRST_LINE;}
":"first-letter {BEGIN(AFTER_IDENT); return FIRST_LETTER;}
"#"{name} {BEGIN(AFTER_IDENT); return HASH;}
"."{name} {BEGIN(AFTER_IDENT); return CLASS;}
url\({w}{string}{w}\) |
url\({w}([^ \n\'\")]|\\\ |\\\'|\\\"|\\\))+{w}\) {BEGIN(0); return URL;}
rgb\({w}{num}%?{w}\,{w}{num}%?{w}\,{w}{num}%?{w}\) {BEGIN(0); return RGB;}
[-/+{};,#:] {BEGIN(0); return *yytext;}
[ \t]+ {BEGIN(0); /* ignore whitespace */}
\n {BEGIN(0); /* ignore whitespace */}
\<\!\-\- {BEGIN(0); return CDO;}
\-\-\> {BEGIN(0); return CDC;}
. {fprintf(stderr, "%d: Illegal character (%d)\n",
lineno, *yytext);}
Dodatek C - kodowanie
Ten dodatek ma charakter informatywny.
W dokumentach HTML można zapisać około 30 000 różnych znaków zdefiniowanych przez standard Unicode.
Wiele dokumentów wykorzystuje tylko kilkaset różnych znaków. Ponadto jest wiele czcionek, które
składają się tylko z kilkuset glifów. Dodatek ten w połączeniu z rozdziałem 5.2 definiuje sposób kodowania znaków oraz dopasowywania glifów w czcionkach.
Kodowanie znaków
Treść dokumentu HTML stanowi sekwencja znaków alfanumerycznych i znaczników. Aby można było taki dokument
przesyłać w sieci, musi on zostać zakodowany jako ciąg bajtów przy użyciu jednego z kilku algorytmów.
Aby móc taki dokument odczytać, trzeba go później odkodować. Na przykład w Europie Zachodniej
bajt 224 służy do kodowania znaku: a. W języku hebrajskim natomiast bajt ten częściej jest używany do
kodowania pierwszej litery alfabetu hebrajskiego, tzw. alefu (Aleph). W języku japońskim znaczenie danego bajtu
zazwyczaj zależy od bajtu, który występuje przed nim. W niektórych rodzajach kodowania jeden znak może być
zakodowany przy użyciu dwóch lub więcej bajtów.
Aplikacja kliencka rozpoznaje rodzaj kodowania dzięki parametrowi "charset" przesyłanemu
wraz z nagłówkiem strony. Typowe rodzaje kodowania to "ASCII" (dla języka angielskiego),
"ISO-8859-1" (dla Europy Zachodniej), "ISO-8859-8" (dla języka hebrajskiego) oraz
"Shift-JIS" (dla języka japońskiego).
Język HTML [2][4] zezwala na użycie około 30 000 różnych znaków (zdefiniowanych przez Unicode). Niewielka
ilość dokumentów tworzona jest przy użyciu takiej ilości znaków. Wybór właściwej strony kodowania
daje pewność, że tylko jeden bajt zostanie wykorzystany do zakodowania każdego znaku. Znaki spoza
określonego zestawu, które mogą pojawiać się sporadycznie w dokumencie można zapisywać w postaci
numerycznej: zapis 'Π ' zawsze spowoduje wyświetlenie wielkiej greckiej litery Pi. W związku z powyższym,
każda aplikacja kliencka powinna być przygotowana do obsługi wszystkich znaków Unicode, nawet jeżeli
ma do czynienia tylko z niektórymi stronami kodowymi.
Kodowanie czcionek
Czcionka sama w sobie nie zawiera znaków tylko obrazki reprezentujące znaki zwane glifami.
Glify, w formie szkiców lub map bitowych, stanowią o określonym wyglądzie danej czcionki.
Każda czcionka, jawnie lub niejawnie, posiada skojarzoną tablicę kodowania, która zawiera informacje,
który znak reprezentowany jest przez który glif. W czcionkach Typu 1, tablicę nazywa się wektorem kodowania.
W rzeczywistości wiele czcionek posiada kilka glifów reprezentujących ten sam znak. Użycie konkretnego
glifu uzależnione jest od zasad obowiązajuących w danym języku lub od osobistych preferencji programisty.
W alfabecie arabskim na przykład, każda litera posiada cztery różne kształty stosowane w zależności
od miejsca jej występowania (na początku, końcu lub w środku słowa albo samodzielnie). W każdym przypadku
jest to ta sama litera i w dokumencie HTML reprezentuje ją jeden znak, ale po wydrukowaniu wygląd jej
zmienia się w zależności od miejsca wystąpienia.
Istnieją także zestawy czcionek, które pozwalają projektatnowi na wybór jednego z wielu kształtów.
Niestety właściwość ta nie jest dostępna w CSS 1. W przypadku tego typu czcionek stosowany jest
kształt domyślny czcionki.
Zestawy czcionek
Aby uniknąć problemów związanych z brakiem określonych znaków w czcionce CSS 1 dopuszcza stosowanie
tzw. zestawów czcionek.
Zestaw czcionek w CSS1 to lista czcionek tego samego typu i rozmiaru, które testowane są pod kątem posiadania
określonego glifu dla danego znaku. Element zawierający tekst napisany w języku angielskim z dodatkiem symboli
matematycznych może wymagać użycia dwóch zestawów czcionek: jednego zawierającego litery i cyfry i jednego
zawierającego symbole matematyczne. Mechanizm wyboru odpowiednich zestawów czcionek dokładniej opisano w rozdziale 5.2.
Poniżej znajduje się przykład zestawu czcionek, który można by było użyć do wyświetlenia tekstu zawierającego
znaki alfabetu łacińskiego, symbole japońskie oraz symbole matematyczne:
BODY { font-family: Baskerville, Mincho, Symbol, serif }
Znaki alfabetu łacińskiego zostaną pobrane od czcionki Baskerville, symbole japońskie od czcionki Minchom,
symbole matematyczne od czcionki Symbol, a pozostałe znaki od którejkolwiek czcionki z rodziny 'serif'. Czcionki z
rodziny 'serif' zostaną także użyte w przypadku, gdy niedostępna jest jedna lub więcej z pozostałych czcionek.
Dodatek D - korekcja gamma
Ten dodatek ma charakter informatywny.
Jeżeli nie wiesz co to jest korekcja gamma, zapoznaj się ze specyfikacją PNG.
Wykonując odpowiednie obliczenia, aplikacja kliencka wyświetlająca dokumenty na monitorze CRT może dobrać idealne
CRT i zignorować wszelkie efekty gamma spowodowane efektem ditheringu. Oznacza to, że minimalne dostrojenie
jakie może być potrzebne dla poniższych platform jest następujące:
Komputer PC z zainstalowanym systemem MS-Windows
żadne
System Unix korzystający z systemu okienek X11
żadne
Komputer Mac korzystający z komponentu QuickDraw
zastosowanie korekcji gamma 1.39 (aplikacje korzystające z rozszerzenia ColorSync-savvy mogą po prostu przenieść
profil sRGB ICC [14] do ColorSync w celu zastosowania właściwej korekcji gamma.
Stacja SGI korzystająca z serwera X
zastosowanie wartości gamma z lokalizacji /etc/config/system.glGammaVal (wartość domyślna to 1.70.
Aplikacje pracujące pod Irix 6.2 lub wyższym mogą po prostu przenieść profil sRGB ICC do systemu
zarządzania kolorami)
Stacja robocza NeXT korzystająca z NeXTStep
zastosowanie gamma 2.22
"Zastosowanie gamma" oznacza, że każda składowa koloru R, G i B musi zostać przekonwertowana do postaci
R'=Rgamma, G'=Ggamma, B'=Bgamma przed przekazaniem do systemu operacyjnego.
Czynność ta może być wykonywana szybko przy zastosowaniu 256 elementowej tablicy do przeszukiwania za każdym razem, gdy
wywoływana jest przeglądarka:
for i := 0 to 255 do
raw := i / 255;
corr := pow (raw, gamma);
table[i] := trunc (0.5 + corr * 255.0)
end
co pozwala na uniknięcie wykonywania obliczeń na liczbach przestępnych dla każdego koloru
Dodatek E - Zastosowanie i rozszerzalność CSS 1
Ten dodatek ma charakter informatywny
Celem powstania mechanizmu CSS 1 było utworzenie prostego mechanizmu służącego do kontroli wyglądu
dokumentów HTML. Obacna wersja CSS jest kompromisem pomiędzy dążeniem do jak największej prostoty
i naciskiem ze strony twórców dokumentów HTML domagających się większej ilości efektów wizualnych.
Dzięki CSS 1 możliwe jest:
- Zastąpienie znaczników odpowiadających za efekty wizualne arkuszami stylów, np. znaczniki: "CENTER",
"FONT" oraz "SPACER" można bez trudu zastąpić odpowiednimi arkuszami stylów.
- Uproszczenie kodu HTML: Aby osiągnąć efekt kapitalików wystarczy zastosować jedną deklarację w arkuszu stylów,
zamiast stosowania znacznika "FONT". Porównajmy kod bez użycia arkusza stylów:
<H1>H<FONT SIZE=-1>EADLINE</FONT></H1>
i z użyciem arkusza stylów:
H1 { font-style: small-caps }
<H1>Headline</H1>
- Zastosowanie różnych poziomów integracji arkuszy stylów z HTML: reguły CSS mogą pochodzić z zewnętrznego
dokumentu, być wpisane bezpośrednio w dokument HTML lub być wpisywane jako wartości atrybutu 'STYLE'.
Ostatnia opcja daje możliwość łatwej transformacji dokumentów korzystających z rozszerzeń HTML na dokumenty
wykorzystujące CSS.
- Wykorzystanie nowych efektów: w CSS 1 dodano kilka nowych efektów wizualnych. Do tej grupy należą pseudo elementy
typograficzne i dodatkowe wartości dla atrybutu 'background'.
- Skalowalność: CSS 1 sprawdza się w każdym rodzaju urządzeń. Od terminali tekstowych po
kolorowe stacje robocze o wysokiej rozdzielczości. Tworząc arkusz stylów, autor ma prawie
pewność, że jego dokument będzie poprawnie prezentowany na wszystkich urządzeniach.
CSS 1 nie umożliwia:
- Kontroli z dokładnością do jednego piksela: w CSS 1 położono największy nacisk na prostotę, przez co
kontrola położenia elementów, mimo dużych możliwości, nie jest możliwa na poziomie jednego piksela.
- Kontroli autorskiej: autor dokumentu nie może wymusić użycia określonego arkusza stylów, a jedynie
zaproponować swoją wersję.
- Kontroli układu: w CSS 1 nie da się tworzyć układów stron opartych o wiele kolumn, z nachodzącymi na siebie ramkami itd.
- Użycia go jako bogatego języka zapytań w stosunku do drzewa strukturalnego: CSS1 umożliwia tylko odnalezienie
elementów przodków w strukturze dokumentu, inne języki (np. DSSSL [6])
arkuszy stylów natomiast są pełnymi językami zapytań.
Przewidywane kierunki rozwoju CSS:
- Druk: lepsze wsparcie dla dokumentów drukowanych.
- Obsługa urządzeń niewizualnych: trwają prace nad zestawem atrybutów do obsługi mowy i alfabetu Braille'a.
- Nazewnictwo kolorów: istniejący zestaw kolorów może zostać rozszerzony o nowe pozycje.
- Czcionki: oczekuje się, że pojawi się bardziej precyzyjny system kontroli własności czcionek.
- Wartości, atrybuty: oczekujemy propozycji twórców oprogramowania dotyczących rozszerzeń zestawu atrybutów
i wartości CSS 1. Mimo że podążanie w tym kierunku może wydawać się dość trywialnym podejściem, to mamy tutaj
na uwadze przenośność pomiędzy różnymi aplikacjami klienckimi.
- Język układu: obsługa dwuwymiarowych układów wg tradycji składu komputerowego.
- Inne deklaracje typu dokumentu: CSS 1 jest związany w pewnych aspektach z HTML (np. specjalny status
atrybutów 'CLASS' oraz 'ID'), ale powinien dać łatwo się rozszerzać na obsługę także innych deklaracji
typu dokumentu.
Nie przewidujemy rozwoju CSS w kierunku:
- Typowego języka programowania.
