CSS.

Leksykon
kieszonkowy
Autor: Eric A. Meyer
ISBN: 978-83-246-1090-7
Tytu oryginau: CSS Pocket Reference
Format: B6, stron: 120

Podrczne rdo informacji o najnowszych specyfikacjach

kaskadowych arkuszy stylw -- CSS2 i CSS2.1
Chcesz nauczy si docza arkusze stylw do witryn internetowych?
Chcesz dowiedzie si, jak nada styl rnym elementom stron internetowych?
Chcesz mie szybki dostp do opisu wszystkich selektorw i waciwoci stylw?

Pierwsz rzecz, jak widz osoby otwierajce strony internetowe, jest ich wygld.
Wiele witryn ma niespjny i nieelegancki styl, co odstrasza uytkownikw, a przecie
utworzenie atrakcyjnych stron jest cakiem proste -- wystarczy przygotowa odpowiedni
plik CSS. Za pomoc kaskadowych arkuszy stylw mona wygodnie zmienia sposb
wywietlania wszystkich elementw kodu HTML i sterowa wygldem caej witryny.
Technologia CSS jest obsugiwana przez wszystkie najwaniejsze przegldarki,
a ponadto nie wymaga przesyania duych iloci danych, dlatego jest doskonaym
narzdziem do szybkiego i efektywnego formatowania witryn internetowych.
Ksika CSS. Leksykon kieszonkowy to zwizy przewodnik po moliwociach
kaskadowych arkuszy stylw. Dowiesz si z niego, jak stosowa style w dokumentach
HTML i XHTML, poznasz zasady funkcjonowania stylw oraz reguy rzdzce
pozycjonowaniem elementw. Przede wszystkim jednak byskawicznie znajdziesz opis
wszystkich selektorw i waciwoci stylw CSS, co pomoe Ci sprawnie tworzy
przejrzyste i atrakcyjne witryny internetowe.

Wydawnictwo Helion
ul. Kociuszki 1c
44-100 Gliwice
tel. 032 230 98 63
e-mail: helion@helion.pl

Doczanie stylw do stron internetowych

Funkcjonowanie stylw
Zasady pozycjonowania elementw
Wartoci stosowane w stylach
Przegld selektorw, pseudoklas i pseudoelementw
Opis wszystkich waciwoci

Naucz si stosowa kaskadowe arkusze stylw

i twrz eleganckie witryny internetowe

Spis treci

Konwencje zastosowane w ksice ..........................................................5

Dodawanie stylw do dokumentw HTML oraz XHTML .........................6
Struktura regu ............................................................................................9
Pierwszestwo stylw .............................................................................10
Klasyfikacja elementw ........................................................................... 13
Sposoby wywietlania elementw .......................................................... 15
Podstawowy ukad wizualny ................................................................... 16
Reguy uoenia elementw pywajcych .............................................. 19
Reguy pozycjonowania ........................................................................... 21
Ukad tabel ............................................................................................... 29
Wartoci .....................................................................................................37
Selektory ................................................................................................... 43
Pseudoklasy i pseudoelementy ............................................................... 49
Spis waciwoci ....................................................................................... 56

Tabele ...................................................................................................... 132

Media stronicowane ...............................................................................136
Waciwoci usunite z CSS2.1 ...............................................................140
Style wizualne .........................................................................................140
Media stronicowane ...............................................................................143
Style dwikowe .....................................................................................145
Skorowidz ................................................................................................ 157

CSS. Leksykon kieszonkowy

Reguy pozycjonowania
Pozycjonowaniem elementw rzdzi kilka regu specjalnych. Okrelaj one nie tylko pooenie bloku-pojemnika, ale take pooenie
zawartych w nim elementw.

Rodzaje pozycjonowania
Pozycjonowanie statyczne
Pudeko elementu tworzone jak zwykle. Elementy blokowe generuj prostoktne pudeko stanowice cz ukadu
dokumentu. Elementy wierszowe tworz jedno lub wicej
pudeek obejmujcych linie, stanowicych cz ukadu
elementu rodzica.
Pozycjonowanie wzgldne
Pudeko elementu zostaje przesunite o okrelon odlego.
Zawierajcy je blok uznawany jest za obszar, ktry zajmowaby element, gdyby nie by pozycjonowany. Element
zachowuje swj ksztat. Zachowywany jest take obszar, ktry
element normalnie zajmowaby w dokumencie.
Pozycjonowanie bezwzgldne
Pudeko elementu jest cakowicie usuwane z ukadu dokumentu i pozycjonowane w odniesieniu do bloku-pojemnika,
ktrym moe by inny element dokumentu lub pierwotny
blok-pojemnik (opisany w kolejnym podrozdziale). Obszar,
ktry element zajmowaby w normalnym ukadzie dokumentu, nie jest ju rezerwowany, tak jakby element ju nie
istnia. Pozycjonowany element generuje wasne pudeko
blokowe, bez wzgldu na rodzaj pudeka, jaki generowaby
w normalnym ukadzie.

