IDZ DO

PRZYKADOWY ROZDZIA
SPIS TRECI

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

Wydawnictwo Helion
ul. Chopina 6
44-100 Gliwice
tel. (32)230-98-63
e-mail: helion@helion.pl

CSS. Kaskadowe
arkusze stylw.

Przewodnik encyklopedyczny
Autor: Eric A. Meyer
ISBN: 83-7197-520-1
Tytu oryginau: Cascading Style Sheets. The
Definitive Guide
Jest to najnowsza ksika z serii przewodnikw encyklopedycznych OReilly
o tworzeniu stron internetowych, w skad ktrej wchodz rwnie takie pozycje, jak:
HTML: The Definitive Guide, JavaScript: The Definitive Guide, Dynamic HTML: The
Definitive Guide, Web Design in a Nutshell
Kaskadowe arkusze stylw (CSS) z pewnoci zaznacz swoje istnienie w Internecie.
Przy dobrych implementacjach w Internet Explorerze 5.0 i Operze 3.6 i obsudze CSS1
w przegldarce Netscape Mozilla, CSS szybko stanie si uytecznym, niezawodnym
i mocnym narzdziem dla autorw stron WWW.
CSS jest zaakceptowan przez W3C metod wzbogacania wygldu witryn. Ksika
zawiera peny, szczegowy przegld aspektw CSS1 i pozycjonowania CSS, a take
przedstawia pokrtce CSS2. Dokadnie zbadano kad waciwo i opisano jej
wspdziaanie z innymi waciwociami; podano take informacje o tym, jak unikn
czstych pomyek interpretacyjnych.
Jest to pierwsza pozycja, w ktrej opisano obsug CSS w poszczeglnych
przegldarkach, nie poprzestajc na oglnych i teoretycznych wyjanieniach. Zarwno
dla autorw stron, jak i programistw ksika ta jest penym przewodnikiem
efektywnego stosowania CSS.
Ksika jest take adresowana do pocztkujcych autorw stron, ktrzy ju rozpoczli
nauk znacznikw i atrybutw HTML. Pozwoli im nie powtarza bdw poprzednikw
i osign wymierne korzyci z poprawnego implementowania CSS.







  


Upadek chway Sieci ............................................................................................................... 13
CSS na ratunek......................................................................................................................... 15
Ograniczenia CSS .................................................................................................................... 19
czne uycie CSS i HTML.................................................................................................... 21
Podsumowanie ......................................................................................................................... 28


 


Podstawowe reguy .................................................................................................................. 32
Grupowanie.............................................................................................................................. 35
Selektory klasy i identyfikatora ............................................................................................... 41
Pseudoklasy i pseudoelementy ................................................................................................ 45
Struktura................................................................................................................................... 51
Dziedziczenie........................................................................................................................... 55
Specyficzno .......................................................................................................................... 57
Kaskada.................................................................................................................................... 61
Klasyfikacja elementw........................................................................................................... 64
Podsumowanie ......................................................................................................................... 68


  


Kolory ...................................................................................................................................... 69
Jednostki dugoci.................................................................................................................... 78
Wartoci procentowe ............................................................................................................... 84
URL ......................................................................................................................................... 84



Jednostki CSS2 ........................................................................................................................ 86
Podsumowanie ......................................................................................................................... 87


 !" 

#
Manipulowanie tekstem........................................................................................................... 89
Podsumowanie ....................................................................................................................... 123




$%
Rodziny czcionek................................................................................................................... 126
Waga czcionki........................................................................................................................ 132
Wielko czcionki.................................................................................................................. 139
Style i warianty ...................................................................................................................... 145
Skrcony zapis waciwo font....................................................................................... 149
Dobieranie czcionek .............................................................................................................. 152
Podsumowanie ....................................................................................................................... 154


&"

%%
Kolory .................................................................................................................................... 156
Zoone ta ............................................................................................................................. 169
Podsumowanie ....................................................................................................................... 197



"  


Pudeka podstawowych elementw....................................................................................... 199
Marginesy czy dopenienia? .................................................................................................. 202
Marginesy .............................................................................................................................. 203
Ramki..................................................................................................................................... 217
Dopenienie............................................................................................................................ 232
Pywanie i tamowanie............................................................................................................ 237
Listy ....................................................................................................................................... 248
Podsumowanie ....................................................................................................................... 254


'   

$%%
Podstawowe pudeka ............................................................................................................. 255
Elementy blokowe ................................................................................................................. 256
Elementy pywajce............................................................................................................... 271
Elementy wewntrzne............................................................................................................ 281
Podsumowanie ....................................................................................................................... 295






