You are on page 1of 39

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. Antologia. 101


wskazwek i trikw
Autor: Rachel Andrew
Tumaczenie: Krzysztof Jurczyk
ISBN: 83-7361-966-6
Tytu oryginau: The CSS Anthology:
101 Essential Tips, Tricks and Hacks
Format: B5, stron: 336
Poznaj technologi, ktra zrewolucjonizowaa projektowanie stron WWW
Definiowanie stylw dla tekstw i rysunkw
Pozycjonowanie elementw strony za pomoc stylw
Dostosowywanie dokumentw do wywietlania w rnych przegldarkach
Kaskadowe arkusze stylw (CSS) cakowicie zmieniy sposb projektowania stron
WWW. Formatowanie elementw za pomoc znacznikw, mudne rozmieszczanie ich
w komrkach tabel oraz sztuczki, dziki ktrym uzyskiwano efekt podwietlenia,
to techniki uwaane dzi ju za przestarzae. Wykorzystujc technologi CSS moemy
definiowa wygld kadego elementu umieszczonego na stronie. Przystosowanie strony
do wywietlania na ekranie telefonu komrkowego lub urzdzenia PDA rwnie nie
stanowi problemu, jeli zastosujemy do tego kaskadowe arkusze stylw. Opanowanie
tej technologii jest dzi nieodzownym elementem wiedzy kadego projektanta witryn WWW.
Ksika CSS. Antologia. 101 wskazwek i trikw to zbir porad dotyczcych
stosowania kaskadowych arkuszy stylw. Wykorzystujc opisane w ksice sposoby,
zaprojektujesz estetyczne i efektywne witryny WWW i aplikacje internetowe.
Czytajc t ksik, dowiesz si, jak definiowa style dla elementw tekstowych
i graficznych, w jaki sposb formatowa tabele i formularze oraz jak stworzy
podwietlane przyciski bez korzystania z JavaScriptu. Przeczytasz tu rwnie
o pozycjonowaniu elementw strony za pomoc stylw, dostosowywaniu strony do
wywietlania w rnych przegldarkach, systemach operacyjnych i urzdzeniach.
Poznasz take techniki umoliwiajce uzyskanie efektw specjalnych, ktre
uatrakcyjni wygld Twojej witryny.
Stosowanie stylw dla tekstu
Przypisywanie stylw do elementw graficznych
Budowanie mechanizmw nawigacyjnych
Formatowanie tabel i formularzy
Zachowanie zgodnoci witryny z rnymi modelami przegldarek
Definiowanie ukadu strony WWW za pomoc stylw
Tworzenie efektw specjalnych
Odkryj moliwoci kaskadowych arkuszy stylw

Spis treci
Wstp .............................................................................................. 9
Dla kogo przeznaczona jest ta ksika? .......................................................................... 10
Co zawiera ta ksika? ................................................................................................... 10
Fora dyskusyjne SitePoint .............................................................................................. 12
Biuletyny SitePoint ........................................................................................................ 12
Kontakt z nami ............................................................................................................... 12

Rozdzia 1. CSS od czego zacz? ................................................................ 13


Problem z HTML ........................................................................................................... 13
Definiowanie stylw w CSS ........................................................................................... 14
Selektory CSS ................................................................................................................ 17
Podsumowanie ............................................................................................................... 20

Rozdzia 2. Style tekstowe i inne techniki podstawowe ..................................... 21


Jak zastpi znacznik czcionki za pomoc CSS ............................................................. 21
Jak opisywa wielko czcionki
za pomoc pikseli, punktw, emw czy innej jednostki ......................................... 22
Jak zdefiniowa czcionk dla wywietlanego tekstu ...................................................... 29
Jak usun podkrelenie z czy do stron internetowych ................................................ 30
Jak utworzy cze, ktrego kolor zmieni si po wskazaniu kursorem ........................... 32
Jak wywietli dwa rne style cza na jednej stronie .................................................. 34
Jak doda kolor ta do nagwka .................................................................................... 36
Jak podkreli tekst nagwka ........................................................................................ 37
Jak usun odstp pomidzy nagwkiem <h1> a wystpujcym pod nim akapitem ..... 38
Jak podwietli tekst bez stosowania znacznikw czcionki ........................................... 39
Jak zmodyfikowa odstp midzy liniami tekstu ........................................................... 40
Jak wyjustowa tekst ...................................................................................................... 41
Jak nada styl poziomej linii .......................................................................................... 42
Jak wprowadzi wcicie w tekcie ................................................................................. 43
Jak wyrodkowa tekst ................................................................................................... 45
Jak za pomoc CSS zamieni wszystkie litery w tekcie na wielkie .............................. 46
Jak zmieni lub usun znaki punktora na licie elementw .......................................... 47
Jak zdefiniowa punktor uytkownika ........................................................................... 50
Jak usun wcity lewy margines elementw listy ......................................................... 51
Jak wywietli elementy listy w poziomie ..................................................................... 52
Jak doda komentarz do kodu w pliku CSS ................................................................... 53
Jak usun marginesy bez dodawania atrybutw do znacznika <body> ........................ 53
Podsumowanie ............................................................................................................... 54

CSS. Antologia. 101 wskazwek i trikw

Rozdzia 3. CSS i rysunki .................................................................................. 55


Jak doda ramk do rysunku .......................................................................................... 55
Czym w CSS zastpi odradzany w specyfikacji HTML atrybut rysunkw border ....... 57
Jak za pomoc CSS zdefiniowa to w postaci rysunku ................................................. 58
Jak zdefiniowa pooenie rysunku ta ........................................................................... 61
Jak wstawi rysunek ta, ktry pozostanie nieruchomy w trakcie przewijania strony .... 63
Jak zdefiniowa to nie tylko dla strony WWW,
ale take dla poszczeglnych elementw ..................................................................... 65
Jak umieci tekst na rysunku ........................................................................................ 68
Jak zdefiniowa w dokumencie wicej ni jedno to ...................................................... 69
Podsumowanie ............................................................................................................... 70

Rozdzia 4. Systemy nawigacji .......................................................................... 71


Jak za pomoc CSS zastpi system nawigacji oparty na rysunkach ............................. 72
Jak za pomoc CSS zmodyfikowa list elementw tak,
aby wygldaa jak menu nawigacyjne .......................................................................... 77
Jak za pomoc CSS uzyska efekt najazdu bez uycia rysunkw i JavaScript ............... 81
Czy za pomoc CSS i list mona stworzy podmenu? ................................................... 82
Jak utworzy menu poziome za pomoc listy elementw i CSS .................................... 86
Jak za pomoc CSS utworzy przyciski nawigacji ......................................................... 90
Jak w CSS utworzy system nawigacji zawierajcy zakadki ........................................ 92
Jak zmieni rodzaj kursora ............................................................................................. 99
Jak w CSS uzyska efekt najazdu bez wykorzystania JavaScript ................................. 101
Podsumowanie ............................................................................................................. 104

Rozdzia 5. Tabele .......................................................................................... 105


Jak za pomoc CSS wywietli dane z arkusza kalkulacyjnego ................................... 106
Jak zapewni odpowiedni dostpno i atrakcyjno danych tabelarycznych
umieszczonych na stronie internetowej ...................................................................... 107
Jak doda ramk do tabeli, nie uywajc atrybutu HTML border ................................ 110
Jak usun odstpy pomidzy komrkami tabeli po dodaniu ramek CSS .................... 112
Jak wywietli dane tabelaryczne w atrakcyjny i praktyczny sposb ........................... 113
Jak wywietli w dwch rnych kolorach wiersze tabeli ............................................ 117
Jak zmieni kolor ta wiersza tabeli po wskazaniu go kursorem .................................. 120
Jak za pomoc CSS utworzy kalendarz ...................................................................... 122
Podsumowanie ............................................................................................................. 132

Rozdzia 6. Formularze i elementy interfejsu uytkownika ................................ 133