Reguy pozycjonowania

21

Pozycjonowanie ustalone
Pudeko elementu zachowuje si tak jak w przypadku pozycjonowania bezwzgldnego, ale z blokiem-pojemnikiem jako
punktem odniesienia.

Blok-pojemnik
Blok pojemnik dla pozycjonowanego elementu wyznaczany jest
w myl nastpujcych regu:
1. Blok-pojemnik dla elementu rdowego (nazywany take
pierwotnym blokiem-pojemnikiem) wskazywany jest przez przegldark. W HTML-u elementem rdowym jest html, chocia niektre przegldarki korzystaj z elementu body.
2. Dla elementw nierdowych, ktrych warto atrybutu
position to relative lub static, blok-pojemnik jest wyznaczany przez krawd zawartoci najbliszego pudeka
nadrzdnego elementu blokowego, tabeli, komrki tabeli
lub bloku wierszowego. Mimo tej reguy elementy pozycjonowane wzgldnie bd przesunite, a nie rozmieszczone
w odniesieniu do bloku pojemnika.
3. Dla elementw nierdowych, ktrych warto waciwoci
position to absolute, blokiem-pojemnikiem jest najbliszy
element nadrzdny (dowolnego rodzaju), majcy warto
waciwoci position inn ni static. Wyznaczanie przebiega w nastpujcy sposb:
a. Jeeli element nadrzdny jest elementem blokowym, blokiem pojemnikiem jest krawd dopenienia tego elementu;
innymi sowy, jest to obszar wyznaczony przez obramowanie.

22

CSS. Leksykon kieszonkowy

b. Jeeli element nadrzdny to element wierszowy, blokiem-pojemnikiem jest krawd zawartoci bloku nadrzdnego.
W jzykach zapisywanych od lewej do prawej grna i lewa
krawd bloku-pojemnika s krawdziami grn i lew
pierwszego pudeka w obiekcie nadrzdnym, a dolna i prawa krawd s krawdziami doln i grn zawartoci
ostatniego pudeka. W jzykach zapisywanych od prawej
do lewej, prawa krawd bloku-pojemnika odpowiada
prawej krawdzi zawartoci pierwszego pudeka, a lewa
jest krawdzi ostatniego pudeka. Krawdzie grna i dolna
wyznaczane s tak jak poprzednio.
c. Jeeli nie ma elementw nadrzdnych, tak jak opisano to
w punktach a i b, blok-pojemnik elementu wyznaczany jest
przez pocztkowy blok-pojemnik.

Ukad elementw
pozycjonowanych bezwzgldnie
W poniszych podrozdziaach pojawiaj si nastpujce pojcia:
Dopasowanie przez zmniejszenie
Zblione do obliczania szerokoci komrki tabeli za pomoc
algorytmu automatycznego tworzenia ukadu tabeli. Oglnie
rzecz biorc, przegldarka prbuje wyznaczy minimaln
szeroko elementu, ktra bdzie w stanie pomieci zawarto. Zawijanie do kolejnych wierszy bdzie przeprowadzone
tylko w sytuacji, gdy bdzie nie do uniknicia.
Pozycja ustalona
Miejsce, w ktrym znalazaby si krawd elementu, gdyby
wartoci jego waciwoci position byo static.

Reguy pozycjonowania

23

Ukad poziomowy elementw niezastpowanych

pozycjonowanych bezwzgldnie
Rwnanie opisujce ukad tego rodzaju elementw na posta:
left + margin-left + border-left-width +
padding-left + width + padding-right +
border-right-width + margin-right + right =
szeroko (width) bloku-pojemnika

Kolejne kroki ustalania rozmieszczenia s nastpujce:

1. Jeeli wszystkie waciwoci left, width oraz right maj
wartoci auto, wartoci auto dla margin-left oraz margin-right resetowane s do 0. Nastpnie, jeeli kierunek zapisywania tekstu jest od lewej do prawej, waciwo left
przyjmuje warto pozycji ustalonej i stosowana jest trzecia
regua opisana w punkcie 3. W innym przypadku waciwo
right przyjmuje warto pozycji ustalonej i stosowana jest
pierwsza regua opisana w punkcie 3.
2. Jeeli adna spord waciwoci left, width oraz right
nie ma wartoci auto, wybierana jest odpowiednia regua
z poniszej listy:
a. Jeeli zarwno margin-left, jak i margin-right maj
warto auto, rwnanie rozwizywane jest z zaoeniem,
i oba marginesy bd miay rwne wartoci.
b. Jeeli tylko margin-left lub margin-right ma warto
auto, rwnanie jest rozwizywane dla tej wartoci.
c. Jeeli wartoci s nadmiernie ograniczone (czyli adna
z nich nie ma wartoci auto), warto left jest ignorowana
(jeeli kierunek tekstu jest od prawej do lewej) lub warto
right jest ignorowana (jeeli kierunek tekstu jest od lewej
do prawej). Rwnanie rozwizywane jest dla tej wartoci.

24

CSS. Leksykon kieszonkowy

3. Jeeli niektre z wielkoci left, width oraz right maj

warto auto, ale inne nie, wartoci auto dla margin-left
i magrin-right s resetowane do 0, wybierana jest odpowiednia regua z poniszej listy:
a. Jeeli left ma warto auto, ale right ju nie, warto szerokoci (width) dopasowywana jest przez zmniejszenie.
Rwnanie rozwizywane jest dla wartoci left.
b. Jeeli left i right maj wartoci auto, ale width nie, to dla
kierunku tekstu od lewej do prawej left przyjmuje pozycj
ustalon (dla kierunku tekstu od prawej do lewej jest
left (dla kierunku tekstu od prawej do lewej) lub right
right). Rwnanie jest rozwizywane odpowiednio dla (dla
kierunku tekstu od lewej do prawej).
c. Jeeli width oraz right maj wartoci auto, ale left nie,
szeroko (width) jest dopasowywana przez zmniejszanie.
Rwnanie rozwizywane jest dla wartoci right.
d. Jeeli left ma warto auto, ale width oraz right nie,
rwnanie rozwizywane jest dla wartoci left.
e. Jeeli width ma warto auto, ale left oraz right nie,
rwnanie rozwizywane jest dla wartoci width.
f. Jeeli right ma wartoci auto, ale left oraz width nie,
rwnanie jest rozwizywane dla wartoci right.

Ukad pionowy elementw niezastpowanych

pozycjonowanych bezwzgldnie
Rwnanie opisujce ukad tego rodzaju elementw ma posta:
top + margin-top + border-top-width +
padding-top + height + padding-bottom +
border-bottom-width + margin-bottom + bottom =
wysoko (height) bloku-pojemnika

Reguy pozycjonowania

25

Kolejne kroki ustalania rozmieszczenia s nastpujce:

1. Jeeli wszystkie top, height oraz bottom maj warto auto,
top przyjmuje pozycj ustalon i stosowana jest trzecia regua
opisana w punkcie 3.
2. Jeeli adna spord wielkoci top, height oraz bottom nie
ma wartoci auto, wybierana jest odpowiednia regua spord poniszych:
a. Jeeli zarwno margin-top, jak i margin-bottom maj
wartoci auto, rwnanie rozwizywane jest z ograniczeniem, i wielkoci marginesw bd rwne.
b. Jeeli tylko margin-top lub magrin-bottom ma warto
auto, rwnanie rozwizywane jest dla tej wartoci.
c. Jeeli wartoci s nadmiernie ograniczone (adna z nich nie
ma wartoci auto), warto bottom jest ignorowana, a rwnanie rozwizywane jest dla tej wartoci.
3. Jeeli niektre spord top, height oraz bottom maj warto
auto, ale inne nie, wybierana jest odpowiednia regua z poniszej listy:
a. Jeeli top oraz height maj warto auto, ale bottom nie,
wysoko (height) obliczona jest na podstawie zawartoci
elementu (tak jak w ukadzie ustalonym). Wszystkie wartoci auto dla margin-top oraz margin-bottom resetowane s
do 0, a rwnanie rozwizywane jest dla top.
b. Jeeli top oraz bottom maj wartoci auto, ale hight nie,
top przyjmuje ustalone pooenie. Wszystkie wartoci auto
dla margin-top oraz margin-bottom resetowane s do 0,
a rwnanie rozwizywane dla bottom.
c. Jeeli height oraz bottom maj wartoci auto, ale top nie,
wysoko (height) obliczona jest na podstawie zawartoci
elementu (tak jak w ukadzie ustalonym). Wszystkie warto26

