Id do

Spis treci
Przykadowy rozdzia
Skorowidz
Katalog ksiek
Katalog online
Zamw drukowany
katalog
Twj koszyk
Dodaj do koszyka
Cennik i informacje
Zamw informacje
o nowociach
Zamw cennik
Czytelnia
Fragmenty ksiek
online

Kontakt
Helion SA
ul. Kociuszki 1c
44-100 Gliwice
tel. 32 230 98 63
e-mail: helion@helion.pl
Helion 19912011

Ten fantastyczny CSS! Eric Meyer

o tworzeniu nowoczesnych
ukadw stron WWW
Autor: Eric A. Meyer
Tumaczenie: ukasz Piwko
ISBN: 978-83-246-3242-8
Tytu oryginau: Smashing CSS: Professional
Techniques for Modern Layout
Format: 168237, stron: 280
Wykorzystaj potencja technologii CSS 3 i HTML 5
pod okiem najsynniejszego eksperta w tej dziedzinie!
Czym byby dzisiaj Internet, gdyby nie fantastyczne moliwoci CSS? Przestrzeni pen nudnych,
podobnych do siebie i zapewne rednio atrakcyjnych dla wspczesnych uytkownikw stron
WWW Cho jeszcze dziesi lat temu technologii tej wrono odejcie do lamusa, dzi swoj
popularnoci dorwnaa jzykowi HTML i staa si ju niemal tak samo powszechna. Kaskadowe
arkusze stylw spotkamy wszdzie, od przegldarek internetowych, przez zaawansowane sklepy
internetowe, po aplikacje do czatowania. Na tym nie koniec! CSS nadal rozkwita jego ogromne
moliwoci oraz zakres uycia coraz bardziej si rozszerzaj! A w brany twrcw stron
internetowych niewiele jest osb, ktre potrafi tak dobrze objani wszystkie aspekty
korzystania z jzyka CSS, jak synny Eric Meyer autor tej fantastycznej ksiki!
To wanie z nim wyruszysz w podr do najeonego nowociami i zmianami wiata najwieszych
specyfikacji HTML 5 i CSS 3. To dla Ciebie stworzy ten nowoczesny przewodnik z setk porad,
skutecznych metod i praktycznych sztuczek w zakresie tworzenia najwyszej jakoci witryn
internetowych przy uyciu CSS. W pierwszej czci znajdziesz krtki przegld przydatnych narzdzi
i podstawowych technik, wliczajc w to mao znane selektory CSS. Nastpnie zobaczysz, co mona
zrobi przy uyciu CSS poznasz ciekawe efekty oraz rne sposoby osigania tego samego celu
i tworzenia wydajnych ukadw. Dowiesz si, jak CSS 3 wspdziaa z bibliotek JQuery.
W ostatniej czci znajdziesz opis technik zaawansowanych. Co wane, kady opis jest niezaleny
od pozostaych, moesz wic otworzy ksik na dowolnej stronie i wykorzysta w swojej pracy
to, co si na niej znajduje bez obaw, e stracie co wanego.
W tej niezwykej ksice znajdziesz midzy innymi:
opis wicej ni pitnastu technik rozmieszczania elementw na stronie (clearfix, ukady
dwu- i trzykolumnowe, ukady z faszywymi kolumnami, One True Layout, Holy Grail,
ukady oparte na jednostce em, pynne siatki, kleiste stopki)
sposoby ukrywania elementw i wyrzucania ich poza ekran
metody definiowania ta elementw body i html w jzyku XHTML
opis wielu efektw CSS (wyskakujce okienka CSS, tworzenie nieregularnych ksztatw
na stronie, zaokrglanie rogw, sprajty CSS, Sliding Doors, Liquid Bleach)
techniki formatowania tabel za pomoc CSS, w tym elementw thead, tbody, tfoot
i nagwkw wierszy
sposoby formatowania wybranych kolumn, stylizowania tabel przy uyciu JQuery,
zmieniania tabel w wykresy i mapy
przegld niektrych nowoci w jzyku CSS 3 (definiowanie wielu obrazw w tle elementw,
model kolorw RGBA)
Opanuj najlepsze techniki tworzenia nowoczesnych ukadw stron WWW!

Spis treci
CZ I

PODSTAWY

15

Rozdzia 1

Narzdzia
Firebug
Pasek narzdzi Web Developer
Pasek narzdzi Internet Explorer Developer Toolbar
Dodatek Dragonfly dla Opery
Dodatek WebInspector do przegldarki Safari
XRAY
Narzdzie Selectoracle
Diagnostyczny arkusz stylw
Zerowanie stylw
Skrypt IE9.JS

17
18
24
29
33
35
37
38
40
42
45

Rozdzia 2

Selektory
Pseudoco tam
Precyzyjne ldowanie
Precyzja selektorw
Regua wanoci
Co si dzieje, gdy zostanie pominita jaka warto
w zapisie skrconym?
Wybircze przesanianie wasnoci wzapisie skrconym
Selektor uniwersalny
Identyfikatory a klasy
czenie identyfikatorw z klasami
Przypisywanie jednego elementu dowielu klas
Selektory atrybutw
Selektor atrybutu class
Identyfikatory a selektory atrybutw
Selektor podacuchw wartociatrybutw
Selektor podacuchw wartociatrybutw cig dalszy
Selektory dzieci
Czciowa imitacja selektora elementw dzieci
Selektory elementw siostrzanych
Generowanie treci

47
48
50
51
52
53
55
57
58
61
61
62
64
65
66
68
70
72
73
75

SPIS TRECI
CZ II

NIEZBDNIK

79

Rozdzia 3

Porady
Sprawdzaj poprawno kodu!
Kolejno wasnoci pisma
Wysoko linii
Bezjednostkowe wartoci wasnociline-height
Okrelaj styl obramowania
Ustawianie koloru obramowania
Wyczanie wywietlania elementw
Wyczanie widocznoci elementu
Wyrzucanie elementw poza ekran
Obrazy zamiast tekstu
Style dla druku
Pisanie arkuszy stylw dla druku
cza blokowe
Margines czy dopenienie?
Wycinanie list
Definiowanie punktorw list
Punktory w tle
Generowanie markerw
Masz do dyspozycji wicej kontenerw, ni mylisz
Ta dokumentu
Arkusze serwerowe

81
82
83
83
84
86
86
88
89
90
92
94
95
96
97
99
100
102
105
107
110
111

Rozdzia 4

Ukady
Stosowanie obrysu zamiast obramowania
Ustawianie blokw na rodku
Kontenery elementw pywajcych przepenienie
Pywajce kontenery elementwpywajcych
Clearfix
Kliring elementw przylegajcych
Prosty ukad dwukolumnowy
Prosty ukad trzykolumnowy
Faszywe kolumny
Technika Liquid Bleach
One True Layout
wity Graal
Pynne siatki
Ukad oparty na jednostkach em
Ujemne marginesy w ukadzie normalnym
Pozycjonowanie w kontekcie
Wyjcie poza kontener
Pozycjonowanie na sztywno nagwkw i stopek

115
116
118
121
123
125
126
128
129
132
135
138
142
146
150
154
156
158
161

10

SPIS TRECI
Rozdzia 5

Efekty
Complexspiral
Menu podrczne w CSS
Menu CSS
Nieregularne ksztaty
Zaokrglanie rogw przed nastaniem CSS 3
Zaokrglanie rogw przy uyciu CSS 3
Sprajty CSS
Sliding Doors
Przesuwane drzwi z przycinaniem
Paralaksa CSS
Nieregularne ksztaty pywajce
Lepsze nieregularne ksztaty pywajce
Pola obrazw
Ograniczanie rozmiaru obrazw

CZ III NAJNOWSZE TECHNIKI

Rozdzia 6

Rozdzia 7

Skorowidz

165
166
170
172
174
177
181
183
185
189
191
193
197
201
202

205

Tabele
Nagwek, tre gwna i stopka tabeli
Nagwki wierszy
Formatowanie wedug kolumn
Tworzenie map z danych tabelarycznych
Wykresy z tabel

207
208
211
213
217
224

Pie przyszoci
Formatowanie elementw HTML 5
Imitacja elementw HTML 5 za pomoc nazw klas
Zapytania o media
Formatowanie wybranych elementw-dzieci
Formatowanie wybranych kolumn
Kolory RGB z kanaem alfa
Kolory HSL i HSL z kanaem alfa
Cienie
Definiowanie wielu obrazw w tle elementw
Przeksztacenia dwuwymiarowe

233
234
236
237
242
246
249
250
252
254
258
269

11

3
ROZDZIA

TEN FANTASTYCZNY CSS!

PORADY

KADEMU CZASEM W YCIU przydaj si

dobre rady. Do moich ulubionych nale
lepszy may dom na uboczu w miej okolicy
ni wielki dom w niebezpiecznym miejscu
inie jedz oowiu. To samo dotyczy take CSS
krtka sentencja zawarta w kilku sowach
moe szybko naprowadzi Ci na waciwy tor.

Z tego rozdziau dowiesz si, jakie znaczenie

ma ustawienie odpowiedniej kolejnoci
wartoci, jak poprawnie stosowa wartoci
bezjednostkowe, jak sprawi, aby elementy
znikay, nauczysz si kontrolowa wygld
obramowania elementw, sztuczek zwizanych
z formatowaniem list, tworzy arkusze stylw
przeznaczone dla druku i wiele wicej.

CZ II: NIEZBDNIK

SPRAWDZAJ POPRAWNO KODU!

Moe to adna nowo dla Ciebie. Moe zastanawiasz si, dlaczego marnuj cenny atrament
i inne wartociowe surowce na opis tak oczywistych kwestii. Jak czsto w takim razie
sprawdzasz poprawno kodu swoich stron? Raz na zakoczenie pracy nad projektem,
czywielokrotnie w cigu caego procesu?
Nie twierdz, e trzeba sprawdza stron po kadym zapisaniu najdrobniejszych zmian,
ale warto wyrobi sobie nawyk robienia tego w regularnych odstpach czasu. Dziki temu
mona wykry usterki w zarodku, zanim zdeformuj ca struktur strony.
Istnieje kilka dobrych narzdzi do sprawdzania kodu HTML i CSS. Jeli chodzi o HTML,
to najpopularniejszym narzdziem jest program udostpniany przez organizacj W3C pod
adresem validator.w3.org (rysunek 3.1). Rwnie popularny jest jego odpowiednik dla CSS
zamieszczony pod adresem jigsaw.w3.org/css-validator.

82

Rysunek 3.1. Walidator HTML W3C

Co zrobi, jeli jestemy uwizieni za zapor sieciow albo pracujemy na laptopie
zzainstalowanym lokalnym serwerem? Wwczas naley skorzysta z funkcji sprawdzania
kodu dodatku Firebug i innych tego typu narzdzi. Jeli masz dostp do internetu, masz
te moliwo sprawdzenia kodu swoich stron, bez wzgldu na to, czy s one publicznie
dostpne, czy nie (bardzo czsto korzystam z moliwoci sprawdzania kodu lokalnie tylko
po to, by nie wyj z wprawy w korzystaniu z tego narzdzia).

ROZDZIA 3: PORADY

KOLEJNO WASNOCI PISMA

Kolejno fontw w deklaracjach CSS to jedna z tych rzeczy, o ktre potyka si wiele osb,
nie wiedzc nawet, co je przewrcio.
Wikszo wasnoci CSS przyjmuje wiele sw kluczowych, ktre mona ustawia w dowolnej
kolejnoci, i na dodatek nie ma wymogu, aby stosowa wszystkie z nich (wemy np. wasno
background, ktra przyjmuje od jednej do piciu wartoci nie ma znaczenia, w jakiej
kolejnoci zostan one ustawione). Jednym z niewielu wyjtkw w tej dziedzinie jest wasno
font, ktra ma okrelony minimalny zestaw wymaganych sw kluczowych i musz one by
ustawione w odpowiedniej kolejnoci.
Oto najprostsza moliwa deklaracja wasnoci font:
font: <font-size> <font-family>;

Oczywicie nawiasy trzeba zastpi konkretnymi wartociami, np.:

font: 100% sans-serif;

Chodzi o to, e obie te wartoci musz by podane w takiej, a nie innej kolejnoci najpierw
rozmiar, potem rodzina. Jeli zmienisz ich kolejno albo pominiesz ktr z nich, kada
nowoczesna przegldarka z mety tak deklaracj zignoruje.
Ponadto, jeli chcesz uy jeszcze innych sw kluczowych w deklaracji, musisz je (oprcz
jednego, ktre jest tematem nastpnego podrozdziau) wpisa przed tymi, ktre s wymagane:
font: bold italic 100% sans-serif;
font: italic small-caps 125% Georgia, serif;
font: italic bold small-caps 200% Helvetica, Arial, sans-serif;

Zwr uwag, e wartoci przed rozmiarem mog wystpowa w dowolnej kolejnoci

inie ma to adnego znaczenia. Wane jest tylko to, aby znajdoway si przed okreleniem
rozmiaru. Jeli wpiszemy je w innym miejscu, to przegldarki bd ignorowa nasz
deklaracj.

WYSOKO LINII
Jeli opisane wczeniej zasady dotyczce stosowania wasnoci font wydaway Ci si dziwne,
to to, co zobaczysz teraz, jest czystym wariactwem.
Wczeniej napisaem, e minimalna warto wasnoci font skada si z dwch wartoci
wcile okrelonej kolejnoci rozmiar i rodzina. To prawda, ale okazuje si, e do wartoci
rozmiaru mona doczepi warto wysokoci linii (wasnoci line-height rysunek 3.2):
font: 100%/2.5 Helvetica, sans-serif;

Wartoci wasnoci font-size i line-height nie s oddzielone spacj, lecz ukonikiem

(cociekawe, jest to jedyny przypadek uycia ukonika w caej technologii CSS).

83

CZ II: NIEZBDNIK

84

Rysunek 3.2. Zwikszona wysoko linii

Dodanie wartoci wasnoci line-height do deklaracji wasnoci font jest nieobowizkowe,
ale jeli ju to zrobimy, to miejsce jej wstawienia nie jest dowolne. Warto t trzeba wstawi
zaraz za wartoci rozmiaru pisma i rozdzieli je ukonikiem.

BEZJEDNOSTKOWE WARTOCI
WASNOCILINE-HEIGHT
Wasnoci line-height mona przypisywa wartoci bez jednostki. Nie jest zabronione
rwnie stosowanie jednostek, ale oglnie rzecz biorc, jest to niezalecane.
Jaka jest rnica? Jeli zdefiniujemy warto z jednostk, np. 1em lub 100%, zostanie ona
poobliczeniu przekazana elementom potomnym. Zamy np., e zastosowalimy
poniszy arkusz CSS do dokumentu zawierajcego nastpujcy urywek kodu HTML:
ul {font-size: 15px; line-height: 1em;}
li {font-size: 10px;}
small {font-size: 80%;}
<ul>
<li>Jestem list z <small>maym tekstem</small>.</li>
</ul>

ROZDZIA 3: PORADY
Po obliczeniu wasno line-height elementu ul bdzie miaa warto 15px, poniewa
wartoci wasnoci line-height wyraone za pomoc jednostek em (i procentw) s obliczane
na podstawie obliczonej wartoci wasnoci font-size elementu. Warto wasnoci font-size
zadeklarowaem bezporednio, wic wiemy, e jest wyraona w pikselach.
Teraz najciekawsze do elementw potomnych zostanie przekazana obliczona warto
15px. Innymi sowy, elementy li i small odziedzicz warto 15px. Koniec. Nie zmieni
jej, gdy zmieni si ich wasny rozmiar pisma. Po prostu bior te 15px i uywaj ich, co jest
rwnoznaczne z sytuacj, w ktrej bymy napisali:
ul {font-size: 15px; line-height: 1em;}
li {font-size: 10px; line-height: 15px;}
small {font-size: 80%; line-height: 15px;}

Wyobra sobie, e usuwamy jednostk em z wartoci line-height, tak e arkusz stylw

wyglda nastpujco:
ul {font-size: 15px; line-height: 1;}
li {font-size: 10px;}
small {font-size: 80%;}
<ul>
<li>Jestem list z <small>maym tekstem</small>.</li>
</ul>

Teraz elementom potomnym (li i small) przekazywana jest sama liczba, ktr wykorzystuj
one jako wspczynnik skali mnonik, jeli wolisz a nie jako obliczony wynik.
Kady element, ktry odziedziczy t warto 1, pomnoy j przez obliczon warto
wasnoci font-size. Element listy, ktry ma deklaracj font-size: 10px, bdzie mia
obliczon warto line-height: 10px. Nastpnie przekae t jedynk do elementu small,
ktry pomnoy j przez swoj obliczon warto font-size. To da w wyniku osiem pikseli,
a wic wysoko linii wyniesie rwnie osiem pikseli.
Ostateczny wynik bdzie rwnowany z poniszym:
ul {font-size: 15px; line-height: 1;}
li {font-size: 10px; line-height: 10px;}
small {font-size: 80%; line-height: 8px;}

To dua rnica (rysunek 3.3). Dlatego wanie zaleca si, aby wasnoci line-height, ktra
ma zosta zastosowana na rzecz elementw typu html lub body (i wszystkich innych, ktre
mog mie potomkw), nadawa wartoci bez jednostek.

Rysunek 3.3. Rnica midzy wartociami wasnoci line-height z jednostk i bez jednostki

85

CZ II: NIEZBDNIK

OKRELAJ STYL OBRAMOWANIA

Dobrze dobrane obramowanie moe zwikszy walory estetyczne kadego projektu, ale jeli
nie okrelimy jego stylu, nic nam z tego nie wyjdzie.
Piszc bez stylu, nie mam na myli stylu CSS, lecz wasno border-style.
Zamy, e napisalimy ponisz regu z wasnoci skrtow border:
form {border: 2px gray;}

wietnie, tylko e formularze nie zostan objte adnym obramowaniem. Powd jest
prosty pominlimy warto wasnoci border-style, przez co zostaa uyta jej warto
domylna. Co to za warto? Ta warto to none. W zwizku z tym powysza regua jest
rwnowana poniszej:
form {border: 2px gray none;}

Obramowanie z wasnoci border-style ustawion na none nigdy nie zostanie narysowane,

bez wzgldu na warto wasnoci border-width obramowanie, ktre nie istnieje, nie moe
mie adnej gruboci.

86

USTAWIANIE KOLORU OBRAMOWANIA

Od czasu do czasu musimy albo po prostu chcemy zastosowa na stronie wypuke (outset)
albo wklse (inset) obramowanie. Nie jestem tu od oceniania gustu, tylko chc wskaza
na pewien potencjalny problem, ktry jest z tym zwizany. Wemy nastpujc regu:
div {border: 5px red outset;}

Nic nadzwyczajnego, prawda? Ale spjrz, jak ta regua zostanie zinterpretowana w rnych
przegldarkach (rysunek 3.4).

Rysunek 3.4. Rne interpretacje stylw obramowania inset i outset

ROZDZIA 3: PORADY
To nie jest bd i adna z tych przegldarek nie interpretuje zdefiniowanych wasnoci
le. Po prostu w specyfikacji CSS nie okrelono jednoznacznie, jak przegldarki maj
modyfikowa kolory w celu uzyskania iluzji wklsoci bd wypukoci obramowania.
Oto, co jest w niej napisane:
Kolor obramowania w stylu groove, ridge, inset i outset zaley od
wasnoci koloru obramowania elementu, ale aplikacje klienckie mog
rzeczywiste kolory oblicza przy uyciu dowolnego algorytmu
(www.w3.org/TR/CSS21/box.html#border-style-properties).
Zwr szczegln uwag na drug cz tej wypowiedzi: aplikacje klienckie mog rzeczywiste
kolory oblicza przy uyciu dowolnego algorytmu. W wiecie przegldarek od zawsze jest
tak, e jeli zezwoli si na wybr rnych opcji, to kada przegldarka wybierze inn. I tak
jest te w tym przypadku.
Moe nie przeszkadzaj Ci te rnice w interpretacji stylu obramowania i w porzdku.
Moim zadaniem nie jest ferowanie wyrokw. Jeli jednak wolisz, aby obramowanie w kadej
przegldarce wygldao tak samo (jak na rysunku 3.5), musisz zadeklarowa zwyke
obramowanie i wasnorcznie ustawi kolory:
#innie {border-color: #800 #F88 #F88 #800;}
#outie {border-color: #F88 #800 #800 #F88;}

87

Rysunek 3.5. Takie same kolory obramowania w rnych przegldarkach

CZ II: NIEZBDNIK
To oczywicie dotyczy tylko stylw inset i outset obramowania. Aby utworzy jednolite
kolory dla groove i ridge (rysunek 3.6), trzeba te elementy umieci w kontenerach (albo
wstawi kontenery do elementw), obramowanie kadego z nich ustawi na normalne
(solid) i zastosowa kolory, ktre utworz dany efekt, np.:
#innie {border-color: #800 #F88 #F88 #800;}
form {border: 3px solid; border-color: #F88 #800 #800 #F88;}
<form>
<div class="wrap">
(tre, elementy formularza itp.)
</div>
</form>

Rysunek 3.6. Spjne obramowania w stylu ridge

88

WYCZANIE WYWIETLANIA ELEMENTW

Czy kiedykolwiek chciae ukry element na stronie przed uytkownikami, ale nie usuwa go
z kodu rdowego dokumentu? Mona to zrobi na kilka sposobw, z ktrych kady ma
swoje wady i zalety. Przestudiujemy je w tym podrozdziale i kilku nastpnych.
Najprostszym sposobem na ukrycie elementu jest wyczenie jego wywietlania za pomoc
odpowiedniej wasnoci CSS.
.hide {display: none;}

Ta regua sprawi, e na stronie nie zostanie wywietlony aden element przypisany do klasy
hide. Oznacza to, e elementy te nie wygeneruj w ukadzie strony adnego pola, ktre
by zajmoway, a wic nie bd miay adnego wpywu na ukad. To tak, jakby elementy te
wogle nie istniay, s jak nieuchwytny ninja.
Z uywaniem wasnoci display: none wi si jednak potencjalne problemy. Jeden z nich
jest tylko potencjalny, ale drugi wystpuje zawsze. Potencjalny problem polega na tym,
e jeli za pomoc JavaScriptu ustawimy warto wasnoci display elementu na none,
tonie wiadomo, jak j pniej przywrci. To jest trudniejsze, ni si wydaje. Zamy,
enapisalimy poniszy kod:
var obj = document.getElementById('linker');
obj.style.display = 'none';

ROZDZIA 3: PORADY
Jeli pniej zechcemy ten element przywrci do widoku za pomoc JS, to jakiej wartoci
uyjemy? To oczywicie zaley od elementu, o ktry nam chodzi. Jeli bdzie to span,
tonadalibymy mu warto inline, gdyby to by p to warto block. A moe nie,
przecie elementy span mona zamienia na blokowe, a elementy div na rdliniowe.
Istnieje jedno bardzo dobre rozwizanie tego problemu nie przypisywa adnej wartoci:
obj.style.display = ;

Dziki temu element zostanie przywrcony do odpowiedniej wartoci display, jaka bdzie
potrzebna w dalszej czci arkusza lub w arkuszach wbudowanych przegldarki.
Innym czsto stosowanym rozwizaniem jest nieustawianie wasnoci display
bezporednio, lecz przypisanie elementu do jakiej klasy, np. hide. Aby go wywietli,
wystarczy pniej tylko usun t klas. To rozwizanie jest o tyle bardziej skomplikowane,
e wymaga napisania (albo znalezienia w wyszukiwarce Google) skryptu JavaScript
usuwajcego i dodajcego wartoci atrybutu class, niemniej jednak jest ono bardzo dobre.
Drugi problem, ktry wystpuje zawsze, jest zwizany z tym, e jak na razie elementy
zwasnoci display ustawion na none s niewidoczne dla technologii pomocniczych,
takich jak np. czytniki ekranu. Poniewa elementu nie wida na ekranie, czytnik go nie
zobaczy i o to zazwyczaj chodzi, ale nie zawsze.
Wyobra sobie, e wstawiasz na stron specjalne odnoniki pozwalajce przej bezporednio
do gwnej treci strony. Chcesz, aby cza te suyy osobom korzystajcym z czytnikw
ekranu, pozwalajc im przeskoczy szybko do odpowiedniego miejsca w dokumencie, ale
nie chcesz, aby byy wywietlane na ekranie, bo osobom przegldajcym stron wzrokowo
s niepotrzebne. Jeli dla kontenera tych odnonikw zdefiniujemy wasno display:
none, to znajd si one poza zasigiem wszystkich uytkownikw, zarwno widomych,
jakiniewidomych. Osoby, ktre ich potrzebuj, nie usysz nic o ich istnieniu.
Analogicznie jest z menu rozwijanymi (bez obsugi zdarze myszy) ukrytymi przed
widomymi uytkownikami jeli ustawimy im wasno display: none, to take
czytniki ekranu ich nie znajd.

WYCZANIE WIDOCZNOCI ELEMENTU

Technik bardzo podobn do wasnoci display jest wasno visibility, za ktrej
pomoc rwnie mona znie element z widoku na ekranie:
.hide {visibility: hidden;}

Powysza regua sprawi, e wskazywany przez ni element bdzie niewidoczny, co moe

si wydawa identyczne z dziaaniem wasnoci display: none. Jest jednak midzy tymi
wasnociami wana rnica element z wasnoci visibility: hidden nie zostaje
usunity z ukadu strony, co wida na rysunku 3.7.

89

CZ II: NIEZBDNIK

Rysunek 3.7. Niewidoczny element

90

Co dobrego oprcz zajmowania wolnego miejsca moe nam przyj z uycia niewidocznego
elementu? Nie ma z nim kontaktu za pomoc myszy, nie da si do niego dosta przy uyciu
klawiatury i nie wida go. Czemu w takim razie ma to suy?
Rozwizanie to wietnie nadaje si do formatowania elementw pozycjonowanych
bezwzgldnie, ktre i tak nie bior udziau w normalnym ukadzie elementw na stronie
(le na wierzchu i nie s uwzgldniane przy rozmieszczaniu pozostaych elementw).
Mona wic wcza i wycza ich widoczno bez zmieniania ukadu strony. Dodatkowo
mona je ukrywa i wywietla z powrotem bez koniecznoci zabawiania si z wasnoci
display, co pozwala unikn problemw opisanych w poprzednim podrozdziale.
Niestety, problemy z dostpnoci pozostaj te same elementy z wasnoci visibility:
hidden s cakowicie ignorowane przez prawie wszystkie czytniki ekranu. Take menu
rozwijane ukryte t technik pozostaj dla nich niewidoczne.

WYRZUCANIE ELEMENTW POZA EKRAN

Mamy wic problem chcemy, aby niektre elementy byy niewidoczne wizualnie, ale byy
dostpne dla czytnikw ekranu. Oto jedno z moliwych rozwiza:
.hide {position: absolute; top: -10000em; left: -10000em;}

Dziki tej regule trzeci akapit (ten, ktry powodowa wystpienie pustego miejsca
narysunku 3.7) zostanie jakby usunity ze strony, co wida na rysunku 3.8.

ROZDZIA 3: PORADY

Rysunek 3.8. Wyrzucanie elementw poza ekran przy uyciu pozycjonowania

Oto, jak to dziaa. Nasza regua wzia trzeci akapit, zastosowaa do niego pozycjonowanie
bezwzgldne i wyrzucia go daleko poza krawd ekranu. Dziki temu, mimo i element
znikn z widoku wizualnie, nadal jest dostpny przynajmniej dla niektrych czytnikw
ekranu. Dlatego wanie technik t oglnie uwaa si za najlepsz do ukrywania elementw.
Z technicznego punktu widzenia przesunlimy lewy grny rg elementu o 10000 em
(tzn. wielkoci pisma w tym elemencie) nad lewy grny rg bloku go zawierajcego i 10000
na lewo od niego. W wielu przypadkach ten blok zawierajcy to element gwny, czyli np.
html. Bez wzgldu na wszystko jest praktycznie niemoliwe, eby tak daleko wyrzucony
poza ekran element by kiedykolwiek widoczny na stronie.
Moliwoci przywrcenia elementu jest kilka. Jeli chcesz, aby po uwidocznieniu by nadal
bezwzgldnie pozycjonowany, wystarczy, e odpowiednio zmienisz wartoci jego wasnoci
top i left, np.:
.show {top: 0; left: 0;}

Jeli jednak wolisz wdroy go do normalnego ukadu elementw na stronie, moesz

przywrci mu domylny typ pozycjonowania.
.show {position: static;}

Przy zastosowaniu tej metody nie trzeba przywraca wartoci wasnoci top i left,
poniewa w pozycjonowaniu statycznym s one i tak ignorowane. Czy je zmienisz, czy nie,
to i tak nie bdzie miao adnego znaczenia.

91

CZ II: NIEZBDNIK
Jest jeszcze trzecia moliwo, ktra wchodzi w gr wwczas, gdy chcemy przywrci
element do ukadu i musi on odgrywa rol blokowego kontenera dla elementw, ktre
zawiera. Sytuacja taka ma miejsce np. wwczas, gdy chcemy pozycjonowa bezwzgldnie
elementy znajdujce si w przywracanym elemencie. W takim przypadku element ten
mona pozycjonowa wzgldnie, ale trzeba zadeklarowa wartoci przesunicia.
.show {position: relative; top: 0; left: 0;}

Gdybymy nie podali ustawie top: 0; i left: 0;, to element zostaby przesunity
wzgldem swojego normalnego pooenia w ukadzie normalnym. To spowodowaoby
powstanie luki w miejscu, w ktrym by by, gdyby nie zosta przesunity o te 10000 em.
Oczywicie przesunicie nie musi wynosi 10000 em. Moe to by dowolna warto, nie
wiksza od 65 535 w nielicznych starszych przegldarkach lub 16777271 w Safari 3 albo
2147483647 w pozostaych. Ponadto mona uy dowolnej jednostki dostpnej w CSS,
a wic np. pikseli, cycerw czy cali. Oglnie rzecz biorc, chodzi o to, aby uy bardzo
duej wartoci, by mie pewno, e element nie pojawi si na stronie, jeli go celowo
nieprzywoamy z powrotem.

OBRAZY ZAMIAST TEKSTU

92

Jedn z najstarszych technik projektowych stosowanych przy uyciu CSS jest tzw.
zastpowanie tekstu (ang. image replacement IR). Jest to w istocie zbir technik
polegajcych na uyciu obrazw w miejscu, w ktrym powinien znajdowa si tekst, tak
aby napisany na grafice tekst by widoczny, dostpny w druku itd. Techniki te stosuje si
najczciej do zastpowania krtkich porcji tekstu, takich jak np. logo firmowe, nagwki
stron (rysunek 3.9) itp. Nie nadaj si one natomiast do zastpowania caych akapitw.

Rysunek 3.9. Nagwek z tekstem zastpionym grafik

ROZDZIA 3: PORADY
Najpopularniejsza (tak popularna, e niektrzy robili sobie koszulki ze zwizanymi z ni
napisami) technika IR znana jest pod dwiema nazwami: Phark i Rundle Method. Jej zasada
jest prosta i polega na zwyczajnym przesuniciu tekstu w lewo za pomoc ujemnego wcicia,
jak najdalej si da.
h1 {height: 140px; text-indent: -9999px;
background: url(page-header.gif);}

Jest to wic metoda bardzo podobna do sztuczki z ukrywaniem poza ekranem caych
elementw przy uyciu pozycjonowania bezwzgldnego. W tym przypadku jednak poza
ekran usuwamy tylko zawarto tekstow elementu, pola samego elementu nie ruszajc.
W druku to elementw jest domylnie nieuwzgldniane. Mimo i istnieje moliwo
zmiany tego, to jednak bardzo rzadko si z niej korzysta. W zwizku z tym w arkuszu stylw
do druku (szczegy na ten temat znajdziesz w kolejnym podrozdziale) mona po prostu
napisa tak:
h1 {text-indent: 0; background: none;}

Deklaracja background: none jest w tym wypadku tylko zabezpieczeniem, poniewa

praktycznie nikt nie wcza opcji drukowania ta. Jednak na wszelki wypadek regua ta
uniemoliwi wydrukowanie tekstu elementu h1 na obrazie graficznym.
Jednym z przypadkw, w ktrych ta technika nie zdaje egzaminu, jest sytuacja, gdy
wprzegldarce uytkownika wyczone jest wywietlanie obrazw albo, co zdarza si
czciej, jeli obraz z jakiego powodu nie zostanie wczytany. Nagwek bdzie wtedy
poprostu niewidoczny, co przyniesie skutek taki, jak wida na rysunku 3.10.

Rysunek 3.10. Efekt niedostpnoci obrazu

93

CZ II: NIEZBDNIK
Istnieje kilkanacie rozmaitych technik zastpowania tekstu, z ktrych kada rozwizuje
problem w inny sposb. Niektre polegaj na umieszczeniu treci elementu w elemencie
span i wyczeniu jego wywietlania bd wyrzuceniu go poza ekran. Inne natomiast
polegaj na dodaniu obrazu jako treci odzwierciedlajcej obraz w tle.
Warto take wspomnie o jeszcze jednej bardzo prostej technice zastpowania tekstu,
ktr jest po prostu wstawienie obrazu w treci. Na przykad:
<h1><img src="page-header.gif" alt="Dive Into Fishing"></h1>

Ten obraz bdzie widoczny zarwno na ekranie, jak i na wydruku, poniewa przegldarki
drukuj obrazy znajdujce si w treci stron. Ponadto technika ta jest bardzo przyjazna
dla czytnikw ekranu, ktre wiedz, e w przypadku napotkania obrazu naley przeczyta
zawarto ich atrybutu alt. Oczywicie, jeli uytkownik wyczy wywietlanie obrazw,
to nic z tego nie bdzie. Jeli jednak obraz nie zostanie wczytany z jakiego innego powodu,
to zamiast niego zostanie wywietlony przynajmniej tekst zastpczy z atrybutu alt.

STYLE DLA DRUKU

94

Jeli nie tworzysz stylw dla druku w swojej witrynie, to moe nadszed czas, aby to jeszcze
raz przemyle. Nawet jeli chcesz, aby Twoje strony po wydrukowaniu wyglday tak samo
jak na ekranie, moesz skorzysta z okazji i zoptymalizowa kontrast kolorw (najpewniej
odcieni szaroci), pamitajc, e nie bdzie koloru ani obrazw ta.
To nic trudnego. Arkusz stylw dla druku moemy doczy do strony na jeden z trzech
sposobw:
<style type="text/css" media="print"></style>
<link type="text/css" rel="stylesheet" media="print" href="print.css">
@import url(print.css) print;

Najczciej stosuje si metod z uyciem elementu link, poniewa osadzanie caego

arkusza stylw na kadej stronie to mao efektywne rozwizanie, a do importu arkusza
stylw rwnie potrzebne jest osadzenie arkusza stylw na kadej ze stron. Ponadto
wimportowaniu arkuszy stylw dla druku przez wiele lat przeszkadzay bdy przegldarek
zwizane z ich obsug.
W arkuszu stylw dla druku mona np. usun takie efekty jak zastpowanie tekstu (zobacz
poprzedni podrozdzia). Warto te w tym miejscu zapewni ciemny kolor tekstu, gdy biay
tekst na czarnym tle na ekranie prawie na pewno zmieni si w druku w biay tekst na biaym
papierze, co bez wtpienia znacznie utrudnia odczyt.
Ma to miejsce dlatego, e obrazy zamieszczone w tle prawie nigdy nie s drukowane.
Oczywicie prawie kada przegldarka ma opcj drukowania tych grafik, ale domylnie jest
ona wyczona i jeli si nad tym zastanowi, jest to bardzo dobre rozwizanie (wyobra
sobie, jak szybko ubywaoby atramentu w drukarce, gdybymy drukowali biay tekst na
ciemnoniebieskim tle). Poniewa prawie nikt nie zmienia tego ustawienia, naley przyj
zaoenie, e w druku nie zostan wywietlone adne ta. Dlatego najlepiej jest je w arkuszu
dla druku zwyczajnie usun.

ROZDZIA 3: PORADY
Mona to zrobi ruchem zamaszystym:
* {background: transparent; color: black;}

albo wybirczo wyznaczy elementy, ktre wymagaj poprawki:

body, #navbar, #aside, .warning, .blockquote {
background: transparent; color: black;}

PISANIE ARKUSZY STYLW DLA DRUKU

Jaki jest najlepszy sposb na prac nad arkuszami stylw dla druku? Bezporednio
wprzegldarce, chyba e wolisz skorzysta jaki milion razy z opcji podgldu wydruku.
Juwyjaniam, o co chodzi.
Zapewne masz ju jeden czy dwa arkusze stylw z definicj ukadu elementw na stronie.
Zamy, e s doczone do strony w nastpujcy sposb:
<link type="text/css" rel="stylesheet" href="basic.css">
<link type="text/css" rel="stylesheet" href="theme.css">

Mimo i nie jest to nigdzie bezporednio napisane, oba te arkusze maj zastosowanie do
wszystkich typw mediw. Innymi sowy, powyszy zapis jest rwnoznaczny z dodaniem
atrybutu media="all".
<link type="text/css" rel="stylesheet" href="basic.css" media="all">
<link type="text/css" rel="stylesheet" href="theme.css" media="all">

Czy na pewno chcesz, aby te wszystkie style zostay zastosowane w druku? Jeli nie,
towarto all lepiej zmieni na screen.
<link type="text/css" rel="stylesheet" href="basic.css" media="screen">
<link type="text/css" rel="stylesheet" href="theme.css" media="screen">

Mamy ju obsuon domyln sytuacj. Teraz musimy jeszcze doda arkusz stylw
dladruku:
<link type="text/css" rel="stylesheet" href="basic.css" media="screen">
<link type="text/css" rel="stylesheet" href="theme.css" media="screen">
<link type="text/css" rel="stylesheet" href="print.css" media="print">

wietnie! Tylko e po odwieeniu strony nadal widzimy to samo, poniewa korzystamy

z medium typu screen. Poniewa nie chcielibymy w nieskoczono wcza i wycza
podgldu wydruku ani te drukowa strony po naniesieniu kadej poprawki w arkuszu,
musimy zmusi stron, aby wywietlaa si na ekranie tak, jakby bya drukowana.
W zasadzie ju w poprzednim akapicie wyjaniem, jak to zrobi. Wystarczy arkusz stylw
przeznaczony dla druku oznaczy tymczasowo jako arkusz dla ekranu, a rzeczywiste
arkusze dla ekranu jako przeznaczone dla jakiego innego rodzaju medium

95

CZ II: NIEZBDNIK
(rysunek 3.11). Ja np. uywam typu medium tty, poniewa jest chyba najmniej podobne
do ekranu zewszystkich moliwych, a ponadto ma krtk nazw. Oto przykad:
<link type="text/css" rel="stylesheet" href="basic.css" media="tty">
<link type="text/css" rel="stylesheet" href="theme.css" media="tty">
<link type="text/css" rel="stylesheet" href="print.css" media="screen">

96

Rysunek 3.11. Podgld stylu druku w przegldarce

Teraz moesz sobie uywa do woli, poprawia i odwiea a do uzyskania takiego efektu,
jaki sobie wymarzye. Gdy skoczysz prac, zmie warto screen z powrotem na print,
atty na screen i dokonaj jednego wydruku, aby si upewni, e wszystko jest w porzdku.

CZA BLOKOWE
Podstawow technik pozwalajc uzyska wiele ciekawych opcji ukadu elementw
nastronie przy niewielkim nakadzie kodu rdowego s zabawy z wasnoci display.
Dokerem w tym rozdaniu jest moliwo zamiany czy, ktre s rdliniowe, na elementy
blokowe.
Aby zrozumie, dlaczego tak jest, wyobra sobie list odnonikw w pasku bocznym strony.
Najczciej umieszcza si je na licie nienumerowanej, w ktrej kade cze zawiera si
wjednym elemencie tej listy. Porwnajmy wic dwie identyczne listy czy. Jedyna rnica

ROZDZIA 3: PORADY
midzy nimi bdzie polegaa na tym, e jedna bdzie utworzona na bazie odnonikw
blokowych, a druga nie (rysunek 3.12). Specjalnie oznaczyem kolorem to odnonikw,
aby pokaza, na czym polega rnica.

Rysunek 3.12. Dwie listy odnonikw blokowych i nieblokowych

Odnoniki rdliniowe s znacznie mniej wygodne w uyciu, gdy oferuj zdecydowanie
mniejsze pole do klikania. Co wicej, gdybymy chcieli utworzy efekt podwietlania ta po
najechaniu na cze kursorem, w przypadku odnonikw rdliniowych zmienioby si tylko
to pod tekstem, a nie caego pola.
Aby zmieni odnonik na blokowy, nie trzeba duo pracy:
#sidebar ul a {display: block;}

Ta regua zostaa uyta do zmiany odnonikw na rysunku 3.12.

Gdy cze wygeneruje pole blokowe, zachowuje si ono identycznie jak zwyke pola
blokowe generowane przez akapity, nagwki, elementy div itp., poniewa jest to w istocie
ten sam rodzaj pola. Mona definiowa marginesy, dopenienie i wszystkie inne wasnoci
elementw blokowych.

MARGINES CZY DOPENIENIE?

Czy kiedykolwiek zastanawiae si tak naprawd intensywnie nad wciciami list
albo t niewielk, pust przestrzeni, ktra jest tworzona domylnie wok kadej strony?
Jeli tak, to wiesz moe, skd si one bior? Jak si okazuje, przyczyny ich powstawania nie
zawsze s takie same.
Zacznijmy od pustej przestrzeni wok strony. Jak wiadomo, tre strony jest oddzielona od
krawdzi przegldarki okoo 8-pikselowym odstpem, jak wida na rysunku 3.13. Przestrze
t mona zlikwidowa za pomoc stylw resetujcych albo poprzez nadanie odpowiedniego
stylu elementowi body. Jak naley to zrobi? Czy mamy usun margines, czy dopenienie?

97

CZ II: NIEZBDNIK

Rysunek 3.13. Pusta przestrze wok treci strony

98

Jeli chcesz przypodoba si wszystkim przegldarkom, to musisz zrobi i jedno, i drugie,

poniewa wikszo z nich tworzy ten odstp za pomoc marginesu, ale Opera uywa
dotego celu dopenienia.
Zanim zaczniesz szuka staroytnych norweskich zakl, musisz sobie zda spraw z tego,
e twrcy przegldarek nie popenili w tej kwestii bdu. Nie ma specyfikacji, w ktrej
szczegowo opisano by sposb tworzenia odstpu midzy krawdzi okna przegldarki
a treci stron internetowych (ani nawet takiej, w ktrej by napisano, e w ogle musi
on wystpowa). Istnieje wany argument za tym, aby w tej roli stosowa dopenienie.
Niemato jednak znaczenia, gdy przegldarki stosuj rne rozwizania. Zatem piszmy:
body {padding: 0; margin: 0;}

To rozwie problem w kadej znanej przegldarce (moe oprcz Netscape 4, ale kogo to
obchodzi).
Analogicznie wcicia w listach zostay w niektrych przegldarkach utworzone za pomoc
marginesw, a w innych przy uyciu dopenienia. Jeli wic napiszemy
ul, ol {margin-left: 0;}

to usuniemy wcicie list tylko w niektrych przegldarkach. Jeli chcemy uzyska ten sam
efekt wszdzie, musimy te usun lew stron dopenienia.
ul, ol {margin-left: 0; padding-left: 0;}

Oczywicie wcicia nie musimy wcale usuwa. Gdy ju usuniesz ustawienia zarwno lewego
marginesu, jak i dopenienia w celu zmiany wcicia list, moesz pniej ustawi dowolne ich
wartoci. Moesz np. definiowa wcicie list za pomoc dopenienia. Wwczas wystarczy napisa:
ul, ol {margin-left: 0; padding-left: 2.5em;}

ROZDZIA 3: PORADY
Moesz te rozoy t warto na obie wasnoci:
ul, ol {margin-left: 1.25em; padding-left: 1.25em;}

Niektrzy preferuj korzystanie z samych marginesw:

ul, ol {margin-left: 2.5em; padding-left: 0;}

W wielu przypadkach nie ma znaczenia, ktr metod zastosujemy, ale wszystko si

zmieni, gdy zdefiniujemy to naszych list (rysunek 3.14). Ma to zwizek z tym, e
markery elementw list punktory, kwadraty, litery, liczby itp. s umieszczane obok
elementw, tak jakby byy pozycjonowane bezwzgldnie (w istocie nie uywa si do tego
celu pozycjonowania bezwzgldnego, ale efekt jest bardzo podobny). Jeli bdziemy chcieli,
aby markery elementw listy znalazy si w obrbie widocznego ta, to wcicie musimy
ustali przy uyciu dopenienia. Jeli natomiast chcemy, aby byy poza tem powinnimy
zastosowa margines.

99

Rysunek 3.14. Porwnanie rnych rodzajw wcicia list

WYCINANIE LIST
W poprzednim podrozdziale bya mowa o wcinaniu list, a teraz bdzie o wycinaniu.
Czy pojcie wycinanie list w ogle funkcjonuje? Moe i nie, ale i tak jest lepsze ni
wiszce wcicie, ktre rwnie mona czasami spotka w opisach tego typu rzeczy, a ktre
jest kompletnie bez sensu.
To, o czym teraz mwimy, to technika wysuwania pierwszego wiersza elementu listy w lewo,
tak e wisi po lewej stronie reszty treci elementu (rysunek 3.15).
Ten przyjemny dla oka efekt pozwala wyrni wizualnie listy bez zamiecania strony
niepotrzebnymi punktorami czy czym podobnym. Ponadto naprawd atwo mona go
uzyska:
ul {text-indent: -2em; list-style: none;}

CZ II: NIEZBDNIK

Rysunek 3.15. Wycicie

100

To wszystko. Zwr uwag na deklaracj list-style: none. Gdybym jej nie wpisa,
to pierwszy wiersz kadego elementu listy byby wycity, ale jego tekst nachodziby
napunktory. Dlatego nie naley miesza wycinania list z markerami.
Wycina mona oczywicie wszystko, co si chce, a wic take akapity, nagwki, elementy div
i pre czy komrki tabeli. Tylko e w listach technika ta znajduje najczstsze zastosowanie.

DEFINIOWANIE PUNKTORW LIST

Punktory do listy mona doda na wiele sposobw. Najprostszym i zarazem najmniej
precyzyjnym z nich jest uycie wasnoci stylu listy kaskadowych arkuszy stylw.
Zamy, e mamy list gwiazd znajdujcych si najbliej Ziemi i chcielibymy, aby kady
element tej listy by oznaczony ma gwiazdk zamiast kkiem, prostoktem czy dyskiem
(rysunek 3.16).
ul.stars{list-style-image: url(star.gif);}

atwizna. Potencjalny problem z tym zwizany polega na tym, e nie mamy adnej kontroli
nad pooeniem tych obrazw. Ich odlego od lewego brzegu tekstu i wyrwnanie w pionie
wzgldem pierwszego wiersza cakowicie zale od przegldarki i nie mamy tu nic do powiedzenia.
Teraz zamy, e chcemy uy zwykych markerw listy powiedzmy typu disc ale chcemy,
aby miay inny kolor ni tre elementw (rysunek 3.17).

ROZDZIA 3: PORADY

Rysunek 3.16. Gwiazdy gwiazd

101

Rysunek 3.17. Zmiana koloru markerw

CZ II: NIEZBDNIK
To niestety wymaga zastosowania pewnej sztuczki. Kady element listy musimy umieci
wjakim elemencie np. div albo span. Zademonstruj to na przykadzie tego pierwszego
elementu.
ul.stars {color: red; list-style: disc;}
ul.stars div {color: black;}
<ul class="stars">
<li><div>Soce</div></li>
<li><div>V645 Centauri (Proxima Centauri)</div></li>
<li><div>Alpha Centauri A</div></li>
...
</ul>

W tym konkretnym przypadku moglibymy zamieni element div na span bez wpywu na
ostateczny efekt. Ale gdybymy chcieli doda jeszcze jakie obramowanie albo to, to rnice
w zastosowaniu tych dwch elementw byyby ogromne (zgoda, mona by je zlikwidowa
przy uyciu wasnoci display).
Jeli sdzisz, e w CSS powinny by jakie sposoby zmieniania stylu samych markerw list
bez koniecznoci wstawiania dodatkowych znacznikw do dokumentw, to poinformuj
Ci, e one istniej, tylko e nie zaimplementowano ich w adnej przegldarce.

102

PUNKTORY W TLE
Chcemy zatem zastosowa wasne markery do elementw listy, ale nie podoba nam si to,
e przegldarka umieci je, gdzie zechce. Nie ma problemu. Moesz wyczy standardowe
wywietlanie markerw i umieci swoje obrazki w tle elementw listy (rysunek 3.18).
ul.stars {list-style: none;}
ul.stars li {background: url(star.gif) 0 0.1em no-repeat; padding-left: 16px;}

Dziki temu, e nad pooeniem obrazu w tle elementu mamy o wiele wiksz kontrol, ta
technika daje znacznie wiksze moliwoci ni uycie standardowej wasnoci list-style-image.
Oczywicie trzeba pamita o dodaniu dopenienia z lewej strony, aby tre elementu nie
zostaa wywietlona na obrazie punktora!
Wielk sztuk jest wyrwnanie obrazu z pierwszym wierszem tekstu elementu. W zasadzie
nie mona mie 100% pewnoci, e obraz pozostanie idealnie wyrwnany co do jednego
piksela np. z lini podstawow pisma pierwszej linii tekstu. Mona uzyska efekt bardzo
zbliony do ideau i w wielu przypadkach uda si go osign, ale nigdy nie mona by tego
pewnym. Jest to jeden z przypadkw, kiedy musimy zaakceptowa moliwo wystpienia
drobnych usterek albo zastosowa inne rozwizanie.
Najwiksz zalet tej metody jest to, e wcale nas ona nie ogranicza do pierwszego wiersza
tekstu. Markery bdce w tle mona wyrwna w pionie wzgldem caego elementu, nawet jeli
jego tre skada si z wielu wierszy. Jeli t technik poczy si z odpowiednio zdefiniowanymi
krawdziami obramowania, to mona uzyska naprawd bardzo fajne efekty (rysunek 3.19).

ROZDZIA 3: PORADY

Rysunek 3.18. Punktory w tle

103

Rysunek 3.19. Markery w tle wyrwnane w pionie

CZ II: NIEZBDNIK
Jeli chcesz rne rodzaje elementw listy oznaczy rnymi rodzajami markerw (jak
na rysunku 3.20), to wystarczy, e oznaczysz je odpowiednimi klasami i dla kadej klasy
zdefiniujesz inny obraz.
ul.stars {list-style: none;}
ul.stars li {background: 0 0.1em no-repeat;
padding-left: 16px;}
ul.stars li.m {background-image: url(star-m.gif);}
ul.stars li.k {background-image: url(star-k.gif);}
<ul class="stars">
<li class="g">Soce</li>
<li class="m">V645 Centauri (Proxima Centauri)</li>
<li class="g">Alpha Centauri A</li>
<li class="k">Alpha Centauri B</li>
...
</ul>

104

Rysunek 3.20. Rne markery w tle

Jedn z wad tego podejcia jest to, e markery umieszczone w tle elementw prawie
nikomu si nie wydrukuj. Dlatego w arkuszu stylw dla druku warto je zastpi
zwykymi markerami.

ROZDZIA 3: PORADY

GENEROWANIE MARKERW
Istnieje jeszcze jeden bardziej zaawansowany sposb na utworzenie wasnych markerw list,
ale nie dziaa on w starszych przegldarkach. W technice tej wykorzystuje si poczenie
wycinania z generowaniem treci (rysunek 3.21).

105

Rysunek 3.21. Generowanie markerw

ul.stars li:before {content: url(star.gif);margin-right: 8px;}
ul.stars li {text-indent: -20px; list-style: none;}

To wszystko. Nie trzeba dodawa adnych nowych elementw, gdy s one dodawane
na pocztku kadego elementu listy automatycznie w postaci treci generowanej. Tre
generowana oznacza, e obrazy s wstawiane jako elementy rdliniowe, a wic mona je
wyrwnywa pionowo wzgldem linii podstawowej pisma itp.
Oczywicie mona zastosowa rne ikony, odwoujc si do rnych klas (rysunek 3.22).
ul.stars li.m:before {content: url(star-m.gif);}
ul.stars li.k:before {content: url(star-k.gif);}

Dziki temu, e te markery s wstawiane do treci strony, bd widoczne take na wydruku,

tak jakby zostay dodane za pomoc elementu img albo wasnoci list-style-image.
Korzy z tego jest taka, e zamiast wczytywa obrazy, mona wstawia zwyke znaki, ktre
mona formatowa niezalenie od treci, a ponadto nie trzeba dodawa adnych nowych
elementw HTML. Wczeniejsze style moemy zastpi poniszym arkuszem (wynik jego
dziaania pokazano na rysunku 3.23):

CZ II: NIEZBDNIK

Rysunek 3.22. Generowanie rnych markerw

106

ul.stars
ul.stars
ul.stars
ul.stars

li {text-indent: -1.25em; list-style: none;}

li:before {content: "\2605"; margin-right: 0.75em;}
li.m:before {color: red;}
li.k:before {color: orange;}

Rysunek 3.23. Generowanie markerw Unicode

ROZDZIA 3: PORADY
Ta technika nie daje tak duej kontroli nad markerami jak obrazy w tle, przez co istnieje
ryzyko, e tekst w pierwszej linii nie bdzie idealnie wyrwnany z tekstem w dalszych
linijkach. Oglnie jednak rzecz biorc, mona uzyska bardzo dobry efekt, a poza tym
problem ten dotyczy tylko elementw list zawierajcych wicej ni jeden wiersz tekstu.

MASZ DO DYSPOZYCJI
WICEJ KONTENERW, NI MYLISZ
Bardzo czsto stosowanym zabiegiem jest umieszczanie caej treci strony
w elemencie-kontenerze div w taki sposb:
<body>
<div class="wrapper">

</div>
</body>

Najczciej tumaczy si to tym, e uatwia to ustawienie treci na rodku okna albo

zdefiniowanie jeszcze kilku innych kontenerw nienalecych do treci. W tym przykadzie
mamy elementy body i div, dla ktrych typowo definiuje si nastpujce style:
body {background: #ABACAB; text-align: center;}
div.wrapper {width: 800px; margin: 0 auto; text-align: left;)

To klasyczny kod ustawiajcy projekt na rodku okna przegldarki i dziaajcy nawet w starych
przegldarkach IE, ktre nie rozpoznaway wartoci auto marginesw i mylay, e wasno
text-align suy do wyporodkowywania blokw.
Ale przecie tre strony ju przed dodaniem elementu div znajdowaa si w dwch
kontenerach elementach body i html. Tak, element html rwnie mona formatowa.
Czemu by nie? Dla CSS jest to zwyky element, jak wszystkie inne. Nie ma w nim nic
niezwykego oprcz faktu, e stoi na najwyszym poziomie hierarchii w drzewie
dokumentu, a wic jest jego korzeniem.
W zwizku z tym powysze dwie reguy moemy zmodyfikowa nastpujco:
html {background: #ABACAB; text-align: center;}
body {width: 800px; margin: 0 auto; text-align: left;)

Teraz ten sam efekt (rysunek 3.24) uzyskalimy bez dodatkowego elementu div,
ktrymoemy usun.

107

CZ II: NIEZBDNIK

Rysunek 3.24. Ukad

108

Gdy ju zdasz sobie spraw, e za pomoc CSS mona formatowa take elementy html
i body, otworz si przed Tob nowe interesujce moliwoci. Zamy np. e chcemy
zaprojektowa stron z dwoma kolorowymi paskami wzdu grnej krawdzi okna
ilogo umieszczonym na dolnym pasku. Pewnie daoby si to jako zrobi przy uyciu
dodatkowego elementu div, ale poniej przedstawiam alternatywne rozwizanie, ktre
niewymaga dodawania tego elementu (rysunek 3.25):
html {border-top: 5px solid navy;}
body {border-top: 55px solid silver; margin: 0; padding: 0;}
img.logo {position: absolute; top: 10px; left: 10px;}

Podobny efekt mona oczywicie uzyska przy uyciu zwielokrotniania obrazw w tle
(rysunek 3.26).
html {background: url(stars-m.png) 14px 41px repeat-y;}
body {background: url(stars-k.png) 54px -20px repeat-x;}
img.logo {position: absolute; top: 10px; left: 10px;}

ROZDZIA 3: PORADY

Rysunek 3.25. Paski i gwiazdki

109

Rysunek 3.26. Duo gwiazd

CZ II: NIEZBDNIK

TA DOKUMENTU
Wszyscy przyzwyczailimy si do tego, e aby wypeni tem cae okno przegldarki,
ustawiamy to elementu body. Ale nie zgadniesz, co si stanie, gdy dodatkowo ustawisz to
elementu html.
html {background: #ABACAB;}
body {background: #DED;}

Spjrz na rysunek 3.27. Okno przegldarki wypenia to elementu html, a to elementu

body jest widoczne tylko w obszarze treci i jego dopenienia. Dzieje si tak bez wzgldu na
to, czy element body siga doln krawdzi do dolnej krawdzi okna przegldarki, czy nie.
Jeli nie, to pod spodem wida to elementu html. To samo by byo, gdyby element body
mia ustawiony dolny margines, a element html mia dolne dopenienie, albo gdyby oba te
warunki byy spenione.

110

Rysunek 3.27. Element body nie zawsze wypenia widoczny obszar okna
Jeli usuniemy z arkusza stylw regu definiujc to elementu html, to cae okno zapeni si
kolorem elementu body.
Dzieje si tak dlatego, e w specyfikacji jzyka HTML zapisano, i kanwa, czyli obszar,
wktrym rysowana jest strona internetowa, pobiera swoje to z elementu html. Jeli element
html nie ma zdefiniowanego ta, to jest ono pobierane z elementu body. Jeli element body
rwnie nie ma ta, to zostaje zastosowany jaki domylny kolor.

ROZDZIA 3: PORADY
Jest to specjalny przypadek, ktrego opis znajduje si w specyfikacji. W przypadku innych
elementw nie jest tak, e to (lub jakakolwiek inna wasno CSS) jest przekazywane w gr
drzewa dokumentu. Pamitaj o tym, gdy bdziesz ustawia to dla elementu html.

ARKUSZE SERWEROWE
Ile razy zdarzya Ci si nastpujca sytuacja:
1. Wprowadzasz zmiany w arkuszu stylw na swoim komputerze.
2. Wysyasz zmodyfikowany arkusz na serwer testowy.
3. Przechodzisz do okna przegldarki i odwieasz je.
4. Nic si nie zmienia.
5. Robisz twarde odwieenie i dalej nic.
6. Sprawdzasz, czy wysyanie plikw zakoczyo si powodzeniem.
7. Jeszcze raz odwieasz i nadal nic.
8. Dodajesz kilka regu !important. Wysyasz plik na serwer, odwieasz, nic.
9. Zaczynasz przeklina swj komputer.
10. Sprawdzasz w Firebugu, co przesania Twoje nowe style. Spostrzegasz, e w ogle nie
zostay zastosowane.
11. Szukasz przyczyn jeszcze kilka minut, a w kocu odkrywasz, e odwieae stron
na serwerze produkcyjnym, a nie testowym.
12. Przeczasz si na serwer testowy i widzisz wszystkie zmiany.
13. Klniesz ze zoci, e jeste taki gupi.
Takie sytuacje przydarzay mi si tak czsto, e a wstyd si przyzna. Ostatnim razem,
gdy to miao miejsce, w kocu zdaem sobie spraw, e mgbym przecie na serwerze
testowym serwowa specjalny arkusz stylw, taki, ktry pozwalaby od razu si zorientowa,
e jestem na tym serwerze, bez potrzeby demolowania caego projektu. To pozwolioby mi
zaoszczdzi mnstwo nerww.
html {background: url(staging-bg.png) 100% 50% repeat-y;}

Istnieje wiele sposobw na zrealizowanie tego pomysu. Najelegantsza metoda polega na

uyciu nagwkw HTTP do wysyania specjalnego, dodatkowego arkusza stylw. Jeli
korzystasz z serwera Apache, wystarczy, e dodasz do pliku .htaccess w katalogu gwnym
poniszy wiersz kodu:
Header add Link "</staging.css>;rel=stylesheet;type=text/css"

Teraz musisz jeszcze tylko zapisa w katalogu gwnym swojego serwera testowego plik
staging.css i gotowe. Oczywicie plik ten moesz zapisa w dowolnym innym miejscu, tylko
pamitaj, aby odpowiednio zmieni ciek w nawiasach ostroktnych w swojej dyrektywie.
Mona take stosowa adresy bezwzgldne, typu http://example.com/staging.css. Nie zapomnij
tylko o nawiasach ostroktnych, bo s wymagane.

111

CZ II: NIEZBDNIK
Zawsze istnieje ryzyko, e przeniesiesz pliki staging.css i .htaccess na serwer produkcyjny.
Jeli si tego obawiasz, zrezygnuj z pliku .htaccess i zamiast tego wysyaj plik staging.css
zapomoc odpowiednich dyrektyw w pliku httpd.conf:
<Directory /cieka/do/katalogu/gwnego/witryny>
Header add Link "</staging.css>;rel=stylesheet;type=text/css"
</Directory>

ciek /cieka/do/katalogu/gwnego/witryny naley zastpi waciw wasn ciek

do katalogu, w ktrym znajduj si pliki Twojej witryny. Zalet tej metody jest to, e ryzyko
skopiowania pliku httpd.conf na inny serwer jest znacznie mniejsze. Nie jest to niemoliwe,
ale bardzo mao prawdopodobne.
Jedn z wad serwowania arkuszy stylw za pomoc nagwkw HTTP jest fakt, e metoda
ta nie dziaa w przegldarkach Internet Explorer i Safari. Dlatego wanie technika ta jest
rzadko stosowana do serwowania CSS w publicznie dostpnych witrynach internetowych.
Nie ma oczywicie adnych przeciwwskaza do korzystania z niej w rodowisku testowym,
jeli uywamy np. Firefoksa albo Opery.
Teraz wyobra sobie, e nie korzystasz z serwera Apache albo nie masz moliwoci
grzebania w jego plikach konfiguracyjnych, a chcesz zastosowa opisywan technik.

112

Uytkownicy serwera IIS mog wysya arkusze stylw poprzez nagwki HTTP,
korzystajc ze wskazwek podanych na stronie http://technet.microsoft.com/en-us/library/
cc753133(WS.10).aspx. Mona to zrobi zarwno z poziomu interfejsu IIS Managera,
jakiwiersza polece.
Jeli wszystkie swoje strony zapisujesz w formacie PHP, to nie musisz bawi si
wkonfiguracj serwera, ale na kadej stronie, na ktrej chcesz wczy swj arkusz
stylw, musisz umieci odpowiedni dyrektyw PHP. Ta metoda dziaa we wszystkich
przegldarkach:
Najprociej jest doda poniszy kod do kadej strony PHP:
<?php if ($_SERVER['HTTP_HOST'] == "staging.example.com") { ?>
<link rel="stylesheet" href="/staging.css" type="text/css" />
<?php } ?>

Ten kod wpisuje do dokumentu cze do arkusza stylw, a jeli jaka przegldarka go
nieobsuguje, to i tak nie pokae adnego stylu.
Ta metoda dziaa doskonale w przypadku serwowania plikw z domeny staging.example.
com. Lepszym rozwizaniem, ktre bdzie dziaa z kadego serwera z okrelonym
acuchem w nazwie domeny, a nawet z serwera lokalnego, dziaajcego na naszym
komputerze osobistym, jest:
<?php
if(preg_match("/staging|test|dev|localhost|127\.0\.0\.1/", $_SERVER[HTTP_HOST])){ ?>
<link rel="stylesheet" href="/staging.css" type="text/css" />
<?php } ?>

ROZDZIA 3: PORADY
Mona te zastosowa warunkowe wysyanie nagwkw HTTP przy uyciu PHP, ale jeli na
kadej stronie chcesz stosowa wykrywanie serwera, to rwnie dobrze moesz zastosowa
wstawianie cza do arkusza stylw.
Na pewno podobne rozwizania mona zaprogramowa przy uyciu innych jzykw
programowania uywanych do tworzenia stron internetowych. Przedstawione urywki kodu
pokazuj, czego naley szuka.
Za powyszy kod PHP dzikuj dwm uczonym dentelmenom: Zacharyemu Johnsonowi
(http://www.zachstronaut.com/) i Alanowi Hoganowi (http://alanhogan.com/), natomiast
trzeciemu, Peterowi Wilsonowi (http://peterwilson.cc/) za pokazanie mi strony
zewskazwkami dotyczcymi serwera IIS.

113

Skorowidz
!important, 52, 53
$, 69
*, 57, 67
:active, 48
:after, 48, 75, 76
:before, 48, 75, 76
:checked, 49
:disabled, 49
:empty, 40, 49
:enabled, 49
:first-child, 48
:first-letter, 48
:first-line, 48
:first-of-type, 49
:focus, 48
:hover, 48
:lang(), 48
:last-child, 49
:last-of-type, 49
:link, 48
:not(), 40, 49
:nth-child(), 49, 244, 246, 248
:nth-child(even), 245
:nth-child(odd), 245
:nth-last-of-type(), 49
:nth-of-type(), 49
:only-child, 49
:only-of-type, 49
:root, 49
:target, 49, 51
:visited, 48
@media, 241
^, 68
~, 64, 65

A
adres URL, 66, 67
aktywny element, 48
alt, 40
arkusze serwerowe, 111
arkusze stylw dla mediw, 237
arkusze stylw dla druku, 94, 95
arkusze stylw zerujce domylne
ustawienia, 43
ASCII, 76
aspect-ratio, 242
atrybuty
class, 58
href, 63
id, 58
media, 95
scope, 212
selektory, 62
wartoci, 66
audio, 235
automatycznie adaptujca si siatka,
245

B
background, 93, 110, 249, 254, 255, 256
background-color, 250, 256, 257
background-image, 257
background-position, 257
background-repeat, 257, 258
biblioteki JavaScript, 234
body, 108, 110
to elementu, 110
border, 86
border-bottom-left-radius, 183
border-bottom-right-radius, 183
border-collapse, 214
border-radius, 181
border-style, 86
border-top-left-radius, 183
border-top-right-radius, 183
boxpunch, 174
box-shadow, 253

C
caption, 224
chmurki, 170
cienie, 252
class, 58
selektory atrybutw, 64
clear, 125, 243
clearfix, 125
color, 242, 250
color-index, 242
Complexspiral, 166
CSS, 17
CSS 2.1, 48
CSS 3, 40, 49
kolory RGBA, 249
pseudoklasy, 49
zaokrglanie rogw, 181
CSS parallax, 191
czcionki, 83

D
dane tabelaryczne, 224
definiowanie
punktory list, 100
to elementw body i html, 110
wiele obrazw w tle elementw,
254
device-aspect-ratio, 242
device-height, 242
device-width, 242
diagnostyczny arkusz stylw, 40
display, 88, 89
block, 97
none, 88
div, 64, 107
document.getElementById(), 88

dodawanie obramowania
dokontenera, 175
dokadno selektora, 51
doczanie skryptu IE9.js do strony, 46
domylne style w przegldarkach, 42
dopenienie, 97
Dragonfly, 33
Styles, 33
Ukad, 33, 34
drukowanie, 94
dzieci, 70
formatowanie wybranych
elementw, 242

E
efekty, 165
Complexspiral, 166
menu CSS, 172
menu podrczne, 170
niedostpno obrazu, 93
nieregularne ksztaty, 174
nieregularne ksztaty pywajce, 193
paralaksa CSS, 191
pola obrazw, 201
przesuwane drzwi, 185
przesuwane drzwi z przycinaniem,
189
Sliding Doors, 185
sprajty CSS, 183
Super Ragged Floats, 197
supernieregularne ksztaty
pywajce, 197
zanikajce to, 51
zaokrglanie rogw, 177
elementy blokowe, 96
elementy HTML 5, 234
elementy pywajce, 121
elementy siostrzane, 73
em, 84, 85, 150

F
faszywe kolumny, 132
figcaption, 235
figure, 235
Firebug, 18
badanie elementw, 20
edycja kodu CSS, 23
kod CSS, 19
prezentacja stylw, 20
pseudoelementy, 22
pseudoklasy, 22
struktura dokumentu, 18
Styl, 19, 20
Ukad, 23
ukad elementw, 19
wartoci stylw, 22
Zbadaj element, 21

SKOROWIDZ
Firefox, 18
fixed positioning, 161
float, 123
Fluid Grids, 146
fokus, 48
font, 83
font-size, 83, 85
fonty, 83
footer, 58
formatowanie
elementy HTML 5, 234
cza, 70
wybrane elementy-dzieci, 242
wybrane kolumny, 246

G
generowanie
markery, 105, 106
tre, 75
GIF89a, 189
grid, 242

270

header, 58
height, 226, 242
Holy Grail, 142
href, 40, 63
HSL, 250
hsl(), 251
HSLA, 250
hsla(), 251
html, 108, 110
to elementu, 110
HTML 5, 234
audio, 235
imitacja elementw za pomoc
nazw klas, 236
obrazy, 235
stare przegldarki, 235
video, 235

I
id, 58
identyfikator fragmentu, 50
identyfikatory, 58
czenie z klasami, 61
selektory atrybutw, 65
stosowanie, 60
IE7.js, 45
IE8.js, 45
IE9.js, 45, 46
doczanie skryptu do strony, 46
IEDT, 29
image replacement, 92
imitacja elementw HTML 5
zapomoc nazw klas, 236
inset, 86, 88
Internet Explorer 6, 46, 62
PNG, 181
selektory dzieci, 72
Internet Explorer 7, 29
Internet Explorer 8, 32

Internet Explorer 9, 45, 46

Internet Explorer Developer Toolbar,
29
CSS Selector Matches, 30, 31
Show Default Styles, 31
widoki, 30
IR, 92

J
JavaScript, 234
jednostki, 84
em, 150
jedyny suszny ukad, 138
JQuery, 234

K
kana alfa, 249, 250
klasy, 58
czenie z identyfikatorami, 61
przypisywanie jednego elementu
do wielu klas, 61
kleiste stopki, 161
kliring elementw przylegajcych,
126
kolejno fontw, 83
kolejno zapisu klas, 62
kolorowanie krawdzi, 55
kolory
HSL, 250
HSLA, 250
obramowanie, 86, 87
RGBA, 249
kolumny tekstu, 128
komentarze warunkowe, 46
kontekst pozycjonowania, 157
kontenery, 107
kontenery elementw pywajcych, 121

L
line-height, 83
wartoci bezjednostkowe, 84
link, 94
Liquid Bleach, 135
list-style, 100
list-style-image, 100
listy, 71
generowanie markerw, 105
markery w tle, 104
punktory, 100
punktory w tle, 102, 103
wycinanie, 99

cza, 63, 70
cza blokowe, 96
cza do adresw e-mail, 70
cza do usugi AOL Instant
Messenger, 70
cza nawigacyjne, 59
cza szyfrowane, 70

nieodwiedzone cze, 48
odwiedzone cze, 48
stany, 185
strony przeznaczone do druku, 77
czenie identyfikatorw z klasami, 61

M
macierz przeksztacenia, 267
mapy, 217
margin, 98
marginesy, 97
automatyczna szeroko, 120
ujemne wartoci, 154
wysuwanie elementw poza
kontenery, 155
margin-left, 98, 99
markery, 104
generowanie, 105
matrix(), 267
max-device-height, 241
max-width, 202
media, 94, 95, 237
media="print", 95
media="screen", 95
menu CSS, 172
menu podrczne, 170
menu rozwijane, 173
min-device-height, 241
min-width, 238
model barw HSL, 251
model kolorw RGBA, 249
monochrome, 242
-moz-border-radius, 181
-moz-box-shadow, 253
-moz-transform, 258
-ms-transform, 258

N
nagwek, 58, 161
nagwek z cieniem, 252
nagwki HTTP, 113
narzdzia, 17
Narzdzia deweloperskie, 32
nazwy klas, 58
nieodwiedzone cze, 48
nieregularne ksztaty, 174
nieregularne ksztaty pywajce, 193
not, 241

O
obramowanie, 86, 116
inset, 86
kolor, 86, 87
outset, 86
obrazy, 201, 235
obrazy w tle, 108, 254
obrazy zamiast tekstu, 92
ograniczanie rozmiaru, 202
pola obrazw, 201
obrt, 258
obrysy, 116
grubo, 117

SKOROWIDZ
odnoniki rdliniowe, 97
odwiedzone cze, 48
ograniczanie rozmiaru obrazw, 202
ol, 71
One True Layout, 138
only, 241
Opera, 33
orientation, 242
-o-transform, 258
outline, 116, 226
outset, 86, 88
overflow, 122
auto, 128

P
padding, 98
padding-left, 98
padding-top, 162
paralaksa CSS, 191
paski narzdzi
Internet Explorer Developer
Toolbar, 29
Web Developer, 24
Phark, 93
pynne siatki, 146
pywajce elementy o rnej
wysokoci, 243
pywajce kontenery elementw
pywajcych, 123
PNG, 181, 189
podgld stylu druku w przegldarce,
96
pola obrazw, 201
poprawno kodu, 82
position, 90
absolute, 90, 157
fixed, 163
relative, 92, 157
static, 91
pozycjonowanie, 91
obrazy w tle, 191
pozycjonowanie bezwzgldne, 91
pozycjonowanie elementw
winnym elemencie, 157
pozycjonowanie na sztywno
nagwkw i stopek, 161
pozycjonowanie procentowe, 191
pozycjonowanie stae, 161
pozycjonowanie w kontekcie, 156
wyjcie poza kontener, 158
precyzja selektorw, 51, 57
identyfikatory, 60
progressive enhancement, 77
prosty ukad dwukolumnowy, 128
prosty ukad trzykolumnowy, 129
przeksztacenia dwuwymiarowe, 258
kilka przeksztace naraz, 266
kolejno przeksztace, 267
macierz przeksztacenia, 267
obrt, 258
przeksztacenia macierzowe, 267
skalowanie, 260
skalowanie w poziomie, 261
translacja, 262
znieksztacenie, 264

przepenienie, 121
przesuwane drzwi, 185
przesuwane drzwi z przycinaniem, 189
przezroczysto, 249
obrazy PNG, 181
przypisywanie jednego elementu
dowielu klas, 61
pseudoelementy, 48, 49
:after, 48, 75, 76
:before, 48, 75, 76
:first-letter, 48
:first-line, 48
formatowanie, 76
pseudoklasy, 48, 49
:active, 48
:checked, 49
:disabled, 49
:empty, 49
:enabled, 49
:first-child, 48
:first-of-type, 49
:focus, 48
:hover, 48
:lang, 48
:last-child, 49
:last-of-type, 49
:link, 48
:not(), 49
:nth-child(), 49
:nth-last-of-type(), 49
:nth-of-type(), 49
:only-child, 49
:only-of-type, 49
:root, 49
:target, 49
:visited, 48
CSS 3, 49
punktory, 100
punktory w tle, 102, 103
pusta przestrze wok treci strony, 98
px, 85

regua wanoci, 52
selektor uniwersalny, 51, 57
selektory elementw siostrzanych,
73, 74
selektory potomkw, 70
selektory atrybutw, 62, 65
$, 69
^, 68
~, 64, 65
atrybut class, 64
formatowanie czy, 70
identyfikatory, 65
selektory dzieci, 70
IE 6, 72
selektory podacuchw, 66
wartoci atrybutw, 66, 68
separatory kolumn, 131
skalowanie, 260
skalowanie w poziomie, 261
skew(), 264
skewX(), 264, 265
skewY(), 264, 265
skrcony zapis wasnoci, 53
wybircze przesanianie wasnoci,
55
skrypt IE9.js, 45
Sliding Doors, 135, 185
wersja z przycinaniem, 189
sprajty CSS, 183
sprawdzanie poprawnoci kodu, 82
stany czy, 185
stopka, 58, 161
stopniowe ulepszanie, 77
stosowanie obrysu, 116
strony przeznaczone do druku, 77
struktura tabeli, 208
styl obramowania, 86
style dla druku, 94
Super Ragged Floats, 197
supernieregularne ksztaty pywajce,
197

R
regua precyzji, 51, 57
regua wanoci, 52
resolution, 242
rgb(), 249
RGBA, 249
rgba(), 249
rogi owalne, 182
rotate(), 258, 259
Rundle Method, 93

S
Safari, 35
scale(), 260
scaleX(), 261
scaleY(), 262
scan, 242
scope, 212
Selectoracle, 38
selektory, 47
*, 57
regua precyzji, 51, 57

wity Graal, 142

T
tabele, 207
formatowanie kolumn przy uyciu
klas, 215
formatowanie komrek nagwka,
212
formatowanie wedug kolumn, 213
formatowanie wybranych kolumn,
246
kolor ta kolumny, 215
mapy, 217
nagwek, 208
nagwki wierszy, 211
obramowanie kolumny, 215
pozycjonowanie zawartoci, 227
stopka, 208
struktura tabeli, 208
tre gwna, 208

271

SKOROWIDZ

272

tabele
wizualne oddzielenie nagwka
istopki od treci gwnej, 210
wykresy, 224
wyrwnanie zawartoci komrek,
208
tabele kolorw HSL, 251
table, 208
tbody, 208, 209
techniki
boxpunch, 174
clearfix, 125
faszywe kolumny, 132
Fluid Grids, 146
IR, 92, 93
Liquid Bleach, 135
Sliding Doors, 185
stopniowe ulepszanie, 77
text-align, 208
text-indent, 93, 99
tfoot, 209
th, 211
scope, 212
thead, 208, 209
title, 40
ta dokumentu, 110
tr, 208
transform, 258, 265
matrix(), 267
rotate(), 258, 259
scale(), 260
scaleX(), 261
scaleY(), 260, 262
skew(), 264
skewX(), 264, 265
skewY(), 264, 265
translate(), 262
transform-origin, 259
translacja, 262
translate(), 262, 264
tre generowana, 77
tworzenie
arkusze stylw dla druku, 95
mapy z danych tabelarycznych, 217
wykresy, 224

U
ujemne marginesy, 176
ukad normalny, 154
ukady, 115
clearfix, 125
faszywe kolumny, 132
Fluid Grids, 146
Holy Grail, 142
jedyny suszny ukad, 138
kolumny, 128
Liquid Bleach, 135
obramowanie, 116
obrysy, 116
One True Layout, 138
pynne siatki, 146
pozycjonowanie na sztywno
nagwkw i stopek, 161
pozycjonowanie stae, 161
pozycjonowanie w kontekcie, 156

separatory kolumn, 131

wity Graal, 142
ujemne marginesy w ukadzie
normalnym, 154
ukad oparty na jednostkach em,
150
ukady dwukolumnowe, 128
ustawianie blokw na rodku, 118
wielokolumnowe pynne ukady, 135
zmiana liczby kolumn, 241
ukady trzykolumnowe, 129, 237, 238
wskie ekrany, 238
ukrywanie elementw, 91
umieszczanie
elementy pywajce w pywajcym
kontenerze, 123
fragmenty treci w jednej linii, 154
cza poza nagwkiem, 159
Unicode, 76
URL, 66, 67
ustawianie blokw na rodku, 118

V
video, 235
visibility, 89, 214

W
walidacja poprawnoci kodu, 82
walidator HTML W3C, 82
wartoci atrybutw, 66, 67, 68
wcicia list, 98
wcity cytat blokowy, 176
Web Developer, 24
identyfikatory, 27
Informacje, 25, 27
klasy, 27
Narzdzia, 27, 28
wyczanie doczonych arkuszy
stylw, 26
Zaznacz, 27
zaznaczanie elementw, 27, 28
WebInspector, 35
informacje o polu elementu, 36
Programowanie, 35
style nadane, 35, 36
-webkit-border-radius, 181
-webkit-box-shadow, 253
-webkit-transform, 258
widoczno elementu, 89
width, 118, 122, 226, 242
wiele obrazw w tle elementw, 254
wielokolumnowe pynne ukady, 135
wielopoziomowe menu rozwijane, 172
wasnoci pisma, 83
wskazywanie identyfikatora
fragmentu, 50
wstawianie
adresy URL do stylw dla druku, 77
tre na pocztku elementw
listy, 75
znaki za pomoc specjalnych
kodw, 76
wybircze przesanianie wasnoci
wzapisie skrconym, 55

wybr elementw dzieci, 71

wybr podacucha na kocu
wartoci atrybutu, 69
wybr podacucha na pocztku
wartoci atrybutu, 68
wycinanie list, 99
wydzielanie elementu, 175
elementy z obramowaniem, 176
wyjcie poza kontener, 158
wykresy, 224
formatowanie kontenerw
supkw, 227
legenda, 231
supki, 228
wyrwnanie szerokoci supkw, 230
wyczanie widocznoci elementu, 89
wyczanie wywietlania elementw, 88
wyrwnanie obrazu z pierwszym
wierszem tekstu elementu, 102
wyrnianie elementu docelowego, 50
wyrzucanie elementw poza ekran, 90
wyskakujce okienka, 171
wysoko linii, 83
wysuwanie elementw poza
kontenery, 155
wysyanie nagwkw HTTP, 113
wyrodkowanie elementu
wkontenerze, 118
wywietlanie elementw, 88

X
XRAY, 37

Z
zakadki, 185, 186, 187
zanikajce to, 51
zaokrglanie rogw, 177
CSS 3, 181
zapis skrcony wartoci, 53
zapytania o media, 237
not, 241
only, 241
przecinki, 241
skadniki, 242
zastpowanie tekstu, 92
zerowanie stylw, 42
z-index, 161
zmiana koloru markerw, 101
zmiana liczby kolumn, 241
znieksztacenie, 264
zwielokrotnienie obrazw w tle, 108