Jak za pomoc CSS nada styl elementom formularza ................................................. 134
Jak definiowa rne style dla pl tego samego formularza ......................................... 137
Jak unikn automatycznego wstawiania
w formularzu biaych znakw i nowych linii ............................................................. 139
Jak sprawi, aby przycisk wysyania wyglda jak zwyky tekst .................................. 140
Jak umoliwi uytkownikom urzdze tekstowych
poprawne wypenienie formularza ............................................................................. 141
Jak wykona dwukolumnowy ukad formularza, nie stosujc tabel ............................. 144
Jak utworzy grup dla powizanych ze sob pl ........................................................ 148
Jak nada styl literom klawiszy dostpu ....................................................................... 152
Jak zdefiniowa kolory dla elementw listy rozwijanej ............................................... 154
Jak za pomoc CSS sformatowa formularz
pozwalajcy wpisywa dane jak do arkusza kalkulacyjnego ..................................... 155
Jak wyrni aktywne pole formularza ........................................................................ 161
Podsumowanie ............................................................................................................. 163

Spis treci

Rozdzia 7. Wsppraca z przegldarkami i urzdzeniami przenonymi .............. 165


W jakich przegldarkach powinienem testowa projektowan witryn ....................... 166
Mam dostp tylko do jednego systemu operacyjnego.
Jak przetestowa przegldarki dziaajce na innych systemach? ............................... 167
Czy istnieje usuga, ktra umoliwi mi sprawdzenie
funkcjonalnoci projektowanej witryny w innych przegldarkach?............................ 170
Czy istnieje moliwo zainstalowania na jednym komputerze
kilku wersji przegldarki Internet Explorer? .............................................................. 171
Jak przetestowa witryn w przegldarce tekstowej .................................................... 173
Jak przetestowa witryn w aplikacji odczytujcej na gos tre witryny .................... 174
Jak ukry formatowanie CSS w Netscape 4 ................................................................. 175
Jak stosowa zrnicowane style w Netscape 4 ........................................................... 177
Jak poinformowa uytkownikw przegldarek w wersji 4
o zuboonym wygldzie witryny ............................................................................... 181
Jak ukry kod CSS, aby nie by analizowany przez okrelone przegldarki ................ 183
Dlaczego moja witryna w przegldarce Internet Explorer 6
wyglda inaczej ni w Mozilli? ................................................................................. 189
Zdaje si, e znalazem bd w CSS! Co robi? ........................................................... 193
Cz zawartoci mojej witryny znika w przegldarce Internet Explorer 6!
Co si dzieje? ............................................................................................................. 195
Co oznaczaj komunikaty o bdach
i komunikaty ostrzegawcze w narzdziu W3C Validator? ......................................... 199
Jak utworzy arkusz stylw dla okrelonych urzdze,
na przykad odczytujcych na gos zawarto witryny lub zestaww WebTV .......... 200
Jak utworzy arkusz stylw przeznaczony do drukowania dokumentw ..................... 202
Niektre przegldarki umoliwiaj uytkownikowi wybr arkusza stylw.
W jaki sposb mog doda alternatywny arkusz stylw do swojej witryny? ............. 211
Jak zastosowa przecznik arkuszy stylw ................................................................. 214
Jak stosowa alternatywne arkusze stylw, nie powielajc kodu ................................. 217
Podsumowanie ............................................................................................................. 221

Rozdzia 8. Pooenie elementw i modyfikacja ukadu strony za pomoc CSS .... 223
Kiedy stosowa klas, a kiedy ID ................................................................................. 223
Jak sprawi, aby element ssiadujcy by wywietlany jako blokowy i na odwrt ...... 224
Jak w CSS funkcjonuj odstpy i marginesy ................................................................ 226
Jak sprawi, aby rysunek by otaczany przez tekst,
nie korzystajc z atrybutu HTML align ..................................................................... 229
Jak sprawi, aby inne elementy byy wywietlane pod elementem pywajcym .......... 232
Jak wyrwna logo i tytu witryny, nie stosujc tabeli ................................................. 235
Jak za pomoc CSS zdefiniowa pooenie elementu na stronie .................................. 240
Jak umieci blok na rodku strony .............................................................................. 243
Jak utworzy przejrzysty, dwukolumnowy ukad zawierajcy z lewej strony menu,
a z prawej gwn tre .............................................................................................. 246
Czy mona odwrci ten ukad i umieci menu po prawej stronie? ........................... 252
Jak stworzy dwukolumnowy, wyrodkowany ukad o zdefiniowanej szerokoci ....... 253
Jak za pomoc CSS stworzy trzykolumnowy ukad strony ........................................ 264
Jak za pomoc CSS doda stopk,
ktra bdzie prawidowo wywietlana w kadych warunkach ................................... 275
Jak wywietli galeri miniatur zdj, nie stosujc tabeli ............................................ 281
Podsumowanie ............................................................................................................. 286

CSS. Antologia. 101 wskazwek i trikw

Rozdzia 9. Specjalne techniki CSS ................................................................. 287


Jak stworzy kolorowe paski przewijania .................................................................... 287
Jak utworzy menu, ktre bdzie widoczne
nawet po przewiniciu zawartoci strony ................................................................... 289
Jak uzyska nieruchome menu w przegldarce Internet Explorer ................................ 293
Czy za pomoc CSS mog utworzy stopk, ktra pozostaje nieruchoma jak ramka? .....297
Czy mona wycznie za pomoc CSS utworzy menu rozwijane? ............................. 304
Czy w CSS mona zaokrgli naroniki ramek? .......................................................... 309
Jak za pomoc CSS uzyska efekt zaokrglonych naronikw, ktry bdzie dziaa
w przegldarkach innych ni Mozilla ........................................................................ 311
Jak w przegldarkach Mozilla i Internet Explorer
stworzy pprzezroczyste elementy .......................................................................... 317
Jak za pomoc CSS wyrni zewntrzne cza ........................................................... 320
Czy mona uy CSS do wstawiania tekstu do dokumentu? ........................................ 322
Jak zdefiniowa styl dla pierwszej linii lub pierwszej litery w bloku ........................... 323
Czy stosowanie efektw, ktre nie dziaaj w niektrych przegldarkach, to co zego? .....327
Podsumowanie ............................................................................................................. 327

Skorowidz ..................................................................................... 329

Rozdzia 2.

Style tekstowe i inne


techniki podstawowe
Ten rozdzia omawia zastosowanie CSS do formatowania tekstu, a take dostarcza
kolejnej porcji wiedzy na temat CSS oraz odpowiedzi na niektre z czsto pojawiajcych
si pyta. Jeli CSS jest dla Ciebie now technik, analizujc zawarte tu przykady
poznasz waciwoci i sposoby jej wykorzystania. Dziki nim bdziesz mg szerzej
spojrze na kaskadowe arkusze stylw i rozpocz wasne eksperymenty. Dla tych,
ktrzy znaj ju podstawy CSS, niniejszy rozdzia bdzie przypomnieniem tych wiadomoci, ktre by moe zdyy ju ulecie z pamici.
Zaprezentowane przykady dziaaj poprawnie w rnych przegldarkach w rnych
wersjach. Pamitaj, e testowanie kodu w wielu aplikacjach jest bardzo wane, chocia
akurat w przypadku stylw tekstowych nie powinno by jakichkolwiek problemw.
Jedynie w starszych wersjach przegldarek mog wystpi pewne rozbienoci w wywietlaniu stron, jednak nie bd to powane bdy.

Jak zastpi znacznik czcionki


za pomoc CSS
Okrelanie wygldu tekstu w przegldarkach za pomoc CSS jest moliwe od czasu
czwartych wersji IE i Netscape, wic nie ma powodw, aby do tego celu wci stosowa znacznik <font>. Zastpienie go odpowiednim stylem to najprostszy sposb formatowania tekstu przy uyciu CSS.
Korzystajc ze znacznikw <font>, naley koniecznie zdefiniowa styl dla kadego
akapitu na kadej stronie witryny:
<p><font color="#800080"
face="Verdana,Geneva,Arial,Helvetica,sans-serif">Nadziewane papryki to
znakomita przystawka lub dodatek do dania kuchni chiskiej. Nadaj si rwnie
do umieszczenia na stole szwedzkim i nawet dzieci lubi je je. </font></p>

22

CSS. Antologia. 101 wskazwek i trikw

Rozwizanie
Korzystajc z kaskadowych arkuszy stylw, naley zdefiniowa w stylu waciwo
color znacznika <p> jako #800080, a waciwo font-family jako Verdana,Geneva,
Arial,Helvetica,sans-serif:
p {
color: #800080;
font-family: Verdana,Geneva,Arial,Helvetica,sans-serif;
}

Od tej pory kady tekst zawarty w znaczniku <p> bdzie wywietlany zgodnie z powyszym stylem, dziki czemu nie bdziesz musia wielokrotnie stosowa dodatkowych
opisw do kadego znacznika. Znacznie atwiej bdzie Ci zmodyfikowa witryn, gdy
klient niespodziewanie zada zmiany w stu dokumentach czcionki z Verdana na Times!

Jak opisywa wielko czcionki


za pomoc pikseli, punktw,
emw czy innej jednostki
W CSS wielko tekstu mona okreli za pomoc waciwoci font-size. Na przykad:
font-size: 12px;

Istnieje jednak szereg innych sposobw definiowania rozmiarw czcionki. Decyzja,


ktry wybra, wymaga podstawowej wiedzy o wzgldnej wartoci kadej z dostpnych
jednostek rozmiaru tekstu.

Rozwizanie
Jednostki rozmiaru tekstu
W tabeli 2.1 zebrane zostay jednostki, ktre mona stosowa do definiowania rozmiaru
tekstu w dokumentach.
Tabela 2.1. Jednostki rozmiaru tekstu
Identyfikator jednostki

Nazwa jednostki

pt

punkt

pc

pica

px

piksel

em

em

ex

ex

procent

Rozdzia 2. Style tekstowe i inne techniki podstawowe

23

Punkty i pice
p {
font-size: 10pt;
}

Powiniene unika stosowania punktw i pic do definiowania rozmiaru tekstu wywietlanego na ekranie. Jednostki te znakomicie nadaj si do okrelania rozmiaru
w drukarstwie, gdy do tego celu zostay stworzone. Punkt jest rwny 1/72 cala, a pica
1
/6 cala. Rozmiar wydrukowanego tekstu bdzie dokadnie odpowiada podanym wartociom. Niestety komputery nie potrafi dokadnie okreli rzeczywistej wielkoci elementw wywietlanych na ekranie monitora, dlatego zgaduj czsto niepoprawnie
rozmiary punktu lub picy, przez co kocowy efekt rni si w zalenoci od platformy. Jeli tworzysz drukowany arkusz stylw lub dokument przeznaczony do wydrukowania, moesz stosowa opisywane jednostki. Zasadniczo jednak naley ich unika
podczas projektowania stron internetowych.

Piksele
p {
}

font-size: 12px;

Wielu programistw do okrelania wielkoci tekstu woli stosowa piksele. Jednostka


ta pozwala zachowa jednolity wygld strony w rnych przegldarkach i na rnych
platformach. Z drugiej strony piksele nie uwzgldniaj ustawie uytkownika w przegldarce, a ponadto w wikszoci przegldarek uytkownik nie moe skalowa tekstu,
ktrego rozmiar okrelono w pikselach. To powany problem dla tych osb, ktre
musz powiksza wywietlany na ekranie tekst, aby mc go odczyta. Z tego wzgldu,
mimo e piksele wydaj si najprostszym rozwizaniem, powinno si unika ich stosowania wszdzie tam, gdzie dostpna jest inna metoda okrelania rozmiaru czcionki
zwaszcza w przypadku stron z du iloci tekstu. Jeli tworzysz dokument przeznaczony do wydrukowania lub uywasz do drukowania arkuszy stylw, powiniene
cakowicie zrezygnowa z okrelania rozmiaru tekstu w pikselach. Piksele nie maj
adnego znaczenia w drukarstwie i podobnie jak przy wywietlaniu na ekranie tekstu
okrelonego w punktach aplikacje drukujce prbuj jedynie odgadn wielko
czcionki, jaka powinna pojawi si na papierze.

Emy
Em jest wzgldn jednostk rozmiaru tekstu 1 em jest rwny wysokoci litery M
w domylnym rozmiarze czcionki. Jeli chodzi o CSS, 1em jest rwny domylnej
wielkoci czcionki uytkownika lub jeeli rni si on od czcionki domylnej
rwny wielkoci elementu nadrzdnego. Jeli stosujesz emy (lub inn jednostk wzgldn)
do oznaczania wszystkich rozmiarw czcionek w dokumencie, uytkownicy bd mogli
zmienia rozmiar wywietlanego tekstu zgodnie z wasnymi preferencjami. Zadeklarujmy
rozmiar tekstu w znaczniku <p> jako 1em:
p {
font-size: 1em;
}

24

CSS. Antologia. 101 wskazwek i trikw

Uytkownik korzystajcy z przegldarki Internet Explorer 6, w ktrej rozmiar wywietlanego tekstu zosta ustawiony jako redni, ujrzy akapit w postaci przedstawionej
na rysunku 2.1.
Rysunek 2.1.
Wygld okna przegldarki
internetowej przy
ustawieniu atrybutu
font-size na 1 em,
a rozmiaru czcionki
w przegldarce na redni

Jeeli natomiast uytkownik bdzie mia przegldark skonfigurowan tak, aby czcionka
wywietlana bya jako Najwiksza, wwczas tekst o wielkoci 1 em bdzie wyglda tak,
jak przedstawia to rysunek 2.2.
Rysunek 2.2.
Wygld okna przegldarki
internetowej przy
ustawieniu atrybutu
font-size na 1 em,
a rozmiaru czcionki
w przegldarce
na Najwiksza

Z punktu widzenia projektanta taki sposb definiowania rozmiaru tekstu zmniejsza


kontrol nad wygldem strony w przegldarce uytkownika. Z drugiej strony umoliwia
on przeczytanie zawartoci przez tych uytkownikw, ktrzy potrzebuj duej czcionki.
Wartoci emw mog by przedstawione jako liczby dziesitne. Na przykad, aby
wywietli tekst o rozmiarze o 10% mniejszym ni domylny rozmiar czcionki uytkownika (lub 10% mniejszym ni rozmiar elementu nadrzdnego), powiniene napisa:
p {
font-size: 0.9em;
}

Rozdzia 2. Style tekstowe i inne techniki podstawowe

25

Natomiast aby wywietli tekst o 10% wikszy:


p {
font-size: 1.1em;
}

Exy
Ex jest wzgldn jednostk wielkoci odpowiadajc wysokoci maej litery x o domylnym rozmiarze. Teoretycznie, jeeli zdefiniujesz rozmiar czcionki jako 1 ex, wielkie
litery w wywietlanym tekcie powinny mie t sam wysoko, co x w przypadku
braku zdefiniowanej wielkoci czcionki.
Niestety dzisiejsze przegldarki nie posiadaj funkcji typograficznych umoliwiajcych dokadne okrelenie rozmiaru ex i zazwyczaj w jaki sposb go szacuj. Z tego
powodu jednostka ta rzadko bywa stosowana w projektowaniu stron internetowych.

Procenty
p {
font-size: 100%;
}

Podobnie jak w przypadku emw i exw, rozmiar czcionki wyraony w procentach


