BAZA WIEDZY
KURSY
Bazy danych w PHP
Kurs AdvancedAJAX
Kurs ASP
Kurs ASP.NET
Kurs C++
Kurs CSS
Kurs HTML
Kurs HTML drugi
Kurs JavaScript
Kurs MySQL
Kurs PHP
Kurs RSS
Kurs XHTML
Obiekty DOM
MANUALE
CSS1 - W3C
DOM - w budowie
PHP 2005
PHP 2006
Wyrażenia regularne
SHOUTBOX
STAT
Online: 28 | UU: 785

Niniejszy dokument jest tłumaczeniem rekomendacji W3C Cascading Style Sheets, level 1. Tłumaczenie to nie ma statusu dokumentu normatywnego i może zawierać błędy wynikające z tłumaczenia. Tylko dokument znajdujący się na stronie W3C pod adresem http://www.w3.org/TR/REC-CSS1 ma charakter normatywny.

Copyright C 2004 W3CR (MIT, ERCIM, Keio), Wszystkie prawa zastrzeżone. W3C stosuje następujące zasady dotyczące odpowiedzialności cywilnej, trademark, używania dokumentu i licencji oprogramowania.

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.

Lista obecnych rekomendacji W3C oraz innych dokumentów technicznych znajduje się pod adresem http://www.w3.org/TR/.

Niniejszy dokument jest poprawioną wersją dokumentu z dnia 17 grudnia 1996 roku. Zmiany jakich dokonano w stosunku do wersji poprzedniej opisano w Dodatku F. Lista znanych błędów w niniejszej specyfikacji znajduje się pod adresem http://www.w3.org/Style/CSS/Errata/REC-CSS1-19990111-errata.

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. Więcej informacji na temat tych prac można znaleźć na stronie http://www.w3.org/Style/.

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

Atrybut HTML.

Autor

Twórca dokumentu HTML.

Element blokowy

Element, po i przed którym następuje złamanie linii (np. 'H1' w HTML).

Obszar roboczy

Ta część klienta, na której wyświetlana jest treść dokumentów.

Element dziecka

Podelement w terminologii [5] SGML.

Selektor kontekstualny

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'.

CSS

Kaskadowe Arkusze Stylów (ang. Cascading Style Sheets).

CSS1

Kaskadowe Arkusze Stylów, poziom 1. Dokument ten opisuje CSS1 - prosty mechanizm stylów stworzony na potrzeby sieci Web.

CSS1 - własności zaawansowane

Własności CSS opisane w tym dokumencie, ale nie należące do podstawowych cech tego języka.

CSS1 - własności podstawowe (CSS1 core features)

Ta część specyfikacji, do zgodności z którą powinny dążyć wszystkie przeglądarki obsługujące CSS.

Parser CSS1

Aplikacja kliencka potrafiąca interpretować CSS1.

Deklaracja

Własność (np. 'font-size') i odpowiadająca jej wartość (np. '12pt').

Projektant

Twórca arkusza stylów.

Dokument

Dokument HTML.

Element

Element HTML.

Typ elementu

Identyfikator rodzajowy w terminologii SGML [5].

Fikcyjna sekwencja znaczników

Narzędzie pozwalające śledzić zachowanie pseudo klas i pseudo elementów.

Rozmiar czcionki

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.

HTML

Hypertext Markup Language [2](Język Znakowania Hipertekstowego) - aplikacja języka SGML.

Rozszerzenia HTML

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 śródliniowy

Element, po i przed którym nie następuje złamanie linii (np. 'STRONG' w HTML).

Wymiary własne

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 rodzic

Element, który może zawierać inne elementy w terminologii SGML [5].

Pseudo element

W selektorach CSS, pseudo elementy używane są do odnoszenia się do elementów typograficznych (np. pierwsza linia tekstu w elemencie).

Pseudo klasa

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.

Atrybut CSS

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.

Odbiorca

Osoba, która jest adresatem dokumentu (także użytkownik).

Element osadzony

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.

Reguła

Deklaracja (np. 'font-family: helvetica') z selektorem (np. 'H1').

Selektor

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.

SGML

Standard Generalized Markup Language [5] (Standardowy Uniwersalny Język Znakowania). HTML jest aplikacją tego języka.

Selektor prosty

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.

Arkusz stylów

Zbiór reguł

UA

Aplikacja kliencka (klient), najczęściej jest to przeglądarka internetowa (ang. User Agent).

Użytkownik

To samo co odbiorca.

Ważność

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:

  1. 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.
  2. Posortuj deklaracje wg poziomu ich ważności: deklaracje oznaczone jako '!important' mają podwyższony priorytet w stosunku do zwykłych deklaracji (nieoznaczonych).
  3. 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.
  4. 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.

  5. 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.

4.1.1     Formatowanie pionowe

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.

4.1.2     Formatowanie poziome

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):

  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.
  2. 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.
  3. 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.
  4. Wierzch pływającego bloku nie może znajdować się wyżej niż wierzch jego elementu rodzica.
  5. 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.
  6. 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.
  7. Element pływający musi znajdować się jak najwyżej.
  8. 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).

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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:

  1. 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.
  2. 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.
  3. Jako trzeci testowany jest atrybut 'font-weight'. Atrybut ten zawsze wywołuje pożądany efekt.
  4. 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) }

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 [2].
  • 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 '&#928; ' 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 [12].

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.
CSS1 - W3C

[schowaj]
| | | |
Copyright © 2006-2013 egrafik.pl | Kontakt | Reklama | Projekty domów
jocker