css.-kaskadowe-arkusze-stylow.-przewodnik-encyklopedyczny.-wydanie-iii- full version, ebooki3
[ Pobierz całość w formacie PDF ]
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. Media nieekranowe ................................................................................................... 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
|
7
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
float
Wartości:
left
|
right
|
none
|
inherit
Wartość początkowa:
none
Stosuje się do:
Wszystkich elementów
Dziedziczona:
Nie
Wartość wyliczona:
Jak określono
Żeby na przykład uzyskać obrazek pływający do lewa, można wykorzystać poniższy kod:
<img src="b4.gif" style="float: left;" alt="b4">
Jak wyraźnie widać na rysunku 10.1, obrazek „spływa” do lewej strony okna przeglądarki,
natomiast tekst go opływa. Dokładnie tego można się było spodziewać.
Rysunek 10.1. Pływający obrazek
W przypadku elementów pływających w CSS pojawiają się pewne interesujące kwestie.
Elementy pływające
Kiedy ma się do czynienia z elementami pływającymi, należy pamiętać o kilku sprawach. Po
pierwsze, element pływający jest w pewnym sensie wyłączany z normalnego układu doku-
mentu, choć nadal na niego wpływa. W sposób całkowicie unikalny dla CSS elementy pły-
wające istnieją jakby na swojej własnej płaszczyźnie, jednak w dalszym ciągu wpływają na
resztę dokumentu.
Ten wpływ bierze się z faktu, iż kiedy element jest pływający, pozostała treść dokumentu
opływa go. Jest to zachowanie znane z pływających obrazków, jednak tak samo dzieje się na
przykład w przypadku pływającego akapitu. Na rysunku 10.2 widać ten efekt dość wyraźnie
dzięki marginesowi dodanemu do pływającego akapitu:
p.aside {float: right; width: 15em; margin: 0 1em 1em; padding: 0.25em; border: 1px
solid;}
Jedną z pierwszych interesujących kwestii, na które warto zwrócić uwagę, jest fakt, iż margi-
nesy wokół elementów pływających nie ulegają składaniu. Jeśli elementem pływającym jest
obrazek z marginesami o wartości dwudziestu pikseli, wokół tego obrazka znajdzie się pusta
przestrzeń o szerokości co najmniej dwudziestu pikseli. Jeśli inne elementy przylegające do
tego obrazka — zarówno w poziomie, jak i w pionie — również mają marginesy, te marginesy
nie będą się składać z marginesami pływającego obrazka, jak widać na rysunku 10.3:
p img {float: left; margin: 25px;}
290
|
Rozdział 10. Pływanie oraz pozycjonowanie
[ Pobierz całość w formacie PDF ]