uwzgldnia konfiguracj przegldarki uytkownika i tak opisane czcionki mog by
dowolnie skalowane. Ustawienie znacznika <p> na 100% spowoduje wywietlenie
tekstu o wielkoci rwnej domylnym ustawieniom czcionki uytkownika (podobnie
jak dla 1 em). Zmniejszenie wartoci procentowej spowoduje pomniejszenie wywietlanego tekstu:
p {
font-size: 90%;
}

Zwikszenie wartoci spowoduje powikszenie tekstu:


p {
font-size: 150%;
}

Sowa kluczowe
Rozmiar tekstu mona rwnie definiowa za pomoc sw kluczowych.

Sowa kluczowe definiujce bezwzgldny rozmiar czcionki


W CSS istnieje siedem sw kluczowych okrelajcych bezwzgldny rozmiar tekstu:
xx-small,
x-small,
small,

26

CSS. Antologia. 101 wskazwek i trikw


medium,
large,
x-large,
xx-large.

Sowa te s wzgldne wobec siebie nawzajem, a przegldarki mog interpretowa je


na rne sposoby. Wikszo przegldarek wywietla rozmiar medium jako odpowiadajcy rozmiarowi tekstu bez zdefiniowanego stylu, natomiast pozostae rozmiary s
odpowiednio skalowane. Wyjtek stanowi przegldarka Internet Explorer 5 (oraz
wersja 6 w przypadku niektrych typw dokumentw), w ktrej rozmiarowi tekstu
bez zdefiniowanego stylu odpowiada sowo kluczowe small.
Bezwzgldny rozmiar czcionki oznacza w tym przypadku, e nie jest on zaleny od
adnego elementu nadrzdnego. W przeciwiestwie jednak do wartoci bezwzgldnych podawanych w pikselach i punktach, umoliwia on zmian rozmiaru ogldanego
przez uytkownika tekstu oraz uwzgldnia ustawienia przegldarki. Gwnym problemem w stosowaniu sw kluczowych jest to, e tekst o rozmiarze x-small moe
by w jednej przegldarce doskonale czytelny, a w innej zdecydowanie za may.

Sowa kluczowe definiujce wzgldny rozmiar czcionki


Stosujc sowa kluczowe larger lub smaller, definiujemy wzgldny rozmiar czcionki, ktry okrelany bdzie na podstawie rozmiaru elementu podrzdnego podobnie
jak w przypadku zastosowania jednostki em lub %. Jeeli zatem zdefiniujesz znacznik
<p> jako small i zechcesz wywietli wyrniony tekst jako odpowiednio wikszy,
powiniene doda do arkusza stylw nastpujcy fragment (listing 2.1):
Listing 2.1. Zawarto pliku wzgledny.css
p {
font-size: small;
}
em {
font-size: larger;
}

Poniszy fragment zostanie wywietlony w przegldarce tak, jak zostao to pokazane


na rysunku 2.3, poniewa tekst zawarty w znaczniku <em> jest zdefiniowany jako
wikszy (larger) ni jego element nadrzdny znacznik <p> (listing 2.2).
Listing 2.2. Zawarto pliku wzgledny.html (fragment)
<p>Nadziewane papryki to <em>znakomita przystawka</em> lub dodatek
do dania kuchni
chiskiej. Nadaj si rwnie do umieszczenia na stole szwedzkim
i nawet dzieci lubi je je.</p>

Rozdzia 2. Style tekstowe i inne techniki podstawowe

27

Rysunek 2.3.
Rozmiar wyrnionego
tekstu jest wikszy ni
pozostaej czci akapitu

Rozmiary wzgldne i ich dziedziczenie


Gdy stosujesz jeden ze sposobw wzgldnego okrelania rozmiaru czcionki, pamitaj,
e modyfikowany element dziedziczy rozmiar pocztkowy od elementu podrzdnego,
po czym odpowiednio modyfikuje swoj wielko. Nie stanowi to problemu w przypadku ukadw, w ktrych nie ma wielu zagniede. Jeli jednak strona zawiera
bdzie tabele z rozbudowanymi zagniedeniami, wwczas nie zawsze bdzie oczywiste, ktry element jest nadrzdny i dziedziczenie rozmiarw moe przebiega niezgodnie z oczekiwaniami. Ilustruje to poniszy przykad.
Arkusz stylw zawiera nastpujcy kod, definiujcy znacznik td tak, aby wywietla
tekst o rozmiarze 80%. Jest to nieco mniejsza warto od domylnej czcionki uytkownika i moe by modyfikowana za pomoc ustawie przegldarki (listing 2.3):
Listing 2.3. Plik zagniezdzanie.css
td {
font-size: 80%;
}

Na stronie, ktra nie posiada zagniedonych komrek tabel, tekst bdzie konsekwentnie wywietlany jako pomniejszony. Jednak w przypadku ukadu zawierajcego
zagniedone tabele (listing 2.4), rozmiar tekstu w kadej z tych tabel wyniesie 80%
rozmiaru czcionki w tabeli nadrzdnej.
Listing 2.4. Plik zagniezdzanie.html (fragment)
<table>
<tr>
<td>To jest pierwsza tabela
<table>

28

CSS. Antologia. 101 wskazwek i trikw


<tr>
<td> To jest druga tabela
<table>
<tr>
<td> To jest trzecia tabela</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>

Efekt dziaania powyszego fragmentu zosta pokazany na rysunku 2.4. Jak widzisz,
w kadej kolejnej tabeli tekst staje si mniejszy.
Rysunek 2.4.
Efekt zastosowania
wzgldnych rozmiarw
czcionek dla tekstu
w tabelach
zagniedonych

Analiza
Przy wyborze sposobu okrelania rozmiaru tekstu naley zawsze zastosowa metod,
ktra pozwoli uytkownikom zmienia rozmiar wywietlanej czcionki i dziki ktrej
rozmiar ten bdzie zgodny z ustawieniami przegldarki uytkownika. Rozmiary wzgldne
wydaj si funkcjonowa poprawnie w ukadach CSS i prostych ukadach zawierajcych tabele, jednak w przypadku tabel zagniedonych mog sprawi troch kopotw ze wzgldu na sposb dziedziczenia rozmiaru. Jeli jeste zdecydowany, aby zastosowa jednostki bezwzgldne, rozwa wczenie do interfejsu uytkownika opcji
wyboru rozmiaru wywietlanego tekstu.

Rozdzia 2. Style tekstowe i inne techniki podstawowe

29

Jak zdefiniowa czcionk


dla wywietlanego tekstu
Rozwizanie
Zdefiniuj czcionk, za pomoc ktrej ma by wywietlany tekst akapitu, korzystajc
z waciwoci font-family:
p {
font-family: Verdana;
}

Analiza
Oprcz najbardziej popularnych czcionek, takich jak Verdana czy Times New Roman,
CSS umoliwia stosowanie innych znanych rodzin czcionek:
serif,
sans-serif,
monospace,
cursive,
fantasy.

Przy definiowaniu czcionek naley pamita, e uytkownicy prawdopodobnie nie


maj zainstalowanych tych samych krojw co my. Jeeli czcionka nie zostanie odnaleziona w systemie, wwczas tekst bdzie wywietlany za pomoc domylnej czcionki
przegldarki internetowej, bez wzgldu na ukad witryny.
Najprostsze rozwizanie to zadeklarowa popularn rodzin czcionek i pozostawi
wybr konkretnej czcionki systemowi uytkownika. Na przykad, jeeli dokument ma
by wywietlony przy uyciu czcionki sans-serif (Arial), wystarczy napisa nastpujc deklaracj:
p {
font-family: sans-serif;
}

Z pewnoci jednak chciaby mie wiksz kontrol nad sposobem wywietlania tekstu w przegldarce. Na szczcie istnieje moliwo zdefiniowania konkretnej nazwy
czcionki, a nie tylko rodziny czcionek. Przyjrzyjmy si poniszej deklaracji znacznika <p>.
Zgodnie z ni najpierw sprawdzona zostanie obecno w systemie czcionki Verdana;
w przypadku jej braku przegldarka sprawdzi obecno czcionki Geneva. Jeli przegldarka take tej nie odnajdzie, nastpi prba odszukania czcionek Arial i Helvetica.

