css.-kaskadowe-arkusze-stylow.-przewodnik-encyklopedyczny.-wydanie-iii- full.pdf

CSS. Kaskadowe arkusze

encyklopedyczny.

Wydanie III

Autor: Eric A. Meyer

TĀumaczenie: Anna Trojan

ISBN: 978-83-246-0956-7

TytuĀ ory ginaĀu: CSS: The Definitive Guide

Format: B5, stron: 528

Wydawnictwo Helion

ul. Koľciuszki 1c

44-100 Gliwice

tel. 032 230 98 63

e-mail: helion@helion.pl

Kompendium wiedzy o kaskadowych arkuszach stylw

¤ Opis struktury arkusza stylw

¤ Sposoby definiowania charakterystyk czcionek

¤ Tworzenie efektownych interfejsw uŃytkownika

¤ Pozycjonowanie elementw

Kaskadowe arkusze stylw (CSS), to technologia, ktra zrewolucjonizowaĀa proces tworzenia

witryn internetowych. Projektanci stron WWW dostali do rķki potķŃne narzķdzie pozwalajĴce

na definiowanie wyglĴdu tekstu, tabel, ramek, ĀĴczy i innych elementw dokumentu za

pomocĴ prostych parametrw zamieszczonych w odrķbnym pliku lub wydzielonym miejscu

kodu strony. Dziķki arkuszom stylw moŃliwe jest caĀkowite rozdzielenie procesu edycji treľci

strony od okreľlania jej aspektw typograficznych i kolorystycznych, co niezwykle uĀatwia

dostosowanie serwisu WWW do przeglĴdania na rŃnych urzĴdzeniach Ï monitorach

komputerw, wyľwietlaczach telefonw komrkowych i terminali Blackberry.

KsiĴŃka â CSS. Kaskadowe arkusze stylw. Przewodnik encyklopedyczny. Wydanie III Ò to

kompleksowe łrdĀo informacji o wszystkich aspektach stosowania kaskadowych arkuszy

stylw zgodnie z najnowszymi specyfikacjami konsorcjum W3C Ï CSS2 oraz CSS2.1.

CzytajĴc jĴ, dowiesz siķ, jak definiowaě style dla tekstu, formatowaě tabele i tworzyě

funkcjonalne interfejsy uŃytkownika. Poznasz rŃnice pomiķdzy elementami pĀywajĴcymi

i pozycjonowanymi, zasady stosowania jednostek miar w definicjach stylw oraz metody

przystosowywania treľci i ukĀadu strony do druku czy odczytywania przez oprogramowanie

uĀatwiajĴce korzystanie z sieci osobom niepeĀnosprawnym. Znajdziesz tu takŃe informacje

o tym, ktre elementy specyfikacji CSS sĴ obsĀugiwane przez przeglĴdarki obecne dziľ

na rynku.

¤ ÿĴczenie stylw z dokumentami XHTML

¤ Stosowanie selektorw

¤ Struktura definicji stylw

¤ Jednostki miary stosowane w definicjach stylw

¤ Korzystanie z rŃnych krojw czcionek

¤ Formatowanie tekstu

¤ Marginesy i obramowania

¤ Kolory

¤ Pozycjonowanie elementw

¤ Korzystanie z tabel

¤ Definiowanie stylw dla mediw nieekranowych

Wykorzystaj doľwiadczenie Erica Meyera i poznaj wszystkie aspekty stosowania CSS

stylw. Przewodnik

Spis treści

Przedmowa ....................................................................................................................9

1. CSS i dokumenty .......................................................................................................... 15

Upadek Internetu

CSS przychodzi na ratunek

Elementy

Łączenie CSS i XHTML

Podsumowanie

2. Selektory ...................................................................................................................... 37

Podstawowe reguły

Grupowanie

Selektory klas oraz identyfikatorów

Selektory atrybutów

Wykorzystywanie struktury dokumentu

Pseudoklasy oraz pseudoelementy

Podsumowanie

3. Struktura oraz kaskada ............................................................................................... 73

Specyficzność

Dziedziczenie

Kaskada

Podsumowanie

4. Wartości oraz jednostki ............................................................................................... 87

Wartości liczbowe

Wartości procentowe

Kolory

Jednostki długości

Adresy URL

Jednostki CSS2

101

Podsumowanie

102

5. Czcionki ...................................................................................................................... 103

Rodziny czcionek

104

Waga czcionki

108

Rozmiar czcionki

114

Style i warianty

121

Rozciąganie i dostosowywanie czcionki

125

Właściwość font

127

Dobieranie czcionek

132

Podsumowanie

134

6. Właściwości tekstu .....................................................................................................137

Wcięcia oraz wyrównanie poziome

137