( 

$ )
Pojcia oglne........................................................................................................................ 297
Pozycjonowanie wzgldne..................................................................................................... 317
Pozycjonowanie bezwzgldne ............................................................................................... 320
Pozycjonowanie ustalone....................................................................................................... 324
Zestawianie pozycjonowanych elementw w stos ................................................................ 326
Podsumowanie ....................................................................................................................... 330

 
$*+(+",


Zmiany w stosunku do CSS1................................................................................................. 331
Selektory CSS2 ...................................................................................................................... 333
Czcionki i tekst ...................................................................................................................... 345
Zawarto generowana .......................................................................................................... 347
Przystosowanie do rodowiska .............................................................................................. 351
Ramki..................................................................................................................................... 352
Tabele..................................................................................................................................... 352
Typy mediw i @-reguy....................................................................................................... 353
Podsumowanie ....................................................................................................................... 355


 (

%
Projekty przebudowy ............................................................................................................. 359
Sztuczki i kruczki................................................................................................................... 377

 - .

#%
 /0 $
1

 
 !" 

 
 . ."2

3


3$

Chocia nasz wysiek podczas projektowania stron WWW moe skupia si gwnie na wybieraniu waciwych kolorw i nadawaniu stronie najlepszego wygldu, to jednak najwicej czasu powicamy martwic si o wygld i rozmieszczenie tekstu. Obawy te spowodoway wprowadzenie
do HTML, znacznikw takich jak <FONT> i <CENTER>, ktre pozwalaj na pewn form kontroli tego, jak tekst bdzie wyglda i jak bdzie rozmieszczony.
Wanie dlatego dua cz CSS dotyczy waciwoci wpywajcych na tekst w taki czy inny sposb. Waciwoci w CSS1 podzielone s na dwie czci: waciwoci tekstu i waciwoci czcionek. Ten rozdzia powicony jest pierwszej grupie. W nastpnym rozdziale podejmiemy temat
czcionek s one na swj sposb dosy skomplikowane, wic zasuguj na osobne omwienie.

Mona zastanawia si, jaka jest rnica pomidzy tekstem a czcionkami. Ujmujc to prosto
tekst jest treci. Czcionka uyta do jego wywietlenia jest tylko jednym ze sposobw na zmian wygldu tekstu. Zanim zajmiemy si w czcionkami, powinnimy omwi kilka prostszych sposobw wpywania na wygld tekstu. Poza tym pewne rzeczy, ktrymi zajmiemy si tutaj, przydadz si przy omawianiu waciwoci czcionek, wic wikszy sens ma omwienie waciwoci
tekstu w pierwszej kolejnoci.
Dziki waciwociom tekstu mona wpyn na pozycj tekstu wzgldem reszty linijki, ustawi
indeks grny, podkrelenie i zmieni wielko liter. Mona nawet w pewnym stopniu symulowa
uycie klawisza tabulatora z maszyny do pisania.

 
   
 
Najlepiej zacz od tego, jak mona wpyn na poziome umiejscowienie tekstu w linii. Nie jest to
tym samym, czym jest rzeczywiste pozycjonowanie, w ktrym tekst ustawiany jest wzgldem samej strony. O tych waciwociach mylmy raczej jak o sposobach wpynicia na rozmieszczenie
linii tekstu, tak jak robimy to piszc raport lub tworzc biuletyn.









Przy formatowaniu tekstu w Internecie jednym z najbardziej poszukiwanych efektw jest wcinanie
pierwszej linii akapitu (kolejnym jest ch wyeliminowania pustej linii pomidzy akapitami, co
omwimy w rozdziale 7.). Niektrzy autorzy stron rozwizuj ten problem poprzez wstawienie
maego przezroczystego obrazka przed pierwsz liter akapitu (popychajc w ten sposb tekst dalej). Inni uywaj zupenie niestandardowego znacznika SPACER. Dziki CSS istnieje lepszy sposb na uzyskanie podobnego efektu.







<dugo> | <procenty>


 



tak





elementw blokowych

Uwaga: wartoci procentowe odnosz si do szerokoci elementu rodzica.

Kady element uywajcy wcicia tekstu (text-indent) moe mie wcit pierwsz lini
o dan dugo (nawet ujemn). Najczstszym uyciem tej waciwoci jest wcicie pierwszej linii
akapitw:
P {text-indent: 0.25in;}

Powysza regua mwi, e wcicie pierwszej linii kadego akapitu bdzie wynosio wier cala,
tak jak to przedstawiono na rysunku 4.1.



 

Waciwo text-indent moe by nadana kademu elementowi blokowemu, takiemu jak

PRE, H1 czy BLOCKQUOTE. Nie mona nada jej elementom stanowicym cz cigu tekstu
(inline elements), takim jak STRONG lub A, tak samo jak nie mona uywa jej w przypadku elementw podmienianych, takich jak obrazki (co oczywicie ma sens). Jeli jednak w pierwszej linii
elementu blokowego (np. akapitu) znajdzie si obrazek, zostanie on przesunity razem z tekstem,
tak jak to przedstawiono na rysunku 4.2.
Mona zastosowa ujemne wartoci wcicia tekstu, co moe zosta uyte na wiele interesujcych
sposobw. Najbardziej popularnym jest wiszce wcicie, gdzie pierwsza linia jest wysunita
z lewej strony akapitu, tak jak to przedstawiono na rysunku 4.3.
P {text-indent: -4em;}

  






  



  

Jak wida na rysunku 4.3, istnieje niebezpieczestwo przy ustawianiu ujemnych wartoci dla wcicia
tekstu. Pierwsze dwa sowa (This is) zostay obcite przez lewy brzeg okna przegldarki. Aby
przy wywietlaniu zapobiec takim problemom, doradza si uycie marginesu, ktry pomieci
ujemne wcicie, tak jak zrobiono to w kolejnym przykadzie (rysunek 4.4):
P {text-indent: -4em; padding-left: 4em;}



  

Ujemne wcicie czasami moe zosta uyte w korzystny sposb. Rozwamy nastpujcy przykad, zademonstrowany na rysunku 4.5. Dodajmy obrazek do tej mieszanki:
P.hang {text-indent: -30px;}
<P CLASS="hang"><IMG SRC="floater.gif" WIDTH="30px" HEIGHT="60px"
ALIGN="left" ALT="Floated">This paragraph has a negatively indented
first line, which overlaps the floated image which precedes the text.
Subsequent lines do not overlap the image, since they are not
indented in any way.</P>

Przy uyciu tej prostej techniki mona zrealizowa wiele ciekawych projektw. Rysunek 4.6
przedstawia przykad tekstu, w ktrym pierwsza linia zostaa wcita o 40px.










!"#   


$
  %"# 

Do okrelenia gbokoci wcicia pierwszej linii akapitu mona stosowa dowolne jednostki. Dodatkowo mona uywa wartoci procentowych. W takim przypadku procenty odnosz si do szerokoci elementu rodzica wcinanego elementu. Jeli zatem ustawimy warto wcicia na 5%, to
pierwsza linia odnonego elementu zostanie wcita na 5% szerokoci elementu rodzica, tak jak to
przedstawiono na rysunku 4.7.
DIV {width: 400px;}
P {text-indent: 5%;}
<DIV>
<P>This paragraph is contained inside a DIV which is 400px wide,
so the first line of the paragraph is indented 20px (400 * 5% = 20).
This is because percentages are computed with respect to the width
of the parent element.</P>
</DIV>


&
  '% #% 

Wcicia bd nadane jedynie pierwszej linii elementu, nawet jeli wstawimy znaczniki koca linii
(BR). Przedstawia to rysunek 4.8:
DIV {width: 400px;}
P {text-indent: 5%;}
<DIV>

  




<P>This paragraph is contained inside a DIV which is 400px wide,

so the first line of the paragraph is indented 20px (400 * 5% = 20).
Subsequent lines within the same element are not indented,<BR>
even if they follow a<BR>
line-break.</P>
<P>Once again, the first line of this paragraph is indented by 2s0px,
but other lines in the same element are not.</P>
</DIV>


(
  ) '

Ciekaw cech text-indent jest to, e jest waciwoci dziedziczon, ale dziedziczona jest
wyliczona warto, a nie warto zadeklarowana. Wemy za przykad nastpujcy kod:
BODY {width: 500px;}
DIV {width: 500px; text-indent:10%;}
P {width: 200px;}
<DIV>
This first line of the DIV is indented by 50 pixels.
<P>This paragraph is 200px wide, and the first line of the paragraph
is indented 50px. This is because computed values for 'text-indent'
are inherited, instead of the declared values.</P>
</DIV>

Pomimo e akapit ma szeroko tylko 200 pikseli, jego pierwsza linia jest wcita o 50 pikseli (tak
jak na rysunku 4.9), czyli odziedziczon warto text-indent.


*
+,,   






 
  
Jeszcze bardziej podstawow waciwoci ni text-indent jest waciwo text-align
(wyrwnanie tekstu), ktra okrela, w jaki sposb linie tekstu w elemencie maj by wyrwnane
wzgldem siebie. Istniej cztery wartoci; pierwsze trzy s do proste, ale czwarta mieci w sobie
par zawioci.


 




left | center | right | justify


 

zaley od przegldarki



tak





elementw blokowych

Najszybszym sposobem na zrozumienie tego, jak te wartoci dziaaj, jest przeledzenie rysunku 4.10.


-
.""  /0'1

Wyrwnanie tekstu jest kolejn waciwoci nadawan wycznie elementom blokowym, takim
jak akapity. Nie mona wyrodkowa odnonika w linii, w ktrej si znajduje, bez wyrwnania
pozostaej czci linii (na czym nam nie zaley).
Regua text-align: center moe by uyta do zastpienia operacji wykonywanych przez
znaczniki CENTER, tak jak przedstawiono to na rysunku 4.11.
H1 {text-align: center;}



,%2 "  /0'1

  




Mona take spowodowa wyrodkowanie elementw z umieszczonym wewntrz nich tekstem i rysunkami. Zadziaa to dokadnie tak jak znacznik CENTER, w taki sposb, jaki przedstawia nastpujcy kod i rysunek 4.12:
DIV.first {text-align: center;}
<H1>An Un-centered H1 Element</H1>
<DIV CLASS="first">
<P>
This is a paragraph without any alignment styles applied to it.
However, it is contained within a DIV element which has alignment
set, and this alignment will inherit into the paragraph. This will
also affect any images which appear within the DIV, such as this one
<IMG SRC="star.gif"> or the next one.
</P>
<IMG SRC="floater.gif">
</DIV>



,"  #/0'1 ,#   #1

Jeli jednak chcemy wyrodkowa sam obrazek, text-align nie jest poprawnym sposobem.
Majc poniszy kod uzyskamy rezultaty widoczne na rysunku 4.13:
IMG {text-align: center;}



" /0'1'








Obrazek nie zosta wyrodkowany, gdynie jest elementem blokowym. Jedynym sposobem na to,
aby wyrodkowa obrazek przy uyciu text-align jest objcie go elementem DIV, ktry ma
ustawione wyrodkowanie zawartoci:
<DIV STYLE="text-align: center;">
<IMG SRC="blyszczacy.gif" ALT="Byszczcy obiekt">
</DIV>

Jak wida na rysunku 4.14, taka deklaracja dziaa poprawnie.



31,

Dla jzykw zachodnich (czytanych od lewej do prawej strony) wartoci domyln text-align
jest left (z tekstem wyrwnanym do lewego marginesu i postrzpionym prawym marginesem
inaczej znane jako tekst z lewej do prawej). Inne jzyki, takie jak arabski czy hebrajski,
domylnie bd wyrwnane do prawej, poniewa pisze si w nich z prawej do lewej strony. center daje oczekiwany efekt powoduje wyrodkowanie kadej linii wewntrz elementu, ktremu
jest nadane.
Przy justify (justowanie) naley rozway kilka spraw. Jak to przedstawia rysunek 4.15, wyjustowany tekst jest tak sformatowany, e koce kadej linii znajduj si na wewntrznych brzegach
elementu rodzica. Jest to osignite poprzez zmian odstpw pomidzy sowami i literami w taki
sposb, aby kada linia bya dokadnie tej samej dugoci. Efekt ten spotykany jest czsto w wiecie druku (np. ksikach), ale przy CSS wchodz w gr jeszcze inne zastosowania.





CSS nie okrela sposobu rozcigania justowanego tekstu w celu wypenienia przestrzeni pomidzy
lewym i prawym brzegiem elementu rodzica, dlatego niektre przegldarki mog dodawa odstpy tylko pomidzy sowami, a inne mog dodawa odstpy midzy literami. Moliwe jest take to,

  



e niektre przegldarki zmniejsz odstpy w niektrych liniach i zagszcz tekst bardziej ni

zwykle. Wszystko to moe wpyn na wygld elementu i moe nawet zmieni jego wysoko
zaley to od tego, na ile linii tekst zostanie podzielony przez przegldark (rysunek 4.16).


$
42' 

Pojawia si rwnie inny problem CSS przemilcza sposb dzielenia wyrazw. Dzielenie tekstu,
czyli uycie cznika do podzielenia wyrazu pomidzy dwie linie, pozwala na zmniejszenie odstpw midzy wyrazami, poprawiajc tym samym wygld linii (rysunek 4.17).


&
5,'
Dzielenie wyrazw nie jest zdefiniowane w CSS, poniewa rne jzyki maj rne zasady
dzielenia wyrazw. Zamiast prbowa improwizowa tworzc zestaw regu, ktry byby
zapewne i tak niekompletny, specyfikacja po prostu unika tego problemu. Pozwala to
przegldarkom na uywanie wasnych regu dzielenia wyrazw i z czasem ulepszanie
ich bez przeszkd w postaci specyfikacji CSS.


!





Skoro w CSS nie ma funkcji odpowiadajcej za dzielenie wyrazw, przegldarki przewanie nie
bd wykonywa automatycznego dzielenia wyrazw. A zatem wyjustowany tekst bdzie raczej
mniej atrakcyjny w CSS ni w druku. Zwaszcza wtedy, gdy elementy s tak wskie, e w kadej
linii jest tylko kilka sw, tak jak to przedstawiono na rysunku 4.18. Oczywicie mona justowa
tekst, ale naley pamita o wadach tej metody.


(
5#% ,'
Prawie kada przegldarka obsugujca CSS poradzi sobie z wikszoci wartoci textalign, jednak czsto zawodzi przy justify. Netscape Navigator 4 obsuguje justowanie,
ale popenia przy tym do duo bdw. Najczciej zawodzi wewntrz tabelek. Internet
Explorer 4.x nie obsuguje justowania, ale Internet Explorer 5 i Opera 3.6 ju je obsuguj.

   

Aby zmieni tempo, porozmawiajmy o waciwoci white-space, ktra moe mie ogromny
wpyw na sposb wywietlania tekstu.

  




 



pre | nowrap | normal


 

normal



nie





elementw blokowych

Uywajc tej waciwoci mona wpyn na to, jak przegldarka traktuje odstpy midzy sowami i liniami tekstu. HTML robi to w pewnym stopniu zamienia kady odstp na jedn spacj.
A zatem nastpujcy kod zostanie wywietlony tak, jak to przedstawiono na rysunku 4.19 (z tylko
jedn spacj pomidzy kadym sowem):
<P>This
paragraph
has
spaces
in it.</P>

many


*
'%'% 

Takie zachowanie moesz wymusi nastpujc deklaracj:

P {white-space: normal;}

Regua ta powie przegldarce, e ma postpowa tak, jak zawsze to robiy przegldarki (powinna zignorowa dodatkow pust przestrze). Wszystkie zbyteczne spacje i znaki koca wiersza
zostan przez przegldark pominite.
Jeli jednak zmienimy warto white-space na pre, pusta przestrze bdzie traktowana tak,
jakby elementy byy elementami PRE, w ktrych pusta przestrze nie jest ignorowana, jak to
przedstawiono na rysunku 4.20.
P {white-space: pre;}
<P>This
paragraph
has
spaces
in it.</P>

many


-
6% ,

Z waciwoci white-space ustawion na pre, przegldarka uwzgldni dodatkowe spacje

i znaki koca wiersza. Pod tym wzgldem i tylko pod tym wzgldem kady element moe
zachowywa si jak element PRE.







Istnieje jeszcze warto nowrap, ktra chroni tekst wewntrz elementu blokowego przed zawijaniem do nowej linii (za wyjtkiem uycia znacznikw koca linii <BR>). Jest to podobne do ustawienia w komrce tabelki niezawijania wierszy poprzez <TD NOWRAP> z tym, e waciwo
white-space moe by nadana kademu elementowi blokowemu, nie tylko tabelkom. Dlatego
moemy uzyska efekty, takie jak przedstawiono na rysunku 4.21:
<P STYLE="white-space: nowrap;">This paragraph is not allowed to
wrap,which means that the only way to end a line is to insert a linebreak element. If no such element is inserted, then the line will go
forever,forcing the user to scroll horizontally to read whatever
can't be initially displayed <BR>in the browser window.</P>




1 %2 "  0% 

Waciwie white-space mona uy po to, aby zastpi atrybut nowrap w komrkach tabelki, jak zademonstrowano poniej (rysunek 4.22):
TD {white-space: nowrap;}
<TABLE><TR>
<TD>The contents of this cell are not wrapped.</TD>
<TD>Neither are the contents of this cell.</TD>
<TD>Nor this one, or any after it, or any other cell in this
table.</TD>
<TD>CSS prevents any wrapping from happening.</TD>
</TR></TABLE>



2 "  0% 7% ' ' 
Chocia white-space moe wydawa si waciwoci niesychanie uyteczn, nie
jest obsugiwana przez adn przegldark poza IE5 dla MacOS i pierwszymi prbnymi
wersjami Netscape 6. W innych przegldarkach nawet nie ma moliwoci uycia atrybutu
nowrap w komrkach tabelek, pomimo, e wydaje si to zachowaniem bardzo prostym
w obsudze.

  




W przeciwiestwie do rozmiaru czcionki (zagadnienie to omwimy w rozdziale 5.) wysoko linii
(line-height) odnosi si mniej wicej do dystansu wystpujcego midzy bazowymi liniami
pisma. Faktycznie waciwo ta ustala wielko, o ktr zwikszy si lub zmniejszy wysoko
pudeka kadego elementu si. W najprostszych przypadkach jest to sposb na zwikszenie (lub
zmniejszenie) pionowej przestrzeni wystpujcej pomidzy liniami tekstu, ale jest to mylco prosty sposb widzenia zasad dziaania waciwoci line-height. Jeli kto zna pakiety DTP, to
mona powiedzie, e line-height kontroluje interlini (ang. leading), bdc dodatkow
przestrzeni pomidzy liniami tekstu nad i pod polem czcionki. Rnica pomidzy wartoci
line-height i rozmiarem czcionki to interlinia.







<dugo> | <procenty> | <liczba> | normal


 

normal



tak





wszystkich elementw

Uwaga: wartoci procentowe obliczane s wzgldem rozmiaru czcionki elementu.

Mwic jzykiem technicznym kady element w linii generuje obszar elementu (ang. content
area), ktry zaley od rozmiaru czcionki. Obszar elementu generuje take pudeko, ktre przy
braku innych czynnikw powinno by dokadnie rwne obszarowi elementu. Jednak interlinia
tworzona przez line-height moe zwikszy lub zmniejszy wysoko pudeka. Wielko
interlinii dzieli si przez 2 i przesuwa grn i doln granic pudeka o otrzyman warto. W ten
sposb otrzymujemy pudeko o nowych wymiarach. Na przykad jeli obszar elementu ma wysoko 14 punktw, a line-height ustawione jest na 18 punktw, wtedy rnica (4 punkty) jest
dzielona na p i dodana na gr i d pudeka, co zwiksza jego rozmiar do wysokoci 18 punktw. Brzmi to jak okrna droga prowadzca do opisania dziaania wysokoci linii, ale istniej realne przyczyny takiego opisu. W rozdziale 8. znajdziemy jeszcze bardziej szczegowy opis.
Jeli uywamy domylnej wartoci normal, ilo przestrzeni rozcigajcej si pomidzy liniami
bdzie wynika z ustawie przegldarki. Zazwyczaj jest to liczba mieszczca si midzy 1,0 a 1,2
rozmiaru czcionki, ale moe by rna w rnych przegldarkach.
Dozwolone dugoci inne ni em i ex s zwykymi wymiarami dugoci (np. 0.2cm). Wystpuj
tu te same problemy, co zawsze: nawet jeli uyje si poprawnej wartoci (np. 4cm), przegldarka
(lub system operacyjny) moe niepoprawnie odwzorowa rzeczywiste wartoci. A zatem wywietlajc dokument na ekranie monitora, linijka zapewne nie wskae, e wysoko linii ma dokadnie
cztery centymetry. eby dowiedzie si czego wicej, przeczytaj rozdzia 3.
Wartoci procentowe (tak samo jak em i ex) s obliczane w stosunku do wielkoci czcionki elementu. Poniszy kod powinien by wzgldnie prosty, a rezultat widoczny jest na rysunku 4.23:







BODY {line-height: 14pt; font-size: 13pt;}

P.one {line-height: 1.2em;}
P.two {font-size: 10pt; line-height: 150%;}
P.three {line-height: 0.33in;}
<P>This paragraph inherits a 'line-height' of 14pt from the BODY,
as well as a 'font-size' of 13pt.</P>
<P CLASS="one">This paragraph has a 'line-height' of 16.8pt (14 *
1.2), so it will have slightly more line-height than usual.</P>
<P CLASS="two">This paragraph has a 'line-height' of 15pt (10 *
150%), so it will have slightly more line-height than usual.</P>
<P CLASS="three">This paragraph has a 'line-height' of 0.33in, so
it will have slightly more line-height than usual.</P>



!' #"  #'018'9

Wyniki staj si mniej przewidywalne, kiedy warto wysokoci linii jest dziedziczona z jednego
elementu blokowego na inny. Wyliczona warto wysokoci linii jest dziedziczona bez wzgldu
na to, jaki rozmiar czcionki moe by ustawiony dla potomka. Moe si to okaza problemem, tak
jak to przedstawiono na rysunku 4.24:
BODY {font-size: 10pt;}
DIV {line-height: 12pt;}
P {font-size: 18pt;}
<DIV>
<P>This paragraph's 'font-size' is 18pt, but the inherited 'lineheight' is only 12pt. This may cause the lines of text to overlap
each other by a small amount.</P>
</DIV>



4"':,2'  ;,%'

  



Istniej dwa rozwizania. Mona ustawia wysoko linii dla kadego elementu, ale nie jest to
rozwizanie zbyt praktyczne tym bardziej, e moe by wiele elementw wymagajcych takiego
podejcia. Drugim rozwizaniem jest ustawienie zwykej liczby, ktra w rzeczywistoci bdzie
stanowi wspczynnik skalujcy:
BODY {font-size: 10pt;}
DIV {line-height: 1.5;}
P {font-size: 18pt;}

Jeli uywamy liczby, dziedziczony jest wspczynnik skalujcy, a nie wyliczona warto. Wspczynnik nadany jest elementowi i wszystkim jego potomkom, a wic kady element ma wysoko
linii wyliczon wzgldem wasnego rozmiaru czcionki, jak to przedstawiono na rysunku 4.25:
BODY {font-size: 10pt;}
DIV {line-height: 1.5;}
P {font-size: 18pt;}
<DIV>
<P>This paragraph's 'font-size' is 18pt, and since the 'line-height'
set for the parent DIV is 1.5, the 'line-height' for this paragraph
is 27pt (18 * 1.5).</P>
</DIV>



+ %'%2 %" '# 1

Jak ju pisaem wczeniej chocia wydaje si, e line-height rozdziela dodatkow przestrze nad i pod kad lini tekstu w rzeczywistoci dodaje (lub odejmuje) pewn ilo na grze lub na dole obszaru elementu. To prowadzi do dziwnych rezultatw, gdy linia zawiera elementy z rn wielkoci czcionki. Na razie jednak pozostamy przy prostych przykadach.
Zamy, e domylna wielko czcionki dla akapitu wynosi 12pt i rozwamy nastpujc regu:
P {line-height: 16pt;}

Skoro dziedziczona wysoko linii 12-punktowego tekstu wynosi 12 punktw, powysza regua
oznajmia bdzie, e wok kadej linii tekstu w akapicie bd dodatkowe 4 punkty przestrzeni.
Te dodatkowe punkty, po podzieleniu na dwa, zostan dodane nad i pod kada lini tekstu. Wynikiem rozdzielenia dodatkowej przestrzeni jest dystans pomidzy liniami rwny 16pt.
Teraz przyjrzyjmy si troch bardziej zawiemu przypadkowi. Wemy nastpujcy przykad:
BODY {font-size: 10pt;}
P {font-size: 18pt; line-height: 23pt;}
BIG {font-size: 250%;}







<P>This paragraph's 'font-size' is 18pt, and the 'line-height' for

this paragraph is 23pt. However, a <BIG>larger element</BIG> within
the paragraph does not cause the value of 'line-height' to change,
which can lead to some interesting effects.</P>

Efekt przedstawiony na rysunku 4.26 moe wyglda jak wynik bdu przegldarki, ale tak nie
jest. Jest dokadnie tym, co powinna wywietli przegldarka.


$
 ''1

To jest jedyna dziwaczno wynikajca z uycia wysokoci linii. Na rysunku 4.27 wartoci line-height s dokadnie takie same dla kadej linii elementu (bez wzgldu na to jak rne mog
si wydawa). Ten fakt zostanie omwiony ju niedugo w podrozdziale Wyrwnanie pionowe.


&
# '

Na rysunku 4.27 rzeczywista warto wysokoci linii jest dla kadej linii taka sama. Mona wykorzysta fakt, e waciwo line-height moe zosta ustawiona dla kadego elementu (nie wyczajc elementw wewntrznych). Powrmy do naszego poprzedniego przykadu i wprowadmy
do niego jedn ma zmian poprzez dodanie line-height do stylw elementu BIG (zmienimy
rwnie wysoko linii dla P na 27pt). Bdzie to miao efekt widoczny na rysunku 4.28:
BODY {font-size: 10pt;}
P {font-size: 18pt; line-height: 27pt;}
BIG {font-size: 250%; line-height: 1em;}

  



<P>This paragraph's 'font-size' is 18pt, and the 'line-height' for

this paragraph is 27pt. A <BIG>larger element</BIG> within the
paragraph does not cause the line's height to change, but setting its
'line-height' does, which leads to some interesting effects.</P>


(
3'01,''1

Ustawienie wysokoci linii na 1em dla elementu BIG sprawi, e wysoko linii bdzie taka sama
jak wysoko tekstu elementu BIG. Da to taki sam efekt, jaki daway obrazki: zwikszy si wysoko caej linii tekstu tak, by poprawnie wywietli element w niej zawarty. W tym przypadku
efekt w duym stopniu jest taki sam, ale zawdziczamy go zwikszeniu wartoci line-height
wewntrznego elementu BIG (w przeciwiestwie do optycznej zmiany wysokoci linii ze wzgldu
na dopasowanie do rzeczywistego rozmiaru obrazka).
Powody takiego zachowania s raczej skomplikowane. Wicej informacji na temat sposobu formatowania elementw umieszczonych wewntrz tekstu znajdziemy w rozdziale 8.

  
Jak wynika z poprzedniego podrozdziau, wspczynnik skalujcy jest najlepszym sposobem na
uniknicie problemw zwizanych z dziedziczeniem, ktre mog pojawi si przy stosowaniu jednostek dugoci w wysokoci linii. Dlatego moe si wydawa, e uycie samej liczby jest zawsze
lepsze. Niestety, niekoniecznie tak jest. Internet Explorer 3 zinterpretuje wspczynnik skalujcy
jako ilo pikseli, a wynik bdzie taki, jak to przedstawiono na rysunku 4.29.


*
%" '# 2'01 ,2"%<=/%'

Zgodnie ze specyfikacj CSS przegldarki mog ustawi dowoln warto, ktr uwaaj za najlepsz dla domylnego sowa kluczowego normal, ale sugerowany przedzia zawiera si midzy







1,0 a 1,2 w zalenoci od uytej czcionki i od urzdzenia wywietlajcego. Wikszo przegldarek uywa wartoci bliszej prawej granicy przedziau, ale oczywicie moe to ulec zmianie
wraz z pojawianiem si innych przegldarek lub nowych wersji starszych przegldarek.


  
Wszystko wskazuje na to, e w pewnym stopniu znamy ju pojcie pionowego wyrwnania tekstu. Jeli kiedykolwiek uywalimy elementw SUP i SUB (indeksu grnego i dolnego) lub wywietlajc obrazek posuylimy si kodem <IMG SRC="foo.gif" ALIGN="texttop">,
to mona przyj, e mielimy ju do czynienia z wyrwnaniem pionowym. Waciwo CSS
vertical-align (wyrwnanie pionowe) pozwala na uycie wszystkich znanych nam ju sposobw wyrwnania stosowanych wewntrz tekstu. Mamy te do wyboru kilka nowych moliwoci.
Naley pamita o jednej rzeczy: vertical-align nie wpywa na wyrwnanie
zawartoci komrek tabel lub tekstu znajdujcego si wewntrz elementw blokowych.
CSS1 nie przewiduje duplikowania kodu, takiego jak <TD valign="top">.
Zmienia si to w CSS2; wicej informacji znajduje si podrozdziale Tabelki rozdziau 10.

Sprawdmy, czego moemy dokona za pomoc vertical-align (wyrwnanie pionowe).

Waciwo ta nadawana jest tylko elementom wewntrznym. Nie jest dziedziczona, chocia
obejmuje te elementy podmieniane, takie jak obrazki czy pola formularzy.


  




baseline | sub | super | bottom | text-bottom | middle |

top | text-top | <procenty>


 

baseline



nie





elementw wewntrznych

Uwaga: wartoci procentowe odnosz si do wysokoci linii elementu.

Waciwo vertical-align akceptuje kade z omiu sw kluczowych lub wartoci procentowe (ale nigdy nie robi tego jednoczenie). Sowa kluczowe to mieszanka znanych i nieznanych
sw: baseline (warto domylna), sub, super, bottom, text-bottom, middle, top
i text-top. Przeledzimy po kolei, jakie efekty daje stosowanie kadego z nich.



 

Waciwo vertical-align: baseline zmusza element do wyrwnania bazowych linii
pisma rodzica i potomka, czyli w sumie odpowiada za to, co zawsze robi przegldarki. Pokazuje
to poniszy kod i rysunek 4.30:

  



B {vertical-align: baseline;}
<P>The baseline of the <B>boldfaced text</B> is aligned with the
baseline of this paragraph.</P>


-
,'%

Ogldajc rysunek 4.30 nie zobaczymy nic innego ni to czego si spodziewalimy.

Jeli element, ktry wyrwnujemy w pionie, nie posiada bazowej linii tekstu gdy jest obrazkiem, polem formularza lub innym podmienianym elementem to dolny brzeg elementu jest wyrwnywany z bazow lini pisma rodzica, tak jak to przedstawiono na rysunku 4.31:
IMG {vertical-align: baseline;}
<P>The image found in this paragraph <IMG SRC="dot.gif" ALT="a dot">
has its bottom edge aligned with the baseline of the paragraph.</P>



#'#






Deklaracja vertical-align: sub powoduje, e element jest wywietlony jako indeks dolny.
Oglnie oznacza to, e linia bazowa elementu (lub dolny brzeg w przypadku elementw podmienianych) jest pooony niej w stosunku do bazowej linii pisma elementu rodzica. Jednak wielko
przesunicia nie jest okrelona w specyfikacji, dlatego moe by inna w ronych przegldarkach.
Jako e sub nie implikuje zmian w rozmiarze czcionki, nie powinien zmniejsza (lub powiksza)
indeksowanego tekstu. Tekst w elemencie indeksu dolnego powinien by domylnie tego samego
rozmiaru co tekst elementu rodzica, tak jak to przedstawiono na rysunku 4.32.
SUB {vertical-align: sub;}
<P>This paragraph contains <SUB>subscripted</SUB> text.</P>



,,'1

Oczywicie mona zmniejszy tekst poprzez uycie deklaracji font-size, ale tego rozwizania
nie bdziemy analizowa w naszej ksice.

!





Sowo super zachowuje si podobnie jak sub, ale w tym przypadku linia bazowa elementu (lub
dolny brzeg elementu podmienianego) jest podnoszony w stosunku do bazowej linii pisma rodzica. Odcinek, o jaki tekst zostanie podniesiony, zaley od przegldarki. adne zmiany w wielkoci
czcionki nie s wprowadzane. Zademonstrowano to na rysunku 4.33:
SUP {vertical-align: super;}
<P>This paragraph contains <SUP>superscripted</SUP> text.</P>



,11



Dziaanie vertical-align: bottom wydaje si dosy proste. Jest nim wyrwnanie dolnych
brzegw pudeka elementu i pudeka linii. Na przykad kod taki jak przedstawiono poniej powinien da efekt widoczny na rysunku 4.34:
IMG.feeder {vertical-align: bottom;}
<P>This paragraph contains first a single fairly <IMG SRC="tall.gif"
align="middle"
ALT="tall image"> which is tall, and then an image <IMG SRC="short.gif"
CLASS="feeder" ALT="short image"> which is not tall.</P>



,'

Jak wida na rysunku 4.34, druga linia akapitu zawiera dwa obrazki, ktrych dolne brzegi s ze
sob wyrwnane. Dla pierwszego obrazka zostao ustawione wyrwnanie rodkowe przy uyciu
atrybutu HTML valign. Nieco pniej ale jeszcze w tym rozdziale przyjrzymy si sposobom stosowanym w CSS do osignicia podobnych efektw.
Fraza vertical-align: text-bottom odnosi si do dolnego brzegu linii tekstu. Dla spenienia celw tej wartoci ignorowane s elementy podmieniane i dowolnego typu elementy nietekstowe. Pod uwag brane jest natomiast domylne pole tekstowe. To domylne pudeko wywodzi
si z waciwoci font-size elementu rodzica. Spd wyrwnywanego elementu jest wyrwnany ze spodem domylnego pola tekstowego. A zatem stosujc poniszy kod zobaczymy sytuacj przedstawion na rysunku 4.35:
IMG.tbot {vertical-align: text-bottom;}

  



<P>Here: a <IMG SRC="tall.gif" ALIGN="middle"

ALT="tall image"> tall image, and then a <IMG SRC="short.gif"
CLASS="tbot" ALT="short image"> short image.</P>



/0


Uycie vertical-align: top ma przeciwny efekt ni warto bottom (podobnie jak
vertical-align: text-top jest odwrotnoci text-bottom). Rysunek 4.36 przedstawia efekt, jaki da wykonanie poniszego kodu:
IMG.up {vertical-align: top;}
IMG.textup {vertical-align: text-top;}
<P>Here: a <IMG SRC="tall.gif" ALIGN="middle"
ALT="tall image"> tall image, and then a <IMG SRC="short.gif"
CLASS="up" ALT="short image"> short image.</P>
<P> Here: a <IMG SRC="tall.gif" ALIGN="middle"
ALT="tall image"> tall image, and then a <IMG SRC="short.gif"
CLASS="textup" ALT="short image"> short image.</P>


$
2 "  %/0%,

Dokadna pozycja wyrwnania bdzie zaleaa od tego, jakie elementy znajd si w linii i od tego,
jak bd wysokie.

!
A teraz vertical-align: middle. Warto ta stosowana jest zazwyczaj w celu wyrwania
rysunkw, poniewa powoduje ustawienie rodka elementu na poziomie rodka linii. rodek linii
zdefiniowany jest jako punkt znajdujcy si o poow wartoci ex nad bazow lini pisma, a warto







ex obliczana jest na podstawie wielkoci czcionki elementu rodzica. Przykad przedstawiony jest
na rysunku 4.37:
IMG {vertical-align: middle;}


&
,

Poniewa wikszo przegldarek wywietla 1ex jako poow em, warto middle praktycznie
powoduje ustawienie rodka elementu na wysokoci jednej czwartej wartoci em nad bazow lini
pisma rodzica. Obrazuje to dokadnie rysunek 4.38.


(
> 1",1

To posunicie jest bliskie symulacji dziaania <IMG ALIGN="middle">; mona spodziewa

si, e wartoci procentowe dadz jeszcze lepsze wyniki.



Jak si okazuje, procenty nie pozwalaj symulowa ALIGN="middle" w przypadku obrazkw.
Ustawienie wartoci procentowej dla vertical-align powoduje podniesienie lub opuszczenie
bazowej linii pisma (lub spodu elementu podmienianego) o podan wielko wzgldem linii bazowej rodzica. Wielko przesunicia obliczana jest jako procent wartoci wysokoci linii. Dodatnie wartoci powoduj podniesienie elementu, a ujemne obnienie. Moe to spowodowa taki
efekt jak ten, ktry jest widoczny na rysunku 4.39 (elementy wygldaj tak, jakby byy umieszczone w osobnej linii):
B {vertical-align: 100%}
<P>This paragraph contains some <B>boldfaced</B> text, which is
raised up 100%. This makes it look as though it's on a preceding
line.</P>

  




*
%%2 % 

Naley jednak pamita, e wyrwnywany pionowo tekst nie jest czci innej linii. Wydaje si
tak jedynie wtedy, gdy nie ma innego tekstu dookoa. Spjrzmy na rysunek 4.40, na ktrym w rodku akapitu pojawia si pewien wyrwnany pionowo tekst.


-
%2%"#'

Mona t waciwo wykorzysta do uzyskania ciekawych efektw wizualnych jak te, ktre zostay przedstawione na rysunku 4.41:
SUB {vertical-align: -100%;}
SUP {vertical-align: 100%;}
<P>We can either <SUP>soar to new heights</SUP> or, instead,
<SUB>sink into despair...</SUB></P>



! ?

Skoro wartoci procentowe maj by procentami wysokoci linii, mona zapyta o to, co si stanie, jeli szczeglnie wysoki obrazek umieszczony wewntrz linii zwikszy jej wysoko?
Jeli przypomnimy sobie wczeniejsze rozwaania, to odpowied ju znamy obrazek, bez
wzgldu na swoj wysoko, nie spowoduje powikszenia wartoci line-height. Zwikszy si
wysoko pudeka. Dlatego jeli wysoko linii wynosi 14px, a element wewntrz tej linii jest
podniesiony o 50%, a wewntrz niej znajduje si take obrazek wysokoci 50 pikseli to otrzymany rezultat bdzie taki, jak to przedstawiono na rysunku 4.42:
SUP {vertical-align: 50%;}









%;% 

Podniesiony o 50% element bdzie mia lini bazow podniesion o 7 pikseli (poowa 14px),
a nie o 25 pikseli. Zauwamy take, e pudeko linii zostao odpowiednio zwikszone, aby mogo
pomieci rysunek. Jest to zgodne z modelem pudeka, poniewa elementy podmieniane daj
efekty tego rodzaju.
Moemy lepiej przeledzi operacj wyrwnania pionowego, jeli mamy dwa obrazki, z ktrych
tylko jeden jest wyrwnany pionowo za pomoc wartoci procentowej. Rezultaty, ktre s widoczne na rysunku 4.43, s zalene od wysokoci linii, ktr wyranie ustawilimy na 14px:
P {line-height: 14px;}
IMG.up {vertical-align: 50%;}
<P>Some <IMG SRC="tall.gif" alt="tall image">
<IMG SRC="short.gif" CLASS="up" ALT="short image"> text.</P>



%;% ,

Spd (lub linia bazowa) mniejszego obrazka jest podniesiony o poow (50%) wysokoci linii lub
o 7 pikseli. Jeli ustawilibymy wyrwnanie dla IMG.up na 50%, to niszy obrazek zostaby
obniony o 7 pikseli.

"#
  $
Jak ju widzielimy, sposb wywietlenia danej linii tekstu zaley w duym stopniu od wyrwnania pionowego rnych elementw wewntrz tej linii. Fakt ten, ze wzgldu na sw wag, zasuguje na ponowne podkrelenie. Na przykad zamy, e linia zawiera wyrodkowany obrazek
i wyrwnany do dou element normalnego cigu tekstu. Rezultat wida na rysunku 4.44:

  



IMG {vertical-align: middle;}

SUB {vertical-align: bottom;}



@# )% 

Jeli zmienimy wyrwnanie elementu tekstowego na text-bottom, sytuacja zmieni si do

radykalnie, jak to przedstawiono na rysunku 4.45:
IMG {vertical-align: middle;}
SUB {vertical-align: text-bottom;}



<%"# )% 

 

Dosy proste pojcia odstpy midzy sowami i znakami to po prostu sposoby na zwikszenie lub zmniejszenie przestrzeni pomidzy sowami lub literami. Jak zawsze do rozwaenia jest
par nieintuicyjnych kwestii dotyczcych tych waciwoci. Na pocztek omwmy odstpy midzy sowami.

% & 

 



<dugo> | normal


 

normal



tak





wszystkich elementw

Waciwo word-spacing (odstpy midzy sowami) moe przyjmowa warto dodatni lub
ujemn. Warto jest dodana do normalnej przestrzeni midzy sowami, co prawdopodobnie nie







jest tym, czego moglibymy si spodziewa. W efekcie podanej w deklaracji word-spacing

wartoci uywa si jako modyfikatora przestrzeni midzy sowami. Dlatego warto domylna
normal dziaa tak samo jak ustawienie wartoci zerowej (0), co przedstawiono na rysunku 4.46:
P.base {word-spacing: normal;}
P.norm {word-spacing: 0;}


$
.%#1 " ,%,"

Jeli zatem wpiszemy dodatni warto dugoci, przestrze pomidzy sowami zwikszy si, jak
to przedstawiono na rysunku 4.47:
P {word-spacing: 0.2em;}
<P>The spaces between words in paragraphs will be increased by
0.2em.</P>


&
3%,"

Sowa mog zosta zblione poprzez ustawienie dla waciwoci word-spacing wartoci
ujemnej. Da to taki efekt, jak wida na rysunku 4.48:
P {word-spacing: -0.4em;}
<P>The spaces between words in paragraphs will be decreased by
0.4em.</P>


(
3%%,"

Jak na razie nie okrelilimy dokadnie, czym tak naprawd jest sowo. W najprostszych terminach CSS sowo jest cigiem znakw bez przerw, otoczonym przez puste znaki jakiegokolwiek
typu. Definicja nie ma znaczenia semantycznego zakada si jedynie, i autor opracowuje dokument
tak, e kade sowo jest oddzielone od drugiego przynajmniej jednym pustym znakiem. Nie mona

  



jednak oczekiwa od przegldarek rozumiejcych CSS, aby decydoway, co jest poprawnym sowem w danym jzyku, a co nim nie jest.
Oznacza to take, e nie kady jzyk, ktry uywa piktogramw lub innych, ni rzymski sposobw pisania, bdzie mg korzysta z tej waciwoci. Ponadto przegldarki nie musz uwzgldnia podanej tu definicji sowa; to tylko najprostszy sposb zdefiniowania tego pojcia. Przegldarki mog uy bardziej zaawansowanych sposobw i decydowa o tym, co sowem jest, a co nie.
Uywajc waciwoci odstpw midzy sowami mona stworzy bardzo nieczytelny dokument,
taki jak widzimy na rysunku 4.49:
P {word-spacing: 1in;}


*
A%,,%,"

'





 



<dugo> | normal


 

normal



tak





wszystkich elementw

Wiele aspektw dotyczcych odstpw midzy sowami obowizuje take w przypadku odstpw
midzy znakami. Jedyn rzeczywist rnic pomidzy tymi waciwociami jest to, e letterspacing jest modyfikatorem normalnego wiata midzyliterowego.
Tutaj take dozwolone s wszystkie wartoci dugoci i domylne sowo kluczowe normal (wywoujce takie samo dziaanie jak letter-spacing: 0). Kada warto dugoci zwikszy
lub zmniejszy przestrze pomidzy literami o zadeklarowan warto. Rysunek 4.50 przedstawia
rezultaty poniszego przykadowego kodu:
P {letter-spacing: 0;}
/* identyczne dziaanie jak "normal" */
P.szerokie {letter-spacing: 0.25em;}
P.waskie {letter-spacing: -0.25em;}
<P>The letters in this paragraph are spaced as normal.</P>







<P CLASS="szerokie">The letters in this paragraph are spread out a

bit.</P>
<P CLASS="waskie">The letters in this paragraph are smooshed together
a bit.</P>


-

2,1

Interesujcym wykorzystaniem odstpw midzyliterowych jest zwikszenie ich w celu podkrelenia znaczenia wyrazu. Taka technika bya powszechnie stosowana w poprzednich stuleciach.
A zatem mona zadeklarowa poniszy kod, aby otrzyma rezultat widoczny na rysunku 4.51:
STRONG {letter-spacing: 0.2em;}
<P>This paragraph contains <STRONG>strongly emphasized text</STRONG>
which is spread out for extra emphasis.</P>



2 ,%,,' 1'1%,' 

% ( 




Warto text-align moe wpywa na odstpy midzy sowami i midzy znakami. Jeli element jest wyjustowany, to odstpy midzy znakami i sowami mog ulec zmianie. Umoliwienie
penego justowania moe zmieni odstpy zadeklarowane przez autora przez waciwoci wordspacing i letter-spacing. Specyfikacja CSS nie okrela w takich przypadkach sposobu
obliczenia odstpw, a wic przegldarki mog robi to, co ich programici uznali za najlepsze
rozwizanie.
Jak to zwykle bywa, obliczona warto dziedziczona jest przez wszystkie dzieci elementu. W odrnieniu od wysokoci linii dla word-spacing i letter-spacing niemoliwe jest ustawienie wspczynnika skalujcego, ktry byby dziedziczony zamiast wyliczonej wartoci. A zatem pojawiaj si problemy takie jak przedstawiony na rysunku 4.52:
P {letter-spacing: 0.25em;}
SMALL {font-size: 50%;}
<P>This spacious paragraph features <SMALL>tiny text which is just
as spacious</SMALL>, even though the author probably wanted the
spacing to be in proportion to the size of the text.</P>

  





+,, ",'

Jedyn szans na uzyskanie efektu proporcjonalnoci odstpw do wielkoci tekstu jest wyrane
zadeklarowanie kerningu, co pokazano na rysunku 4.53:
P {letter-spacing: 0.25em;}
SMALL {font-size: 50%; letter-spacing: 0.25em;}
<P>This spacious paragraph features <SMALL>tiny text which is
proportionally spacious</SMALL>, which is what the author
probably wanted.</P>



+, ,,  1



  !
Teraz zajmijmy si kapitalizacj tekstu. Moemy to zrobi posugujc si waciwoci texttransform (transformacja tekstu).



 



uppercase | lowercase | capitalize | none


 

none



tak





wszystkich elementw

Domylna warto none pozostawia tekst bez zmian, gdy stosuje tak kapitalizacj, jaka istnieje
w rdle dokumentu. Wartoci, takie jak uppercase (wersaliki, czyli wielkie litery) i lowercase (mae litery), powoduj zamian tekstu tylko na wielkie lub tylko na mae litery zgodnie
z tym, co sygnalizuj nazwy. Warto capitalize (kapitalizacja) zmienia pierwsz liter kadego wyrazu na wielk, a reszt liter pozostawia bez zmian. Zauwamy, e dla tej waciwoci definicja sowa jest taka sama jak w podrozdziale o odstpach midzy sowami.

!





Rysunek 4.54 przedstawia wiele sposobw uycia ustawie.

STRONG {text-transform: uppercase;}
H1, H2, H3 {text-transform: capitalize;}
P.cummings {text-transform: lowercase;}
P.surowy {text-transform: none;}
<H1>The heading-one at the beginninG</H1>
<P>
By default, text is displayed in the capitalization it has in the
source document, but <STRONG>it is possible to change this</STRONG>
using the property 'text-transform'.
</P>
<P CLASS="cummings">
For example, one could Create TEXT such as might have been Written by
the late Poet E.E.Cummings.
</P>
<P CLASS="surowy">
If you feel the need to Explicitly Declare the transformation of
text, that can be done as well.
</P>




2%? 

Pamitajmy, e rne przegldarki w rny sposb mog decydowa o tym, gdzie zaczyna si nowe sowo (czyli o tym, jakie litery maj by zamienione). Na przykad dla elementy H1 z rysunku
4.54 tekst heading-one moe by wywietlony na jeden z dwch sposobw: Heading-One lub
Heading-one. CSS nie okrela, ktry zapis jest poprawny, wic obydwa s moliwe.
Zauwamy take, e w nagwku H1 na rysunku 4.54 ostatnia litera jest nadal wielka. Taka sytuacja jest poprawna: nadajc text-transform: capitalize CSS wymaga jedynie od przegldarki zamiany pierwszych liter wyrazw na wielkie. W pozostaej czci wyrazu nic nie zostao
wic zmienione.

  



Moe si wydawa, e waciwo text-transform nie ma zbyt duych moliwoci. Ale

w rzeczywistoci jest bardzo uyteczna. Jest tak na przykad wtedy, gdy nagle zdecydujemy, e
wszystkie elementy H1 powinny by w caoci napisane wielkimi literami. Zamiast przepisywa
wszystkie nagwki, wystarczy posuy si transformacj tekstu:
H1 {text-transform: uppercase;}
<H1>This is an H1 element</H1>

Jak wida na rysunku 4.55, tekst jest napisany wielkimi literami.



B?'6

Zalet takiego posunicia jest wiele. Po pierwsze aby dokona zmiany, wystarczy napisa pojedyncz regu, zamiast zmienia wszystkie nagwki H1. Po drugie jeli pniej zdecydujemy
si na zamian wielkich liter na kapitalizacje tylko pierwszej litery kadego wyrazu, zmiana jest
jeszcze atwiejsza, co pokazuje rysunek 4.56:
H1 {text-transform: capitalize;}
<H1>This is an H1 element</H1>


$
<%?'6

"  !
W ten sposb dochodzimy do dekoracji tekstu (text-decoration) bdcej fascynujc waciwoci, ktra daje szans na wykorzystanie dziwnych efektw i niecisoci w przegldarkach.
Jednak na pocztku omwmy sposb, w jaki waciwo ta powinna dziaa teoretycznie.







none | [underline || overline || line-through || blink]


 

none



nie





wszystkich elementw







Jak mona si spodziewa, underline (podkrelenie) powoduje podkrelenie elementu. Dziaa

dokadnie tak samo jak znacznik U w HTML. Warto overline (nadkrelenie) jest lustrzanym
odbiciem podkrelenia; linia jest rysowana wzdu grnej krawdzi tekstu nadkrelanego elementu. Warto line-through (linia poprzez) przeprowadza lini prosto przez rodek tekstu;
jest znana take jako przekrelenie (ang. striketrough) tekstu i jest odpowiednikiem znacznikw
S i STRIKE w HTML. A BLINK (mruga) powoduje oczywicie miganie tekstu (dokadnie tak
samo jak znacznik BLINK obsugiwany przez program Netscape Navigator). Rysunek 4.57 przedstawia efekty dziaania kadej z tych wartoci:
P.emph {text-decoration: underline;}
P.topper {text-decoration: overline;}
P.old {text-decoration: line-through;}
P.annoy {text-decoration: blink;}
P.plain {text-decoration: none;}


&

2%, 
Pokazanie efektu migania (blink) oczywicie nie jest moliwe w druku, ale jest atwe do
wyobraenia. Przegldarki nie musz obsugiwa migania. Nawiasem mwic w czasie,
gdy pisaem t ksik, miganie obsugiwa tylko Navigator 4.x.

Jak wida na ostatniej czci rysunku 4.57, warto none wycza wszelkie dekoracje, jakie mogy zosta nadane elementowi. Jest to zazwyczaj domylny wygld tekstu, ale nie zawsze tak si
dzieje. Na przykad odnoniki domylnie s tu podkrelone. Jeli chcielibymy pozby si podkrelenia hiperczy, to regua CSS byaby taka:
A:link {text-decoration: none;}

Tekst na rysunku 4.58 zawiera trzy odnoniki. S to trzy elementy listy. Skoro wyczylimy podkrelanie odnonikw, to jedyn widoczn rnic pomidzy odnonikami a normalnym tekstem
jest kolor.

  




(
"# %,'%"# 
Wielu uytkownikw irytuje si, kiedy zdadz sobie spraw z tego, e autor wyczy
podkrelanie odnonikw. Oczywicie de gustibus non est disputandum, pozwlmy wic
gustowi by w tej kwestii naszym przewodnikiem. Pamitajmy jednak, e jeli kolory
odnonikw dostatecznie nie odrniaj si od normalnego tekstu, uytkownicy ze sabszym
wzrokiem mog mie due problemy z wyszukaniem hiperczy w naszym dokumencie.

W jednej regule mona poczy kilka dekoracji. Zamy na przykad, e chcemy, aby wszystkie
odnoniki byy jednoczenie podkrelone oraz nadkrelone. Regua, ktr musimy zastosowa
wyglda nastpujco:
A:link, A:visited {text-decoration: underline overline;}

Dziki temu text-decoration pozwala na skrcenie zapisu. W takim przypadku naley by

ostronym, poniewa moe si zdarzy, e mamy dwie rne dekoracje przyporzdkowane temu
samemu elementowi, a wtedy warto wygrywajcej reguy cakowicie zastpi regu przegran.
Spjrzmy:
H2.przekreslony {text-decoration: line-through;}
H2 {text-decoration: underline overline;}

Przy zastosowaniu takich dwch regu kady element H2 o klasie przekrelony bdzie mia dekoracj tylko w postaci przekrelenia. Podkrelenie i nadkrelenie zostan zgubione, poniewa
jedna deklaracja zastpi drug, a nie skumuluje si z ni.

)

Teraz zagbmy si w paru dziwacznych aspektach dekoracji tekstu. Po pierwsze warto
text-decoration nie jest dziedziczona. A to pociga za sob pewne wymaganie kada linia dekoracji narysowana wzdu tekstu (obojtnie czy nad, pod czy poprzez) musi by tego samego koloru co element rodzic. Dzieje si tak nawet wtedy, gdy potomek jest innego koloru, jak
przedstawiono na rysunku 4.59:
P {text-decoration: underline; color: black;}
B {color: gray;}
<P>This paragraph, which is black and has a black underline, also
contains
<B>boldfaced text</B> which has the black underline beneath it as
well.</P>








*
5,'%,'

Dlaczego tak si dzieje? Warto text-decoration nie jest dziedziczona, zatem element B
ma domyln warto none. Dlatego element B nie ma podkrelenia. Oczywicie jest wyranie
widoczna linia wystpujca pod elementem B, a wic idiotyzmem wydaje si uparte twierdzenie,
e nie jest on podkrelony. Ale nie jest. To, co widzimy pod elementem B to podkrelenie akapitu,
ktre obejmuje element B. Moe sta si to bardziej wyrane, jeli zmienimy style pogrubionego
elementu w taki sposb:
P {text-decoration: underline; color: black;}
B {color: gray; text-decoration: none;}
<P>This paragraph, which is black and has a black underline, also
contains
<B>boldfaced text</B> which has the black underline beneath it as
well.</P>

Rezultat jest taki sam; dokadnie ju omwilimy, czemu si tak dzieje. Innymi sowy nie ma
moliwoci wyczenia podkrelenia (nadkrelenia lub przekrelenia) wewntrz elementu. Jeli dla
jakiego elementu zostaa ustawiona dekoracja, to dzieci tego elementu te bd miay t dekoracj nadan, jeli nawet nie rzeczywicie, to przynajmniej wizualnie.
Jeszcze dziwniejsze rzeczy bd si dziay, gdy poczymy dekoracje z wyrwnaniem pionowym.
Rysunek 4.60 pokazuje nam jedn z nich. Skoro element SUP nie ma wasnej dekoracji, ale jest podniesiony wewntrz nadkrelonego elementu, to nadkrelenie przechodzi przez rodek elementu SUP:
P {text-decoration: overline; font-size: 12pt;}
SUP {vertical-align: 50%; font-size: 12pt;}


$-
!%:',?, 

Dekoracje tekstu powoduj tak due problemy, e moemy zwtpi w celowo ich uycia. Chocia moe by jeszcze gorzej (a moe lepiej) na razie omwilimy teoretyczne dziaanie waciwoci. W rzeczywistoci wiele przegldarek wycza podkrelanie elementw potomkw, chocia nie powinno to by stosowane. Powodem, dla ktrego naruszaj one specyfikacj, s po
prostu oczekiwania autora.
P {text-decoration: underline; color: black;}
B {color: gray; text-decoration: none;}
<P>This paragraph, which is black and has a black underline, also
contains
<B>boldfaced text</B> which does not have black underline beneath
it.</P>

" 



Jak wida na rysunku 4.61 przegldarka wyczya podkrelenie elementu B. Robi to Navigator,
Explorer i Opera, jeli wyranie zaznaczono text-decoration: none, aby wyczy dekoracj. Jest to oczywicie to, czego spodziewaby si autor i dlatego przegldarki speniaj jego
oczekiwania.


$
5%, #%1'#,

Jednak w przyszoci przegldarki mog zacz precyzyjnie stosowa si do specyfikacji. Jeli zaczniemy korzysta z none w celu wyzwolenia si z dekoracji, naley pamita, e by moe kiedy bdziemy musieli wrci do tego problemu. Miejmy nadziej, e przysze wersje CSS bd
zawiera sposb na wyczenie dekoracji bez uywania none.
Ostatecznie istnieje sposb na to, by zmieni kolor dekoracji bez naruszania zasad specyfikacji.
Jak sobie przypominamy ustawienie dekoracji tekstu na danym elemencie oznacza, e cay
element powinien mie taki sam kolor dekoracji, nawet jeli istniej potomkowie o innym kolorze.
Aby poczy kolor dekoracji z kolorem kadego elementu, naley wyranie zadeklarowa dekoracj tych elementw tak, jak to wida poniej:
P {text-decoration: underline; color: black;}
B {color: gray; text-decoration: underline;}
<P>This paragraph, which is black and has a black underline, also
contains
<B>boldfaced text</B> which has its own gray underline.</P>

Na rysunku 4.62 element B ustawiony jest jako szary i podkrelony. Szare podkrelenie zapisuje
si na podkreleniu rodzica, a wic kolor dekoracji pasuje do koloru elementu B.


$
3' ,'1 %,')

Istnieje wiele sposobw zmiany wygldu tekstu. Mona je stosowa nawet bez podejmowania
prb zmiany uytych czcionek. Istnieje klasyczny efekt podkrelenia, ale CSS daje nam moliwo rysowania linii nad tekstem i poprzez tekst, daje moliwo zmiany wielkoci odstpw
midzy sowami i znakami, wcicia pierwszej linii akapitu (lub innego elementu blokowego), wyrwnania tekstu do lewej lub prawej strony itd. Mona nawet zmieni odstp wystpujcy pomidzy poszczeglnymi liniami tekstu, chocia operacja ta jest nadspodziewanie skomplikowana (zostaa dokadnie opisana w rozdziale 8.).







Te zachowania obsugiwane s wzgldnie dobrze albo nie s obsugiwane wcale. Jedn z tych nienajlepiej obsugiwanych rzeczy jest pene justowanie tekstu. Wikszo wprowadzonych na rynek
w dwudziestym wieku przegldarek zawieraa bdy w obsudze dekoracji tekstu i wyrwnania
pionowego (podobnie jak w obliczaniu wysokoci linii). Z drugiej strony odstpy midzy sowami i znakami prawie zawsze dziaaj poprawnie (gdy s obsugiwane), a wciciom towarzyszy
jedynie kilka bardzo maych bdw. To samo dotyczy moliwoci zmiany kapitalizacji, obsugiwanej zazwyczaj poprawnie.
Nastpn rzecz, ktr autorzy zwykle chc zrobi, jest zmiana czcionki uytej w tekcie, zmiana jej
rozmiaru, gruboci i innych waciwoci. O tym, jak to zrobi, przeczytamy w nastpnym rozdziale.