CSS.

wiczenia
Autor: Maria Sok
ISBN: 83-246-1097-9
Format: A5, stron: 152
Przykady na ftp: 797 kB

Usprawnij proces projektowania stron WWW

Jak osadza style w dokumentach XHTML?
W jaki sposb formatowa tekst, tabele i cza?
Jak pozycjonowa elementy strony WWW?

Uytkownicy sieci przegldaj witryny WWW nie tylko na monitorach komputerowych.

Czsto take strony internetowe wywietlane s na telefonach komrkowych,
urzdzeniach PDA i terminalach Blackberry. Programy uatwiajce osobom
niepenosprawnym korzystanie z sieci odczytuj treci witryn WWW za pomoc
syntezatorw mowy. Jednak aby witryna WWW dziaaa prawidowo w poczeniu
z rnymi urzdzeniami wywietlajcymi j, niezbdne jest zaprojektowanie jej tak,
aby elementy odpowiedzialne za jej wygld byy odseparowane od treci. W tym celu
konsorcjum W3C zaproponowao w roku 1996 technologi kaskadowych arkuszy
stylw CSS. Dziki stylom projektanci witryn mog zdefiniowa kolorystyk,
liternictwo i inne aspekty wygldu strony niezalenie od jej treci.
Ksika CSS. wiczenia to wprowadzenie do technologii kaskadowych arkuszy
stylw. Czytajc j i wykonujc zawarte w niej wiczenia nauczysz si korzysta
ze stylw w projektach witryn WWW. Poznasz sposoby czenia opisw stylw
z dokumentami XHTML, zasady definiowania stylw dla tekstu i grafiki, jednostki miar
stosowane w stylach i metody pozycjonowania elementw na stronie. Dowiesz si,
jak okreli krj i rozmiar czcionki, wyrni hipercza, sformatowa tabele i listy
oraz przygotowa ukad strony WWW oparty na warstwach.

Wydawnictwo Helion
ul. Kociuszki 1c
44-100 Gliwice
tel. 032 230 98 63
e-mail: helion@helion.pl

Najwaniejsze atrybuty dokumentw XHTML

Rodzaje stylw CSS
Jednostki miary i kolory w stylach
Formatowanie tekstu
Pozycjonowanie elementw strony
Definiowanie wygldu hiperczy
Projektowanie ukadu strony w oparciu o style CSS

Docz do grona profesjonalistw stosujcych w pracy najnowsze technologie

Spis treci
Rozdzia 1. XHTML a CSS
Kod XHTML
Znaczniki
Podstawowe wymagania dotyczce kodu XHTML
Atrybut id
Atrybut lang
Obowizkowe elementy XHTML
Przykadowy dokument XHTML
Kodowanie polskich znakw diakrytycznych
Wywietlanie strony w przegldarce

Rozdzia 2. Kaskadowe arkusze stylw podstawowe definicje

i zasady
Zasady oglne
Typy kaskadowych arkuszy stylw
Grupowanie kodu
Klasy stylu
Zewntrzny arkusz stylw zawierajcy klasy

Rozdzia 3. Skalowalno arkusza stylw

Jednostki miar CSS
Jednostka em
Skalowanie obszaru
Skalowanie wci
Skalowanie obrazw

5
5
6
7
11
11
12
12
15
19

21
22
23
31
32
37

43
43
45
46
48
48

CSS wiczenia

Rozdzia 4. Kolory
Atrybuty definiujce kolor

Rozdzia 5. Tekst
Atrybuty stylu odnoszce si do czcionki
Rozmieszczanie tekstu w pionie i w poziomie
Marginesy i wcicia
Marginesy wewntrzne padding
Formatowanie fragmentw tekstu
Trjkolumnowa strona WWW utworzona
za pomoc formatowania CSS

Rozdzia 6. Model pudekowy

Obramowania
Style pudeek
Pozycjonowanie
Warstwy
Przepenienie
Obrazy

Rozdzia 7. Odnoniki

53
55

61
61
69
77
82
84
92

97
99
102
107
121
126
129

133

Zmiana wygldu odnonikw

134

Dodatek A

Znaczniki i elementy

143

Dodatek B

Oznaczenia i kody kolorw

151

2
Kaskadowe arkusze stylw
podstawowe
definicje i zasady
Kaskadowe arkusze stylw (ang. Cascading Style Sheets CSS),
zalecana przez W3C metoda stosowania stylw, to narzdzie,
ktre pozwoli Ci zapanowa nad ukadem stron i serwisw
WWW. Bez arkuszy CSS nie ma nowoczesnych stron WWW. Nie tylko
jednak o standardy tu chodzi kaskadowe arkusze stylw to take
ogromna oszczdno czasu, o czym bez wtpienia przekonasz si,
wprowadzajc w kodzie swoich stron rne poprawki.
Dlaczego kaskadowe arkusze stylu nazywaj si kaskadowymi?
Wynika to ze sposobu ich dziaania; prawie kady element podrzdny
(a wic na przykad element <span> zawarty wewntrz elementu <p>)
dziedziczy atrybuty stylu elementu nadrzdnego, a wybrane z nich
moe samodzielnie nadpisywa. W efekcie powstaje swoista kaskada
definicji stylu, ktrej wysze stopnie narzucaj wygld stopniom niszym, a te z kolei mog anulowa wybrane elementy definicji i zastpi je wasnymi, ktre z kolei sprbuj narzuci wasnym elementom
podrzdnym.
W przypadku wystpowania rnych arkuszy stylw na jednej stronie
stopie ich wanoci ronie w nastpujcej kolejnoci:

22

CSS wiczenia

1. Domylne ustawienia przegldarki.

2. Zewntrzny arkusz stylw.
3. Osadzony arkusz stylw (umieszczony midzy znacznikami
<head> </head>).
4. Styl wpisany (dotyczcy konkretnego elementu HTML).

Arkusze CSS s obsugiwane w mniej lub bardziej zgodny ze standardem sposb przez wszystkie nowoczesne, graficzne przegldarki
WWW (Internet Explorer, Opera oraz Mozilla Firefox), przy czym za
implementacj wzorcow mona uwaa przegldark Firefox.

Zasady oglne
1. Twrz uniwersalne arkusze stylw tak aby mona byo z nich

korzysta w rnych dokumentach.

2. Pamitaj o skalowalnoci dokumentw poniewa dokumenty
bd wywietlane w dynamicznych rodowiskach i na rnym
sprzcie, szczeglnie istotne jest wybranie odpowiednich
jednostek miary jednostki wzgldne powinny mie przewag
nad absolutnymi (dotyczy to na przykad szerokoci marginesw,
wielkoci czcionki itp.). Wicej informacji na ten temat
znajdziesz w rozdziale 3.
3. Licz si z czytelnikiem niektrzy czytelnicy bd korzystali
z wasnych ustawie. Twoje arkusze stylw powinny to bra
pod uwag. W jaki sposb? Odpowiednie definicje stylw powinny
by umieszczane we waciwych miejscach. Na przykad te,
ktre s stosowane do caego dokumentu, umieszczaj w sekcji
<body> i tylko tam. W ten sposb czytelnik bez trudu
wprowadzi odpowiednie zmiany.
4. Testuj arkusze stylw testuj je w kilku przegldarkach,
aby nie sprawi swoim czytelnikom niemiej niespodzianki.
Jeli korzystasz z waciwoci CSS, ktra nie jest obsugiwana
powszechnie, upewnij si, e strona wyglda wzgldnie
poprawnie nawet w mniej zaawansowanych przegldarkach.

Rozdzia 2. Kaskadowe arkusze stylw

23

5. Uwzgldniaj struktury dokumentu arkusze stylw umoliwiaj

oddzielenie wygldu strony od jej struktury logicznej. Zawsze

zaczynaj od zapisania kodu strony standardowymi znacznikami
nagwkw, akapitw tekstu i tabel, a dopiero pniej nakadaj
na gotowy dokument style modyfikujce jego wygld.
6. Dostarczaj nazwy rodzin czcionek pamitaj, e dokument
bdzie wywietlany na rnych komputerach, z rnym
wyposaeniem w czcionki. Podanie nazwy ich rodziny pozwala
na zachowanie charakteru strony. Unikaj te egzotycznych
krojw pisma, jest bowiem wysoce prawdopodobne, e moe
ich brakowa. Najlepiej ogranicza si do czcionek dostpnych
standardowo w systemach operacyjnych Windows i Linux.
7. Zachowaj umiar w stosowaniu ujemnych marginesw ujemne
marginesy pozwalaj uzyska ciekawe efekty, ale nie wszystkie
przegldarki radz sobie z nimi. Jeli stosujesz takie marginesy,
testuj stron w rnych przegldarkach.
8. Upraszczaj formy konstruujc arkusz stylw, zachowaj umiar.
Moesz uy wielu rnych krojw pisma i zapeni stron
kolorami, lecz nie wpynie to pozytywnie na przekaz informacji.

Typy kaskadowych arkuszy stylw

Kiedy, w epoce poprzedzajcej wprowadzenie arkuszy, wygld strony
zalea od uytej przegldarki. To ona decydowaa o sposobie rozmieszczenia zawartoci dokumentu. Arkusze stylw daj twrcy cis kontrol nad wygldem strony. Pozwalaj take oddzieli zawarto
(tre i konstrukcj strony) od wygldu i formatowania. Uatwia to
ewentualne pniejsze zmiany.
Istniej trzy odmiany arkuszy: osadzone, wpisane i czone.

Styl wpisany
Style wpisane s to atrybuty stylu wprowadzane w ramach atrybutu
style dowolnego, interesujcego Ci znacznika HTML. Zalet tej metody jest jej bezporednio moesz zmieni wygld dowolnego, najmniejszego choby elementu strony cakowicie niezalenie od wygldu

24

CSS wiczenia

pozostaych elementw. Z tej zalety wynika rwnie najwiksza wada

tej metody zmiana wygldu wikszej liczby elementw wymaga
wprowadzania olbrzymiej iloci kodu. Ten kod musi by pniej pobrany przez przegldark WWW z serwera, wydua si zatem czas
adowania strony i zwiksza obcienie czy internetowych.
W I C Z E N I E

2.1

Definiowanie stylu wpisanego

Zdefiniuj w szablonie strony WWW ty tekst na niebieskim tle, korzystajc ze stylu wpisanego:
1. Otwrz szablon dokumentu szablon.html w oknie Notatnika.
2. Umie w obszarze elementu body nastpujc definicj
(oczywicie tekst obejmowany elementem span moe by
dowolny):
<span style="color: blue; background-color: yellow;">Niebieski
tekst na tym tle</span>

3. Zapisz dokument pod now nazw i wywietl w oknie

przegldarki (rysunek 2.1).

Rysunek 2.1.
Do krtkiego
tekstu mona
zastosowa
styl wpisany,
korzystajc
z elementu span
z atrybutem style

Stosowanie stylu wpisanego ma sens, gdy chcesz zmieni wygld kilku

wyrazw lub linijek tekstu. Zanim jednak zastosujesz styl wpisany,
zastanw si, czy nie warto zastosowa stylu osadzonego. Cho styl
wpisany jest najprostsz form kaskadowych arkuszy stylu, to jednak
w wikszoci przypadkw zastosowanie stylu osadzonego pozwala
znacznie ograniczy ilo kodu skadajcego.

Rozdzia 2. Kaskadowe arkusze stylw

25

Styl osadzony
Styl osadzony jest najchtniej stosowanym rodzajem kaskadowych arkuszy stylu. Definicj stylu osadzonego tworzy si w cakowitym oderwaniu od rzeczywistego elementu okrelamy rodzaj czcionki, kolor
tekstu i szeroko marginesu, majc na myli nie jaki pojedynczy,
konkretny element strony, a ca klas elementw. Definicja stylu moe
okrela wygld wybranych elementw jzyka HTML lub te wycznie ich wydzielonych podklas.
Raz stworzona definicja stylu osadzonego moe by wykorzystana pniej do zmiany wygldu dowolnej liczby elementw strony WWW.
Co wicej, jeli nagle zapragniesz zmieni nieco t definicj, automatycznie zmieni si wygld wszystkich elementw, ktrych wygld
ta definicja okrela! Nie musz mwi, jak wielkim jest to udogodnieniem.
Trudno si dziwi, e w zasadzie wygld kadej wikszej strony WWW
opisany jest wanie za pomoc osadzonego arkusza stylu. Zmniejsza
si w ten sposb rozmiar pliku HTML (definicja stylu umieszczona
jest tyko w jednym miejscu kodu, a potem uywana wielokrotnie), za
ewentualne zmiany wygldu strony nie wymagaj wprowadzania
poprawek w dziesitkach lub setkach miejsc kodu. Mimo to jeszcze
lepsze, oszczdniejsze i zapewniajce wiksz jednolito duych serwisw WWW (cho nieco trudniejsze w opanowaniu) jest rozwizanie
oparte na zewntrznym arkuszu stylu.
W tym rozdziale zajmiemy si wic przede wszystkim stylami osadzonymi, cile zwizanymi z konkretnym plikiem HTML. Wszystkie
osadzone arkusze stylw maj t sam posta definicji i s umieszczane
w sekcji <head> stron WWW.
Oglna posta osadzonego arkusza CSS jest nastpujca:
<style type="text/css">
<!-znacznik { atrybut: warto; }
-->
</style>

Midzy znacznikami <style> i </style> umieszczana jest lista znacznikw HTML wraz z waciwociami arkusza, ktre je definiuj. Definicja zaprezentowana powyej zawiera tylko jeden symboliczny znacznik definiowany przez jedn waciwo CSS. Jednak nic nie stoi na
przeszkodzie, aby doda do niej inne.

26

CSS wiczenia

Zawarta w obrbie elementu style definicja ma nastpujc skadni:

nazwa_elementu{atrybut:warto [; atrybut:warto] ...}

nazwa_elementu to znacznik, konkretny element, klasa lub selektor,

ktry chcesz zdefiniowa; atrybut to atrybut, ktry zmieniasz, przypisujc mu now warto. Atrybut i warto rozdzielone s dwukropkiem oraz zawarte w nawiasach klamrowych:
body {color: black}

Jeli warto ma posta wielowyrazow na przykad sans serif

umieszcza si j w cudzysowie:
p {font-family: "sans serif"}

Oto przykad rzeczywistej definicji:

<style type="text/css">
<!-body
{margin:20px; color:black}
h1
{color:blue; text-align:center}
h2
{color:blue; text-align:left}
p
{text-align:justify; text-indent:25px}
-->
</style>

Midzy znacznikami <style> i </style> umieszczana jest lista elementw HTML wraz z waciwociami arkusza, ktre te elementy definiuj. Jeli waciwoci jest kilka, wszystkie musz by umieszczone
w nawiasie klamrowym ({}) oraz oddzielone rednikami (;).
Atrybut type znacznika <style> ma warto text/css. Jest to dla przegldarki informacja o tym, e nastpne instrukcje to arkusz stylw.
Instrukcje te zawarte s w znaczniku komentarza, <!-- -->. Jest to zabezpieczenie na wypadek, gdyby strona trafia do przegldarki starego
typu, ktra nie potrafi obsuy arkuszy stylw. Wwczas instrukcje
formatowania zostan zignorowane, a nie wywietlone na ekranie
jako tekst.
W I C Z E N I E

2.2

Definiowanie osadzonego arkusza stylw

Umie w szablonie dokumentu html osadzony arkusz stylw:

1. Otwrz szablon dokumentu w oknie Notatnika.
2. Umie punkt wstawiania za elementem meta i nacinij
klawisz Enter.

Rozdzia 2. Kaskadowe arkusze stylw

27

3. Wpisz prost definicj osadzonego arkusza stylw:

<style type="text/css">
<!-body {
background-color: white;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
-->
</style>

Co oznacza ta definicja? Okrela wygld ta strony WWW

biay kolor podkadu (background-color: white;) oraz brak
marginesw (margin: 0 0 0 0;) i odstpw (padding: 0 0 0 0;)
na krawdziach strony.
4. Zapisz kod swojego dokumentu pod now nazw. Prezentuje go
listing 2.1.
Listing 2.1. Definicja osadzonego arkusza stylw w kodzie dokumentu HTML
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<title>
Moja pierwsza strona WWW
</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!-body {
background-color: white;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
-->
</style>
</head>
<body>
</body>
</html>

28

CSS wiczenia

W kolejnym wiczeniu przygotujemy dwie definicje stylu CSS osadzon i wpisan narzucajce kolor ta. Dziki temu porwnaniu
zorientujesz si, na czym polega rnica.
W I C Z E N I E

2.3

Porwnanie wpisanego stylu z osadzonym

arkuszem stylw

Porwnaj style wpisany i osadzony formatujce to dokumentu:

1. Otwrz szablon dokumentu w dwch oknach Notatnika.
2. W pierwszym oknie umie punkt wstawiania za elementem
meta (sekcja head) i nacinij klawisz Enter.
3. Wpisz prost definicj osadzonego arkusza stylw:
<style type="text/css">
<!-body {background-color: #FF0000;
}
-->
</style>

Kod #FF0000 definiuje kolor. Tablice kodw kolorw znajdziesz

w dodatku B.
4. Zapisz pierwszy dokument pod nazw osadzony.html.
5. W drugim oknie Notatnika umie atrybut stylu w znaczniku
<body>:
<body bgcolor="#FF0000">

6. Zapisz drugi dokument jako wpisany.html.

7. W przegldarce oba dokumenty prezentuj si podobnie

(rysunek 2.2).

Zewntrzny arkusz stylu

Zewntrzny arkusz stylu nie rni si zasadniczo od arkusza osadzonego; rozszerza tylko jego uniwersalno, przenoszc definicje stylw
z wntrza kodu jednej strony WWW do osobnego pliku, ktry moe
by wykorzystany w dziesitkach, setkach lub nawet tysicach stron
skadajcych si na serwis internetowy.

Rozdzia 2. Kaskadowe arkusze stylw

29

Rysunek 2.2.
Porwnanie
efektw dziaania
stylu osadzonego
i wpisanego
definiujcego
to dokumentu

Zewntrzny arkusz stylu jest tym dla serwisu internetowego, czym styl
osadzony by dla pojedynczej strony umoliwia scentralizowanie
definicji stylu i uniknicie koniecznoci wprowadzania poprawek
w wielu plikach przy kadej najdrobniejszej zmianie Twojego projektu. Zewntrzny arkusz stylu jeszcze bardziej ogranicza ilo danych,
ktre czytelnik musi pobra z sieci raz pobrany plik arkusza stylu
pozostaje w pamici podrcznej przegldarki i jest dostpny natychmiast dla kadej kolejnej strony Twojego serwisu.
W kodzie kadej ze stron korzystajcych z zewntrznych arkuszy stylw musi
zosta zdefiniowane poczenie z plikiem zewntrznym, ktry je zawiera. Poczenie to definiuje si za pomoc znacznika <link />, ktry umieszczany
jest w sekcji head dokumentu:
<head>
<link rel="stylesheet" type="text/css"
href="mojestyle.css" />
</head>

Definicje stylw znajduj si w pliku mojestyle.css nazwa pliku moe

by dowolna, ale musi mie rozszerzenie .css. Przegldarka odczyta
plik i sformatuje dokument zgodnie z zawartymi w nim instrukcjami.

30

CSS wiczenia

W znaczniku <link /> musi znale si atrybut rel o wartoci stylesheet.

Dziki temu przegldarka bdzie posiada informacj o tym, e atrybut href podaje jej adres URL pliku, ktry zawiera arkusz stylw.
W I C Z E N I E

2.4

Definiowanie zewntrznego arkusza stylw

1. Uruchom edytor Notatnik.

Plik .css mona utworzy w dowolnym edytorze.
2. Wpisz w Notatniku zestaw definicji stylw, na przykad taki jak

na listingu 2.2. Plik nie powinien zawiera znacznikw HTML.

Listing 2.2. Definicje stylw w pliku styl_test.css
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/obraz.gif")}

3. Zapisz plik z rozszerzeniem nazwy .css na przykad nazwij

go styl_test.css. Styl jest gotowy do uytku.

4. Aby zastosowa zewntrzny arkusz CSS, umie w elemencie
head dokumentu, w ktrym chcesz zastosowa style, znacznik
<link /> o takiej postaci:
<link rel="stylesheet" href="styl_test.css" type="text/css" />

Atrybut href zawiera nazw pliku (lub ciek dostpu do niego),

z ktrego odczytane zostan deklaracje stylu. Oczywicie do tego
samego pliku deklaracji stylu moe odwoywa si wiele plikw
HTML i o to wanie nam chodzio, gdy dziki takiemu prostemu
zabiegowi wygld wszystkich stron bdzie jednolity, a ewentualne
zmiany deklaracji bd natychmiast obowizyway na wszystkich
stronach WWW.

Rozdzia 2. Kaskadowe arkusze stylw

31

Grupowanie kodu
Jeli rne elementy korzystaj z tego samego atrybutu o takiej samej
wartoci na przykad h1 {color: red}, h2 {color: red}, p {color: red},
moesz zebra je w jednej definicji stylu.
W I C Z E N I E

2.5

Upraszczanie definicji stylu

Powiedzmy, e w elemencie style umieszczono definicje stylu okrelajce identyczny czerwony kolor nagwkw i tekstu:
<style type="text/css">
h1 {color: red}
h2 {color: red}
p {color: red}
</style>

Aby uproci definicj:

T Utwrz w sekcji style grup elementw, oddzielajc je
przecinkami. Wszystkim skadowym tej grupy przypisany
zostanie kolor czerwony:
h1, h2, p {color: red}

Inn form grupowania jest zebranie wszystkich deklaracji stylu dla

danego elementu. Innymi sowy, zamiast definiowa osobno kolor
i wyrwnanie, mona to zrobi w jednej deklaracji.
W I C Z E N I E

2.6

Rozbudowanie definicji stylu

Aby dla danego elementu okreli w jednej deklaracji stylu kilka atrybutw stylu:
T W deklaracji stylu zawartej w nawiasach klamrowych {}
umie wszystkie niezbdne definicje. Musisz je rozdzieli
rednikami, tak jak zostao to pokazane w poniszym wyraeniu
przykadowym, w ktrym do tekstu stosowane jest wyrwnanie
i kolor:
p {text-align: center; color: red}

32

CSS wiczenia

Aby definicja bya bardziej czytelna, kad z waciwoci

moesz umieszcza w osobnym wierszu:
p
{
text-align: center;
color: black;
font-family: arial
}

Klasy stylu
Zanim przewiczymy stosowanie zewntrznego arkusza stylw na
jednym z przykadowych dokumentw, naley pozna klasy.
Klas okrela si w taki oto sposb:
element.nazwa_klasy{atrybut:warto [; atrybut:warto] ...}

lub:
.nazwa_klasy{atrybut:warto [; atrybut:warto] ...}

Nazwy klas mog by dowolne, pamitaj jednak, by nie stosowa w nich

polskich liter.

W pierszym przykadzie klasa jest powizana z elementem danego

typu, w drugim przypadku klasa jest niezalena od typu elementu.
Powiedzmy, e chcesz w swoim dokumencie zastosowa do akapitw
dwa rne sposoby wyrwnania tekstu: pewne akapity chcesz dosun do prawego marginesu, a pozostae wycentrowa. W takim przypadku przydatny bdzie atrybut class. Pozwala zdefiniowa rne style
dla tego samego elementu inaczej mwic, pozwala zdefiniowa
klasy stylu.
W I C Z E N I E

2.7

Definiowanie klas stylu

Zdefiniuj dwie klasy: pierwsz, nazwijmy j prawy, w ktrej ustawimy

sposb wyrwnania tekstu do prawego marginesu, i klas center,
w ktrej tekst bdzie wyrodkowany.