30

CSS. Antologia. 101 wskazwek i trikw

Jeli te rwnie nie zostan znalezione, tekst zostanie wywietlony za pomoc domylnej czcionki systemowej sans-serif.
p {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

Jak usun podkrelenie


z czy do stron internetowych
Domylnie tekst bdcy czem do innej strony WWW jest podkrelony i rni si kolorem od reszty tekstu. Czasem jednak bdziesz chcia to wyrnienie usun.

Rozwizanie
Aby usun podkrelenie, naley zastosowa waciwo text-decoration. Domylna
warto tej waciwoci dla znacznika <a> to <underline>. Aby zlikwidowa podkrelenie, naley do definicji znacznika doczy ponisz lini kodu:
text-decoration: none;

Efekt widoczny na rysunku 2.5 zosta uzyskany za pomoc kodu CSS przedstawionego
na listingu 2.5.
Listing 2.5. Plik podkreslanie_lacz.css
a:link, a:visited {
text-decoration: none;
}

Rysunek 2.5.
Modyfikujc waciwo
text-decoration, mona
usun podkrelenie
z czy internetowych

Rozdzia 2. Style tekstowe i inne techniki podstawowe

31

Analiza
Oprcz underline i none, waciwo text-decoration moe przyjmowa nastpujce
wartoci:
overline,
line-through,
blink.

Wyprbuj dziaanie tych wartoci zarwno pojedynczo, jak i kilku naraz. Na przykad, aby uzyska podkrelenie cza oraz lini nad nim (jak na rysunku 2.6), powiniene uy kodu przedstawionego na listingu 2.6.
Listing 2.6. Plik podkreslanie_lacz2.css
a:link, a:visited {
text-decoration: underline overline;
}

Rysunek 2.6. Waciwoci text-decoration mona przypisa kilka wartoci naraz, uzyskujc w ten
sposb interesujce efekty
Naduywanie podkrelenia
Istnieje rwnie moliwo zastosowania waciwoci text-decoration dla tekstu, ktry nie
jest czem, jednak w takim przypadku naley zachowa szczegln ostrono. Podkrelanie
cz jest przyjte i stosowane na caym wiecie, tak wic uytkownik moe potraktowa kady
podkrelony tekst jako cze.

32

CSS. Antologia. 101 wskazwek i trikw

Kiedy nie naley usuwa podkrelenia?


Podkrelanie czy standardowo obsuguj wszystkie przegldarki internetowe. Kady
uytkownik spodziewa si, e cza na stronie bd podkrelone. Usunicie podkrelenia bardzo utrudni ich odnalezienie nawet jeli bd innego koloru. Tak wic
nie polecam usuwania podkrelenia czy. Istnieje wiele innych sposobw ich atrakcyjnego wyrnienia, ktre nie wymagaj rezygnacji ze stosowania podkrele.
Zupenie inny przypadek stanowi cza w ramach menu lub w formie przycisku. W takiej
sytuacji moesz zdecydowa si na usunicie podkrelenia, gdy jest oczywiste, e nie
jest to zwyky tekst.

Jak utworzy cze, ktrego kolor


zmieni si po wskazaniu kursorem
Jednym z atrakcyjnych efektw dla czy jest zmiana wygldu w chwili wskazania
kursorem myszki. Efekt ten stosuje si zazwyczaj w celu zastpienia standardowych
przyciskw nawigacji, jednak mona go rwnie wykorzysta do wyrnienia czy
w dokumencie.

Rozwizanie
Aby uzyska wspomniany efekt, zmienimy style pseudoklas :hover i :active tak, aby
rniy si od innych pseudoklas znacznika kotwicy.
Tworzenie efektu rozpoczniemy od nastpujcej deklaracji stylw znacznika cza (listing 2.7).
Listing 2.7. Plik podkreslanie_lacz3.css
a:link, a:visited, a:hover, a:active {
text-decoration: underline;
color: #6A5ACD;
background-color: transparent;
}

Po zastosowaniu tego stylu cza bd podkrelone i w kolorze niebieskim #6A5ACD,


co zostao pokazane na rysunku 2.7.
Aby wyrni pseudoklasy :hover i :active, naley usun je z deklaracji innych
pseudoklas i wprowadzi ich wasne deklaracje. Do standardowego podkrelenia doczyam lini grn, zmodyfikowany kolor ta oraz zastosowaam ciemniejszy kolor
tekstu. Wynikowy styl CSS zosta pokazany na listingu 2.8, a efekt kocowy na rysunku 2.8.

Rozdzia 2. Style tekstowe i inne techniki podstawowe


Rysunek 2.7.
Dla wszystkich
pseudoklas czy
zastosowana
zostaa taka
sama deklaracja
kotwicy

Listing 2.8. Plik podkreslanie_lacz4.css


a:link, a:visited {
text-decoration: underline;
color: #6A5ACD;
background-color: transparent;
}
a:hover, a:active {
text-decoration: underline overline;
color: #191970;
background-color: #C9C3ED;
}

Rysunek 2.8.
Efekty
zastosowania
stylu CSS staj
si widoczne po
wskazaniu cza
kursorem myszki

33

34

CSS. Antologia. 101 wskazwek i trikw

Zorientowae si zapewne, e w podobny sposb mona definiowa style dla pozostaych pseudoklas. Przede wszystkim moesz specjalnie wyrni cza do stron, ktre
zostay ju odwiedzone przez uytkownika. Aby to zrobi, wystarczy zmodyfikowa
styl pseudoklasy :visited.
Podczas definiowania stylw dla pseudoklas pamitaj, aby nie zmienia rozmiaru czy
gruboci tekstu. Jeli to zrobisz, zawarto strony bdzie pywa, dostosowujc si
w chwili wskazania kursorem do powikszonego tekstu.
Kolejno deklaracji pseudoklas
Pseudoklasy cza powinny zosta zadeklarowane w nastpujcej kolejnoci: link, visited,
hover, active. W przeciwnym razie pseudoklasy mog dziaa niepoprawnie. Prostym sposobem na zapamitanie tej kolejnoci jest mnemonik: LoVeHAte (mionienawi).

Jak wywietli dwa rne style cza


na jednej stronie
W poprzednim przykadzie zobaczylimy, jak zdefiniowa style dla rnych selektorw znacznika kotwicy. Co jednak zrobi, jeli chcielibymy zastosowa rne style
cza w tym samym dokumencie na przykad bez podkrelenia w menu nawigacyjnym, ale z podkreleniem w gwnej czci strony? Jeli cz strony posiada ciemne
to, na pewno chciaby w tym miejscu uy innego koloru czy. Jak zatem to zrobi?

Rozwizanie
Zastosowanie wielu rnych stylw czy zobrazujemy, modyfikujc stworzony wczeniej arkusz stylw (listing 2.9).
Listing 2.9. Plik typy_lacz.css (fragment)
a:link, a:visited {
text-decoration: underline;
color: #6A5ACD;
background-color: transparent;
}
a:hover, a:active {
text-decoration: underline overline;
color: #191970;
background-color: #C9C3ED;
}

Mamy zatem zdefiniowany styl domylny, za pomoc ktrego wywietlane bd cza


w naszych dokumentach. Styl ten definiuje niebieski kolor cza, wic w przypadku
niebieskiego ta cze bdzie niewidoczne. Konieczne jest zatem utworzenie drugiego
zestawu stylw specjalnie dla czy na niebieskim tle.

Rozdzia 2. Style tekstowe i inne techniki podstawowe

35

Najpierw naley okreli klas lub identyfikator ID dla obszaru, ktry zawiera bdzie
cza w zmienionym kolorze. Jeli dla obszaru okrelono ju style CSS, ma on take
okrelon klas lub ID, ktre mog zosta wykorzystane. Zamy, e nasz dokument
zawiera kod pokazany na listingu 2.10:
Listing 2.10. Plik typy_lacz.html (fragment)
<div class="ramka">
<p>Odwied nasz <a href="sklep.html">sklep internetowy</a>, w ktrym znajdziesz
wszystko, czego potrzebujesz</p>
</div>

Konieczne jest utworzenie stylu CSS dla czy w obszarze, w ktrym element nadrzdny zosta zmodyfikowany za pomoc klasy ramka (listing 2.11):
Listing 2.11. Plik typy_lacz.css (fragment)
.ramka {
color: #FFFFFF;
background-color: #6A5ACD;
}
.ramka a:link, .ramka a:visited {
text-decoration: underline;
color: #E4E2F6;
background-color: transparent;
}
.ramka a:hover, .ramka a:active {
background-color: #C9C3ED;
color: #191970;
}

Na rysunku 2.9 widoczne s cza sformatowane za pomoc dwch rnych stylw


w gwnym dokumencie widoczne s efekty pierwszego stylu, natomiast cze w niebieskiej ramce zostao sformatowane za pomoc drugiego stylu.
Rysunek 2.9.
W jednym dokumencie
mona wykorzysta
dwa rne style
formatowania czy

36

CSS. Antologia. 101 wskazwek i trikw

Jak doda kolor ta do nagwka


Kolor ta mona zdefiniowa dla dowolnego elementu strony internetowej, w tym rwnie dla nagwka.

Rozwizanie
Na listingu 2.12 przedstawiony zosta arkusz CSS definiujcy styl dla wszystkich nagwkw pierwszego stopnia w dokumencie. Efekt dziaania tego stylu widoczny jest
na rysunku 2.10.
Listing 2.12. Plik kolor_naglowka.css (fragment)
h1 {
background-color: #ADD8E6;
color: #256579;
font: 18px Verdana, Geneva, Arial, Helvetica, sans-serif;
padding: 2px;
}

Rysunek 2.10.
Nagwki rwnie
mog posiada to

Miejsce dla koloru


Jeli dodajemy kolor ta do nagwka, warto zmodyfikowa sam tekst tak, aby utworzy troch
wolnej przestrzeni pomidzy nim a krawdzi kolorowego ta tak jak w nagwku w powyszym
przykadzie.

Rozdzia 2. Style tekstowe i inne techniki podstawowe

37

Jak podkreli tekst nagwka


Rozwizanie
S dwa sposoby, aby doda podkrelenie do tekstu nagwka. Najprociej jest zastosowa waciwo text-decoration, ktr poznalimy przy okazji nadawania stylw
czom. Metoda ta pozwala podkreli tekst lini w tym samym kolorze co tekst (listing
2.13 i rysunek 2.11).
Listing 2.13. Plik podkreslenie_naglowka.css (fragment)
h1 {
font: 18px Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: underline;
}

Rysunek 2.11.
Podkrelenie tekstu
nagwka za pomoc
waciwoci
text-decoration

Inny sposb podkrelenia nagwka to dodanie do niego dolnej ramki (listing 2.14).
Takie rozwizanie jest bardziej elastyczne moesz ustali odlego linii podkrelenia od tekstu, a take zastosowa inny kolor linii ni tekstu. Jednak w tym przypadku efekt kocowy moe nieznacznie rni si w poszczeglnych przegldarkach,
musisz zatem upewni si, e przynajmniej w tych najpopularniejszych otrzymany rezultat bdzie odpowiada Twoim oczekiwaniom (patrz rysunek 2.12).
Listing 2.14. Plik podkreslenie_naglowka2.css (fragment)
h1 {
font: 18px Verdana, Geneva, Arial, Helvetica, sans-serif;
padding: 2px;
border-bottom: 1px solid #aaaaaa;
}

38

CSS. Antologia. 101 wskazwek i trikw

Rysunek 2.12.
Podkrelenie
tekstu nagwka
z wykorzystaniem
dolnej ramki

Jak usun odstp


pomidzy nagwkiem <h1>
a wystpujcym pod nim akapitem
Rozwizanie
Przegldarki wywietlaj przerw pomidzy nagwkiem a akapitem, stosujc marginesy
grny i dolny, ktre przypisane s domylnie do znacznika nagwka i akapitu.
Aby zlikwidowa ten odstp, naley usun nie tylko dolny margines nagwka, ale
take grny margines akapitu. Jednak ze wzgldu na to, e niewygodnie byoby stosowa
selektor CSS w odniesieniu do pierwszego akapitu za nagwkiem, atwiej bdzie
przypisa nagwkowi ujemny margines dolny. Marginesy, w przeciwiestwie do atrybutu
padding (patrz listing 2.14), mog przyjmowa wartoci ujemne.
Marginesy widoczne na rysunku 2.13 nie zostay zmienione.
Rysunek 2.13.
Domylny odstp
pomidzy nagwkiem
pierwszego stopnia
a akapitem

Rozdzia 2. Style tekstowe i inne techniki podstawowe

39

Na rysunku 2.14 pokazano ten sam nagwek <h1> zmodyfikowany przez poniszy
styl CSS:
h1 {
font: 18px Verdana, Geneva, Arial, Helvetica, sans-serif;
margin-bottom: -10px;
}

Rysunek 2.14.
Sposb wywietlania
nagwka uleg zmianie
po przypisaniu wartoci
10px do waciwoci
margin-bottom

Jak podwietli tekst


bez stosowania znacznikw czcionki
Bez stosowania CSS do podwietlenia fragmentu tekstu (na przykad w celu podkrelenia istotnego wyraenia lub wyrnienia wystpie danej frazy w tekcie dokumentu)
naleaoby wykorzysta odpowiedni znacznik czcionki.

Rozwizanie
CSS pozwala utworzy klas dla stylu podwietlenia, a nastpnie zastosowa j poprzez umieszczenie tekstu, ktry ma zosta podwietlony, wewntrz znacznikw <span>
dotyczcych tej klasy. Na przykad w poniszym akapicie (listing 2.15) fragment tekstu
zosta umieszczony wewntrz znacznika <span> zwizanego z klas zolty.
Listing 2.15. Plik zolty.html (fragment)
<p><span class="zolty">Nadziewane papryki</span> to znakomita przystawka lub
dodatek
do dania kuchni chiskiej. Nadaj si rwnie do umieszczenia na stole szwedzkim
i nawet dzieci lubi je je.</p>

Zawarto klasy zolty zostaa przedstawiona na listingu 2.16, a efekt jej zastosowania
widoczny jest na rysunku 2.15.

40

CSS. Antologia. 101 wskazwek i trikw

Listing 2.16. Plik zolty.css (fragment)


.zolty {
background-color: #FFFFCC;
color: #B22222;
}

Rysunek 2.15.
Podwietlenie tekstu
za pomoc stylu CSS

Jak zmodyfikowa odstp


midzy liniami tekstu
Jedn z istotnych zalet CSS w porwnaniu z klasycznymi znacznikami czcionki jest to,
e kaskadowe arkusze stylw oferuj o wiele wiksz kontrol nad wygldem tekstu
na stronie internetowej. W tym przykadzie zobaczymy, w jaki sposb zmieni odstpy
midzy liniami tekstu.

Rozwizanie
Jeeli domylne odstpy pomidzy liniami s za mae, powiksz je za pomoc waciwoci line-height (listing 2.17).
Listing 2.17. Plik odstepy.css
p {
font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
line-height: 2.0;
}

Wynik powyszej modyfikacji znacznika <p> zosta pokazany na rysunku 2.16.


Nie przesad ze zbyt du odlegoci midzy liniami, w przeciwnym razie czytanie
tekstu bdzie utrudnione.

Rozdzia 2. Style tekstowe i inne techniki podstawowe

41

Rysunek 2.16.
Modyfikacja odstpw
midzy liniami
za pomoc waciwoci
line-height

Brak jednostek?
Waciwo line-height moesz take zdefiniowa stosujc jednostki wielkoci dostpne
w CSS, czyli w emach lub pikselach. Jednak w takim przypadku znika zaleno pomidzy
wysokoci linii a rozmiarem czcionki elementw pochodnych.
Na przykad, jeeli w powyszym pliku klasa <span> definiowaaby duy rozmiar czcionki (large),
wysoko linii byaby proporcjonalna do rozmiaru czcionki, gdy waciwo line-height
akapitu zostaa ustawiona jako warto liczbowa 2.0. Jeeli natomiast line-height miaaby
warto 2 emy lub 200%, wwczas klasa <span> odziedziczyaby rzeczywist wysoko linii,
a nie wspczynnik proporcjonalnoci i w rezultacie rozmiar czcionki large nie wpynby na
wysoko linii w klasie <span>. W zalenoci od efektu, ktry chcesz uzyska, takie dziaanie
kodu moe by czasami przydatne.

Jak wyjustowa tekst


Justowanie tekstu powoduje, e odlego pomidzy poszczeglnymi wyrazami w linii
zostaje zmodyfikowana tak, aby tekst zosta wyrwnany zarwno do lewej, jak i do
prawej krawdzi dokadnie tak, w tej ksice. Ten sposb wyrwnywania tekstu
dostpny jest w CSS.

Rozwizanie
Aby wyjustowa tekst akapitu, naley skorzysta z waciwoci text-align (listing 2.18).
Listing 2.18. Plik justowanie.css
p {

text-align: justify;
font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
line-height: 2.0;

42

CSS. Antologia. 101 wskazwek i trikw

Na rysunku 2.17 przedstawiony zosta efekt dziaania powyszego listingu.


Rysunek 2.17.
Justowanie tekstu
za pomoc
waciwoci
text-align

Analiza
Waciwo text-align, obok justify, moe przyjmowa nastpujce wartoci:
right

Wyrwnuje tekst do prawego marginesu kontenera.


left

Wyrwnuje tekst do lewego marginesu kontenera.


center

Wyrodkowuje tekst zawarty w kontenerze.

Jak nada styl poziomej linii


Rozwizanie
Moesz modyfikowa zarwno kolor, jak i wysoko oraz dugo linii poziomej.
Zwr uwag, e w poniszym listingu (2.19) uyam tych samych wartoci dla waciwoci color oraz background-color, poniewa przegldarki oparte na Mozilli odczytuj warto background-color, podczas gdy Internet Explorer korzysta z waciwoci color.

Rozdzia 2. Style tekstowe i inne techniki podstawowe

43

Listing 2.19. Plik styl_hr.css (fragment)


hr {
border: none;
background-color: #ADD8E6;
color: #ADD8E6;
height: 1px;
width: 80%;
}

Efekt zastosowania powyszego stylu widoczny jest na rysunku 2.18.


Rysunek 2.18.
Zmiana koloru,
wysokoci
i dugoci linii
poziomej

Jak wprowadzi wcicie w tekcie


Rozwizanie
Tekst moe zosta wcity przy wykorzystaniu waciwoci padding-left w odniesieniu
do kontenera tekstu (listing 2.20 i 2.21).
Listing 2.20. Plik wciecie.html (fragment)
<p class="wciecie">Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Vivamus mollis. Etiam aliquet. Ut ultrices
justo ut arcu. Proin a purus. Fusce pharetra ultrices nibh.
Nam erat lectus, dapibus id, congue vel, cursus a, tellus.
Sed turpis ante, condimentum at, accumsan eget, pulvinar
vitae, nibh.</p>

44

CSS. Antologia. 101 wskazwek i trikw

Listing 2.21. Plik wciecie.css (fragment)


.wciecie {
padding-left: 30px;
}

Akapit, ktrego tekst zosta wcity, pokazany zosta na rysunku 2.19.


Rysunek 2.19.
Wcicie tekstu
za pomoc
waciwoci CSS

Analiza
Aby uzyska wcicie tekstu, nie powinno si stosowa znacznika HTML <blockquote>,
chyba e tekst ten rzeczywicie jest cytatem. Mimo e niektre graficzne narzdzia do
tworzenia witryn internetowych, jak na przykad Macromedia Dreamweaver, czsto
opisuj ten znacznik jako tekst wcity, oprzyj si pokusie stosowania go w tym celu. Zamiast tego zdefiniuj regu CSS, za pomoc ktrej bdziesz mg stosowa
wcicie do odpowiednich akapitw tekstu. Znacznik <blockquote> przeznaczony jest
do oznaczania cytatu i jest wykorzystywany przez aplikacje dla osb z upoledzeniem
wzroku. Oznaczony w ten sposb tekst bdzie odczytany z inn intonacj, aby odbiorca
mg si zorientowa, e jest to cytat. Jeeli zastosujesz <blockquote> do wcicia
zwykego akapitu, moe to wprowadzi w bd osoby korzystajce z oprogramowania
tego typu.
Wcicie pierwszej linii
Ta sama technika pozwala take zastosowa wcicie tylko w odniesieniu do pierwszej linii
kadego akapitu. Aby wci pierwszy akapit, naley uy waciwoci text-indent w odniesieniu do znacznika akapitu lub do klasy stosowanej do modyfikacji akapitw:
p {
}

text-indent: 20px;

Rozdzia 2. Style tekstowe i inne techniki podstawowe

45

Jak wyrodkowa tekst


Rozwizanie
Aby wyrodkowa tekst lub inny element, naley waciwoci text-align przypisa
warto center (listing 2.22 i 2.23).
Listing 2.22. Plik wysrodkowanie.html (fragment)
<p class="wysrodkowany">Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Vivamus mollis. Etiam aliquet. Ut ultrices
justo ut arcu. Proin a purus. Fusce pharetra ultrices nibh.
Nam erat lectus, dapibus id, congue vel, cursus a, tellus. Sed
turpis ante, condimentum at, accumsan eget, pulvinar vitae,
nibh.</p>

Listing 2.23. Plik wysrodkowanie.css (fragment)


.wysrodkowany {
text-align: center;
}

Rezultat widoczny jest na rysunku 2.20.


Rysunek 2.20.
Wyrodkowanie
tekstu za pomoc
waciwoci text-align

46

CSS. Antologia. 101 wskazwek i trikw

Jak za pomoc CSS zamieni


wszystkie litery w tekcie na wielkie
Rozwizanie
Aby zamieni wszystkie litery w tekcie na wielkie lub przeprowadzi inne przeksztacenia
tekstu, naley skorzysta z waciwoci text-transform (listing 2.24 i 2.25).
Listing 2.24. Plik wielkie_litery.html (fragment)
<p class="przeksztalcenie">Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Vivamus mollis. Etiam aliquet. Ut ultrices
justo ut arcu. Proin a purus. Fusce pharetra ultrices nibh. Nam
erat lectus, dapibus id, congue vel, cursus a, tellus. Sed
turpis ante, condimentum at, accumsan eget, pulvinar vitae,
nibh.</p>

Listing 2.25. Plik wielkie_litery.css (fragment)


.przeksztalcenie {
text-transform: uppercase;
}

Zwr uwag na wielkie litery w tekcie na rysunku 2.21.


Rysunek 2.21.
Efekt dziaania
waciwoci
uppercase

Rozdzia 2. Style tekstowe i inne techniki podstawowe

47

Analiza
Waciwo text-transform pozwala przeprowadzi wiele innych przeksztace tekstu.
Na przykad warto capitalize spowoduje, e kady wyraz bdzie rozpoczyna si
wielk liter (listing 2.26 i rysunek 2.22).
Listing 2.26. Plik poczatek_wielka.css (frament)
.przeksztalcenie {
text-transform: capitalize;
}

Rysunek 2.22.
Modyfikacja
wygldu tekstu
za pomoc
waciwoci
text-transform

Inne dopuszczalne wartoci waciwoci text-transform to:


lowercase,
none (warto domylna).

Jak zmieni lub usun


znaki punktora na licie elementw
Rozwizanie
Wygld punktorw listy elementw mona zmodyfikowa za pomoc waciwoci
list-style-type (listing 2.27).

48

CSS. Antologia. 101 wskazwek i trikw

Listing 2.27. Plik punktory.html (fragment)


<ul>
<li>Pierwszy element listy</li>
<li>Drugi element listy</li>
<li>Trzeci element listy</li>
</ul>

Aby uy punktorw kwadratowych (rysunek 2.23), naley waciwoci list-styletype przypisa warto square (listing 2.28).
Rysunek 2.23.
Lista elementw
wywietlona
z wykorzystaniem
punktorw
kwadratowych

Listing 2.28. Plik punktory.css


ul {
list-style-type: square;
}

Analiza
Oto pozostae dopuszczalne wartoci waciwoci list-style-type:
disc,
circle,
decimal-leading-zero,
decimal,
lower-roman,
upper-roman,
lower-greek,

Rozdzia 2. Style tekstowe i inne techniki podstawowe

49

lower-alpha,
lower-latin,
upper-alpha,
upper-latin,
Hebrew,
Armenian,
Georgian,
none.

Nie wszystkie wymienione wartoci s obsugiwane przez kad przegldark; jeeli


dana warto nie zostanie rozpoznana, zastosowany zostanie punktor domylny. Aby
sprawdzi, ktre rodzaje punktorw s obsugiwane przez Twoj przegldark, moesz
wej na stron http://www.meyerweb.com/eric/css/tests/css2/sec12-06-02a.htm. Ustawienie waciwoci list-style-type jako none (listing 2.29) spowoduje, e nie bd wywietlane jakiekolwiek punktory, jednak zawarto listy pozostanie wcita w stosunku
do reszty tekstu. Tak sytuacj przedstawia rysunek 2.24.
Listing 2.29. Plik punktory2.css
ul {
list-style-type: none;
}

Rysunek 2.24.
Lista bez punktorw

50

CSS. Antologia. 101 wskazwek i trikw

Jak zdefiniowa punktor uytkownika


Rozwizanie
Aby zastosowa wasny obrazek jako punktor listy numerowanej, naley zamiast waciwoci list-style-type uy waciwoci list-style-image, ktra pozwala poda
adres URL zawierajcy ciek i nazw pliku graficznego. Zostao to pokazane na listingu 2.30.
Listing 2.30. Plik wlasny_punktor.css
ul {
list-style-image: url(bullet.gif);
}

Przykad zastosowania wasnego punktora przedstawia rysunek 2.25.


Rysunek 2.25.
Zastosowanie
wasnego obrazka
jako punktora
listy elementw

Wiele punktorw na jednej licie


Waciwo list-style-image stosuje si do modyfikacji znacznikw elementw listy <li>,
jednak mona uy jej take w odniesieniu do listy jako caoci i wtedy poszczeglne elementy listy odziedzicz warto waciwoci. Korzystajc z pierwszego rozwizania, mona przypisa kademu elementowi listy inn warto waciwoci list-style-image i uzyska przez
to inny wygld kadego z punktorw.

Rozdzia 2. Style tekstowe i inne techniki podstawowe

51

Jak usun wcity lewy margines


elementw listy
Jeeli ustawisz warto waciwoci list-style-type na none, by moe zechcesz
rwnie zrezygnowa z lewego marginesu lub go zmniejszy (domylnie to do niego
wyrwnywane s elementy listy).

Rozwizanie
Aby cakowicie usun wcicie i wyrwna elementy listy z pozosta zawartoci strony
(tak jak wida to na rysunku 2.26), naley zastosowa kod pokazany na listingu 2.31.
Listing 2.31. Plik lista_bez_wciecia.css
ul {
list-style-type: none;
padding-left: 0;
margin-left: 0;
}

Rysunek 2.26.
Lista bez wci
i punktorw

Analiza
Moesz rwnie dostosowa wielko wcicia do wasnych wymaga. Aby wci list
o kilka pikseli, sprbuj zdefiniowa nastpujcy styl:
ul {
list-style-type: none;
padding-left: 5px;
margin-left: 0;
}

52

CSS. Antologia. 101 wskazwek i trikw

Jak wywietli elementy listy


w poziomie
Domylnie elementy listy wywietlane s jako elementy blokowe, czyli kady w oddzielnej linii. Czasem jednak zachodzi konieczno umieszczenia elementw listy jeden
po drugim.

Rozwizanie
Aby lista zostaa wywietlona w poziomie, naley zdefiniowa waciwo display
znacznika <li> jako inline (listing 2.32 i 2.33).
Listing 2.32. Plik lista_poziomo.html (fragment)
<ul class="poziomo">
<li>Pierwszy element listy</li>
<li>Drugi element listy</li>
<li>Trzeci element listy</li>
</ul>

Listing 2.33. Plik lista_poziomo.css


ul.poziomo li {
display: inline;
}

Wynik dziaania powyszego kodu zosta pokazany na rysunku 2.27.


Rysunek 2.27.
Elementy listy
mog by
wywietlane
w poziomie

Rozdzia 2. Style tekstowe i inne techniki podstawowe

53

Jak doda komentarz do kodu


w pliku CSS
Mona i powinno si umieszcza komentarze do kodu CSS. Jeeli plik CSS jest bardzo
prosty i posiada tylko kilka regu dotyczcych na przykad formatowania tekstu, komentowanie moe by zbdne. Jednak jeli zaczniesz tworzy due pliki CSS z licznymi definicjami stylw i rozbudowanym kodem, wwczas komentarze bardzo si
przydadz. Po pewnym czasie na pewno zapomnisz o szczegach swoich pomysw
i bez komentarzy moesz straci mnstwo czasu na szukanie okrelonej klasy czy zastanawianiu si, co robi dany fragment kodu lub gdzie dokadnie ma zastosowanie.

Rozwizanie
CSS umoliwia stosowanie komentarzy zajmujcych wicej ni jedn lini, podobnie
jak w JavaScript. Aby oznaczy wybrany fragment kodu jako komentarz, naley uy
nastpujcej konstrukcji:
/*
...
*/

Absolutne minimum to umieszczenie komentarza na pocztku kadego arkusza stylw


z opisem zawartoci arkusza.
/* To jest domylny arkusz stylw dla caego tekstu witryny */

Jak usun marginesy bez dodawania


atrybutw do znacznika <body>
Aby bez stosowania CSS usun domylny odstp midzy dokumentem a oknem
przegldarki, naley doda odpowiednie atrybuty do znacznika <body>:
<body topmargin="0" leftmargin="0" marginheight="0" marginwidth="0">

Rozwizanie
W specyfikacji HTML odradza si stosowanie powyszych atrybutw. Powinno si je
zastpowa kodem CSS zdefiniowanym dla znacznika <body>:
body {
margin: 0;
padding: 0;
}

54

CSS. Antologia. 101 wskazwek i trikw

Przegldarka Opera robi to po swojemu


W niektrych wersjach Opery marginesy i odstpy midzy wierszami s definiowane w elemencie <html> zamiast w znaczniku <body>. Z tego powodu, aby zachowa kompatybilno,
naley uy nieznacznie zmodyfikowanego kodu:
html, body {
margin: 0;
padding: 0;
}

Podsumowanie
W rozdziale zostay zawarte informacje na temat podstawowych technik CSS. Przydadz si osobom, ktre wczeniej nie miay kontaktu z kaskadowymi arkuszami stylw.
Postawione pytania dotyczyy formatowania tekstu oraz stylw tekstowych. Stosujc
przedstawione techniki, mona uzyska bardzo atrakcyjne efekty, ktre bd jednak
niedostpne dla osb korzystajcych z przegldarek nieobsugujcych CSS.