CSS. Leksykon kieszonkowy

ci auto dla margin-top oraz margin-bottom resetowane s

do 0, a rwnanie rozwizywane dla bottom.
d. Jeeli top ma warto auto, ale height oraz bottom nie,
wszystkie wartoci auto dla margin-top oraz margin-bottom resetowane s do 0, a rwnanie rozwizywane
dla top.
e. Jeeli height ma warto auto, ale top oraz bottom nie,
wszystkie wartoci auto dla margin-top oraz margin-bottom resetowane s do 0, a rwnanie rozwizywane
dla height.
f. Jeeli bottom ma warto auto, ale top i height nie,
wszystkie wartoci auto dla margin-top oraz margin-bottom resetowane s do 0, a rwnanie rozwizywane
dla height.

Ukad poziomy elementw zastpowanych

pozycjonowanych bezwzgldnie
Zasady majce zastosowanie przy okrelaniu pooenia i wielkoci
elementw zastpowanych najatwiej wyrazi w postaci wykonywanych kolejno regu:
1. Jeeli width ma warto auto, obliczona warto width okrelana jest przez wewntrzn szeroko zawartoci elementu.
Tak wic szeroko obliczona na podstawie obrazu szerokiego na 50 pikseli to 50px. Jeeli szeroko jest wyranie zadeklarowana (np. jako 100px lub 50%), width przyjmuje tak
warto.
2. Jeeli left ma warto auto w jzyku zapisywanym od
lewej do prawej, auto zastpowane jest pooeniem ustalonym.
W przypadku jzykw zapisywanych od prawej do lewej warto auto dla right zastpowana jest pooeniem ustalonym.

Reguy pozycjonowania

27

3. Jeeli left lub right ma cigle warto auto (czyli nie zostaa
zastpiona w poprzednim punkcie), wszystkie wartoci auto
dla margin-left oraz margin-right zastpowane s wartoci 0.
4. Jeeli wartoci margin-left i margin-right to cigle auto,
przyjmuj rwne wartoci, a wic element zostaje wyrodkowany w bloku-pojemniku.
5. Jeeli po wprowadzeniu powyszych regu pozostaje tylko
jedna warto auto, jest tak zmieniana, aby bya rwna pozostaej czci rwnania.

Pionowy ukad elementw zastpowanych

pozycjonowanych bezwzgldnie
Zasady majce zastosowanie przy okrelaniu pooenia i wielkoci
elementw zastpowanych najatwiej wyrazi w postaci wykonywanych kolejno regu:
1. Jeeli height ma warto auto, obliczona warto height
okrelana jest przez wewntrzn wysoko zawartoci elementu. Tak wic wysoko obliczona na podstawie obrazu
wysokiego na 50 pikseli to 50px. Jeeli wysoko jest wyranie zadeklarowana (np. jako 100px lub 50%), height przyjmuje tak warto.
2. Jeeli top ma warto auto, zastpowane jest pooeniem
ustalonym elementu.
3. Jeeli bottom ma warto auto, wszystkie wartoci auto dla
margin-top i margin-bottom zastpowane s wartoci 0.
4. Jeeli wartoci margin-top i margin-bottom to cigle auto,
przyjmuj rwne wartoci, a wic element zostaje wyrodkowany w bloku-pojemniku.

28

CSS. Leksykon kieszonkowy

5. Jeeli po wprowadzeniu powyszych regu pozostaje tylko

jedna warto auto, jest tak zmieniana, aby bya rwna pozostaej czci rwnania.

Ukad tabel
Ukad tabel moe by do skomplikowany, w szczeglnoci kiedy
wemie si pod uwag fakt, i CSS definiuje dwa rne sposoby
obliczania szerokoci tabeli i jej komrek oraz dwa rne sposoby
obsugi krawdzi tabeli i elementw wewntrz niej. Rysunek 4.
przedstawia komponenty tabeli.

Rysunek 4. Komponenty ukadu tabeli

Ukad tabel

29