Wyrównanie w pionie

142

Odstępy pomiędzy słowami oraz literami

151

Transformacja tekstu

154

Dekoracja tekstu

156

Cień tekstu

160

Obsługa białych znaków

161

Kierunek tekstu

163

Podsumowanie

165

7. Podstawowe formatowanie wizualne ..................................................................... 167

Podstawowe pojemniki

167

Elementy blokowe

170

Elementy wewnętrzne

188

Zmiana wyświetlania elementu

207

Podsumowanie

214

8. Dopełnienie, obramowanie oraz marginesy ............................................................ 215

Podstawowe pojemniki elementów

215

Marginesy

219

Obramowanie

231

Dopełnienie

245

Podsumowanie

251

9. Kolory i tła .................................................................................................................. 253

Kolory

253

Kolory pierwszego planu

254

Tło

260

Podsumowanie

287

6 |

Spis treści

10. Pływanie oraz pozycjonowanie ................................................................................289

Pływanie

289

Pozycjonowanie

307

Podsumowanie

342

11. Układ tabel .................................................................................................................343

Formatowanie tabel

343

Obramowanie komórek tabeli

355

Rozmiar tabeli

363

Podsumowanie

372

12. Listy oraz zawartość generowana ............................................................................ 373

Listy

373

Zawartość generowana

381

Podsumowanie

395

13. Style interfejsu użytkownika .................................................................................... 397

Czcionki oraz kolory systemowe

397

Kursory

402

Obrysy

406

Podsumowanie

412

14. Medianieekranowe ................................................................................................... 413

Przydzielanie arkuszy stylów dla określonego medium

413

Media stronicowe

414

Style dźwiękowe

431

Podsumowanie

448

A Przewodnik po właściwościach ............................................................................... 449

B Selektory, pseudoklasy oraz pseudoelementy .........................................................493

C Przykładowy arkusz stylów HTML 4 ......................................................................... 501

Skorowidz .................................................................................................................505

Spis treści |

ROZDZIAŁ 10.

Pływanie oraz pozycjonowanie

CSS rzeczywiście umożliwia atrakcyjny wygląd zawartości dokumentu dzięki zmianom czcio-

nek, tła i pozostałych elementów, jednak jak można osiągnąć podstawowe możliwości wpły-

wające na układ elementów? Dzieje się to dzięki pływaniu (ang. floating ) oraz pozycjonowaniu

(ang. positioning ). Są to narzędzia, które pozwalają uzyskać układ kolumnowy, nakładać jeden

fragment dokumentu na drugi i, ogólnie mówiąc, otrzymać wszystko to, do czego przez długie

lata wykorzystywane były ogromne ilości tabel.

Idea przyświecająca pozycjonowaniu jest względnie prosta. Pozycjonowanie pozwala dokładnie

określić, w którym miejscu powinien znajdować się pojemnik elementu w stosunku do miej-

sca, w jakim normalnie by się pojawił — lub w stosunku do elementu rodzica, innego ele-

mentu albo nawet względem samego okna przeglądarki. Możliwości tej cechy są jednocześnie

i oczywiste, i zaskakujące. Nie będzie zaskakującą wiadomością to, że przeglądarki imple-

mentują ten element CSS2 o wiele lepiej od innych.

Z kolei pływanie pojawiło się już w CSS1 — w oparciu o możliwość dodaną przez Netscape

we wczesnych latach istnienia Internetu. Pływanie nie jest dokładnie pozycjonowaniem, jednak

z pewnością nie należy również do standardowego, normalnego układu. W dalszej części ni-

niejszego rozdziału zostanie wytłumaczone, na czym ono dokładnie polega.

Pływanie

Koncepcja elementów pływających (ang. floated elements ) jest z pewnością znana. Już od czasu

Netscape 1 możliwe było zadeklarowanie — na przykład — <img src="b5.gif" align="right">

w celu uzyskania pływających obrazków. Powodowało to, że obrazek „spływał” na prawą

stronę i pozwalał na to, by inna treść (taka jak tekst) „opływała” go. Nazwa „pływanie” po-

chodzi zresztą z dokumentu Extensions to HTML 2.0 , w którym napisano:

Dodatki do opcji ALIGN wymagają dużej dozy wyjaśnień. Na początek — wartości „left”

oraz „right”. Obrazki z takim wyrównaniem stanowią zupełnie nowy, pływający typ obrazków.

W przeszłości możliwe było jedynie uzyskanie pływających obrazków oraz w niektórych

przeglądarkach również tabel. CSS z kolei pozwala na to w przypadku dowolnego elementu,

od obrazków i akapitów aż po listy. W CSS takie zachowanie można uzyskać dzięki właści-

wości float .

289

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika: