Id do

Spis treci
Przykadowy rozdzia
Katalog ksiek

Tworzenie stron WWW.

Ilustrowany przewodnik.
Wydanie II
Autor: Aleksandra Tomaszewska
ISBN: 978-83-246-2621-2
Format: 140208, stron: 224

Katalog online
Zamw drukowany
katalog
Twj koszyk
Dodaj do koszyka
Cennik i informacje
Zamw informacje
o nowociach
Zamw cennik
Czytelnia
Fragmenty ksiek
online

Kontakt
Helion SA
ul. Kociuszki 1c
44-100 Gliwice
tel. 32 230 98 63
e-mail: helion@helion.pl
Helion 19912011

Twrz witryny, ktre bd rzdzi w sieci

Zaprzyjanij si z jzykiem CSS
Poznaj zasady przygotowywania i obrbki grafiki
Odkryj skuteczne sposoby na promocj w Internecie
Projektowa strony WWW moe niemal kady. Jednak tworzenia projektw wysokiej jakoci to ju
spore wyzwanie. Internet jest peen nieczytelnych, przeadowanych treci albo grafik witryn,
ktre przynosz swoim wacicielom wicej szkody ni poytku. Technologia pdzi do przodu,
podczas gdy niektrzy projektanci wyranie za ni nie nadaj. Jeli chcesz mie pewno, e
efekty Twojej pracy to zawsze produkt najwyszej jakoci, tak pod wzgldem funkcjonalnoci, jak
i estetyki, a take jeli chcesz nauczy si projektowa witryny wyrniajce si spord milionw
przecitnych pproduktw, nadszed czas, by zacz wreszcie dziaa z rozmachem.
W drugim wydaniu ksiki Tworzenie stron WWW. Ilustrowany przewodnik znajdziesz przydatne
narzdzia, uatwiajce prac projektantom stron WWW. Dowiesz si, dlaczego warto uywa
aplikacji Macromedia Dreamweaver oraz Adobe GoLive i czemu lepiej mie kilka aplikacji, ktre
robi to samo, ni jedn aplikacj, ktra robi wszystko. Przeczytasz take o tym, czym rni si
formaty GIF, JPEG i PNG oraz ktrego z nich warto uywa w jakiej sytuacji. Nauczysz si podstaw
jzykw HTML i XHTML i odkryjesz, jak rozwin skrzyda w dziedzinie pisania skryptw, poniewa
poznasz bliej jzyk skryptowy JavaScript. W zakoczeniu znajdziesz praktyczne porady dotyczce
tego, co i w jakich proporcjach powinno znajdowa si w doskonale zaprojektowanej witrynie.
Zasady pisania i formatowania tekstu oraz edytory stron WWW
Praca z elementami graficznymi przy uyciu takich narzdzi, jak Photoshop i Fireworks
Kaskadowe arkusze stylw formatowanie i programy do tworzenia arkuszy
Tworzenie dynamicznych stron WWW, czyli JavaScript w akcji
Przygotowywanie i optymalizowanie animacji Flash
Jzyk HTML podstawy i struktura dokumentu
Projektuj pierwszorzdne witryny i twrz now jako w Internecie

Spis treci
Rozdzia 1. Trzy, dwa, jeden START! 5
Blog 5
Serwisy stron WWW14

Rozdzia 2. Edytory WYSIWYG, czyli chopcy od brudnej roboty26

Edytory HTML27
Edytory WYSIWYG29
Korzystanie z edytora WYSIWYG 36

Rozdzia 3. Grafika65
Dodawanie obrazkw do strony69
Tworzenie grafiki 76
Darmowa grafika 83

Rozdzia 4. HTML jzyk internetu88

Skadnia jzyka 88

Rozdzia 5. Wykorzystanie formularzy i ramek 109

Formularze109
Ramki116
Dodatkowe znaczniki119

Rozdzia 6. Co to znaczy mie styl, czyli sw kilka o CSS120

Formatowanie tekstu 128
Dekoracja tekstu131
Kolor i to 136
Marginesy 137
Programy do tworzenia arkuszy stylw138

Tworzenie stron WWW. Ilustrowany przewodnik

Rozdzia 7. Tworzenie dynamicznych stron WWW,

czyli JavaScript w akcji 141
Typy danych144
Wyraenia i warunki 146
Wprowadzanie polece149
Okna 159

Rozdzia 8. Animacje Flash 169

Przygotowywanie grafiki170
Animacje182
Eksportowanie i publikowanie filmw189

Rozdzia 9. Promocja191
Wyszukiwarki internetowe193
Reklama200
Katalogi internetowe 201
Ogoszenia prasowe202
Poczta elektroniczna 203
Banery reklamowe 205

Rozdzia 10. Poradnik, czyli od czego zacz207

Struktura witryny 212
Szablon witryny213
Projektowanie zawartoci stron215

Rozdzia 6
Co to znaczy mie styl,
czyli sw kilka o CSS
Przyciski, paski menu, zdjcia, obrazy nieodczne elementy stron WWW.
Dotychczas dowiedziae si, jak je tworzy i budowa z nich cao za pomoc
edytorw tekstowych lub aplikacji WYSIWYG. Poznae rwnie podstawy jzyka HTML. Czas zaprzyjani si z CSS, czyli kaskadowymi arkuszami stylw.
Styl w wirtualnym wiecie nie wymaga duych nakadw finansowych, a jedynie
zainwestowania odrobiny czasu w opracowanie stylistyki strony i konsekwentne
realizowanie przyjtych zaoe.

Kaskadowe arkusze stylw (ang. cascading style sheets CSS) s stosowane do

formatowania stron i pozwalaj na uzyskanie doskonaej kontroli nad jednolitym
wygldem poszczeglnych stron i caej witryny. Wyobra sobie witryn skadajc si z duej liczby stron WWW, nad ktr pracuje caa grupa programistw.
Majc wyobraenie o stopniu skomplikowania zadania polegajcego na stworzeniu kilku stron, na ktrych uywana bdzie ta sama stylistyka krj, kolor,
wielko czcionki, kolorystyka elementw czy wygld tabel, wyobra sobie, jak
trudno zapanowa nad tymi wszystkimi elementami, gdy masz do ogarnicia kilkaset stron projektowanych przez kilka rnych osb. Do tego celu niezawodnie
przydaj si kaskadowe arkusze stylw.
Korzystanie z CSS oznacza rwnie oszczdno miejsca, poniewa styl kadego
elementu jest definiowany jednokrotnie w pliku definicji stylw, a nie przy kadym wystpieniu elementu na stronie, czyli w przypadku takich elementw jak na
przykad akapit czy nagwek kilkadziesit razy na kadej stronie.
Wskazwka

Szczegowe informacje na temat kaskadowych arkuszy stylw znajdziesz pod

adresem http://www.w3.org/Style/CSS/.
120

Co to znaczy mie styl, czyli sw kilka o CSS

Definicje stylw mona wprowadza do opisu strony na kilka sposobw. Pamitaj,

e kady z tych sposobw ma swoje wady i zalety, a wybr najlepszego sposobu
zaley od preferencji programisty oraz sytuacji, w ktrej styl ma by zastosowany.
Sposb I

<p style=color:blue; font-family:Arial;

font-size:12pt;> Zawarto akapitu </p>

Definicja stylu jest umieszczona bezporednio w znaczniku. Jest to analogiczna skadnia do umieszczania w znaczniku atrybutw
tego znacznika.

Sposb II

Wada: konieczno powtarzania definicji dla

kadego kolejnego znacznika umieszczanego na stronie.

<html><head>
<style type=text/css>
p
{ color:blue;
font-family:Arial;
font-size:12pt;
}
</style></head>
<body>
<p> Pierwszy akapit </p>
<p>Drugi akapit</p>
</body></html>

Definicja stylu jest umieszczona w nagwku

dokumentu. Tak zdefiniowany styl odnosi si
do wszystkich znacznikw tego typu w dokumencie.

Sposb III

Zaleta: prostota uycia.

Zaleta: jednokrotna definicja stylu dla elementu w obrbie strony.

Wada: dla tego samego znacznika na innych
stronach musisz ponownie zdefiniowa style
znacznika wewntrz nagwkw tych stron.

<html><head>
<link href=style.css rel=stylesheet
type=text/css></head>
<body>
<p> Pierwszy akapit </p>
<p>Drugi akapit</p>
</body></html>

Definicja stylu jest umieszczona w osobnym

pliku o rozszerzeniu *.css, ktry jest powizany
z dokumentem strony poprzez uycie znacznika <link>. Atrybut href wskazuje ciek
dostpu do pliku arkuszy stylw. Wywoanie
zewntrznego arkusza stylw znajduje si
w nagwku i dotyczy caej strony WWW, czyli
wszystkich elementw danego typu.

Zaleta: do tak zdefiniowanego arkusza mona podczy wiele stron witryny i wszystkie bd miay zdefiniowane te same style.
Zmiana stylu danego elementu na wszystkich stronach witryny wymaga jedynie zmiany odpowiednich wpisw w arkuszu stylw.

121

Tworzenie stron WWW. Ilustrowany przewodnik

Wskazwka

Pamitaj, e zarwno element <style>, jak i element <link> musz by umieszczone wewntrz nagwka strony.

Najbardziej zalecanym, najefektywniejszym i dajcym najlepsze wyniki sposobem uywania arkuszy stylw jest sposb III. W pliku zewntrznego arkusza
stylw znajduj si wycznie wpisy definiujce style okrelonych elementw. Do
tak zdefiniowanego arkusza mona podczy wiele stron witryny i wszystkie
bd miay zdefiniowane te same style. Dziki temu w jednym miejscu moesz
definiowa wygld caej witryny i nim zarzdza.
Plik arkusza stylw moe mie posta:

p
{ color:blue;
font-family:Arial;
font-size:12pt;
}
Kaskadowe arkusze stylw nieprzypadkowo nosz tak nazw, bo jak ju wiesz,
style mona wprowadza na trzech rnych poziomach:
vv za pomoc atrybutu style (sposb I) styl definiowany kolejno dla poszczeglnych elementw na stronie;
vv za pomoc elementu style (sposb II) styl elementu jest okrelany dla
caej strony;
vv za pomoc zewntrznego arkusza stylw styl jest definiowany dla danego
typu elementu dla wszystkich stron powizanych z arkuszem stylw.

Filozofia CSS czy w sobie elastyczny sposb kontroli stylw stron WWW
i poszczeglnych elementw na stronach z odpowiedni hierarchi stylw, ktra
pozwala unika konfliktw, jeli style elementw s definiowane na kilku poziomach. Sposb I (atrybut style) ma najwysz rang w hierarchii, sposb II
(element style) ma wysz rang ni styl definiowany przez zewntrzny arkusz stylw, ale nisz ni atrybut style. Najnisz rang ma styl przypisywany
przez zewntrzny arkusz stylw. Takie rozwizanie pozwala unikn konfliktw, ktre mogyby
atrybut style
wynikn, jeli na stronie uylibymy wszystkich
trzech metod definiowania stylw. Hierarchia
element STYLE
struktura stylw przypomina stopnie wodozewntrzny arkusz
spadu, std bierze si w nazwie okrelenie kaskastylw
dowy (rysunek 6.1).
Rysunek 6.1.
Style poszczeglnych elementw s
uporzdkowane w okrelonej kolejnoci
122

Co to znaczy mie styl, czyli sw kilka o CSS

Hierarchizacja stylw obejmuje nie tylko rne sposoby definiowania stylw, ale
rwnie sytuacj, gdy do jednej strony podczonych jest kilka rnych zewntrznych arkuszy stylw. W takim wypadku przegldarka uwzgldnia kolejno
wprowadzania stylw. Zewntrzny arkusz wprowadzony jako pierwszy dominuje
nad arkuszem, ktry jest wprowadzony jako nastpny w kolejnoci. Problem polega na tym, e jeli w zewntrznych arkuszach stylw wystpuj wzajemne konflikty, trudno przewidzie efekt graficzny, dopki strona nie zostanie wywietlona
w przegldarce.
Do okrelenia wartoci atrybutw arkusze stylw wykorzystuj wzgldne i bezwzgldne jednostki miary oraz okrelone definicje kolorw.
Jednostki wzgldne:

vv px piksel jednostka definiowana w oparciu o pojedyncze punkty

wietlne monitora;
vv em proporcje wysokoci do czcionki danego elementu okrela zaleno pomidzy poszczeglnymi wielkociami;
vv ex proporcje do wysokoci litery;
vv % procent okrelenie wielkoci wzgldem wartoci domylnej.
Wskazwka

Istnieje take moliwo importowania arkusza stylw wewntrz innego arkusza

stylw. W tym celu naley uy nastpujcej konstrukcji:

@import url(style.css) ;
body {background-image: url(obraz.gif) ;}
W takiej sytuacji importowany arkusz ma niszy priorytet ni arkusz, do ktrego
import nastpuje.

Zasada dziaania jednostki em jest nastpujca przy zdefiniowaniu okrelonej

wartoci (na przykad czcionki o wielkoci 12 pt) jest ona przyjmowana jako
1 em. Jeli okrel inny atrybut jako 2 em, to bdzie on dwukrotnoci wczeniej
zdefiniowanej wartoci (czyli w tym wypadku bdzie to 24 pt).
Jednostki bezwzgldne:

vv in cal jednostka najczciej uywana w USA, rzadko uywana w Polsce (1 in = 2,54 cm);
vv pt punkt wywodzi si z typografii, gdzie jest standardow jednostk
miary (72 pt = 1 in);
vv cm centymetr jednostka pochodna systemu metrycznego, czsto stosowana w Europie;

123

Tworzenie stron WWW. Ilustrowany przewodnik

vv mm milimetr jednostka pochodna systemu metrycznego, czsto stosowana w Europie;

vv pc pica jednostka wywodzca si z typografii (1 pica = 12 pt).

W kaskadowych arkuszach stylw mona definiowa kolory poprzez uycie ich

nazw angielskich, jak blue czy yellow. Wszystkie kolory, ktre nie zostay zdefiniowane przez uycie ich nazw, musz by okrelone przez wykorzystanie modelu
RGB. Polega on na przypisaniu liczb cakowitych z przedziau od 0 do 255 kadej z wartoci skadowych palety RGB. Na przykad color: rgb(0,12,255).
Kolor mona rwnie zapisa, definiujc procent nasycenia danej barwy, na przykad color: rgb(10%, 50%, 0%), a take stosujc metod szesnastkow, na
przykad color: #ff2c00 (tabela 6.1).
Tabela 6.1. Tablica nazw kolorw oraz ich odpowiednikw w systemie szesnastkowym

black

#000000

green

#008000

silver

#C0C0C0

lime

#00FF00

gray

#808080

olive

#808000

white

#FFFFFF

yellow

#FFFF00

maroon

#800000

navy

#000080

red

#FF0000

blue

#0000FF

purple

#800080

teal

#008080

fuchsia

#FF00FF

aqua

#00FFFF

Schemat konstrukcji stylu mona zapisa w nastpujcy sposb:

selektor {cecha: warto; cecha: warto; itd.}
vv selektor znacznik jzyka HTML, np. p to paragraf, h1 nagwek
pierwszy, a table tabela.
vv cecha wpis okrelony specyfikacj kaskadowych arkuszy stylw.

Przykadowe waciwoci okrelone przez specyfikacj kaskadowych arkuszy

stylw to background-color, border-style, font-family itd. Warto jest
zazwyczaj przypisana do danej cechy, ale moe si zdarzy, e bdzie podobna
dla kilku zupenie rnych cech. Oglnie przyjmujemy, e selektor to dowolny
znacznik jzyka HTML. Moemy jednak wyrni kilka rodzajw selektorw:
vv Selektory proste selektor bdcy pojedynczym znacznikiem jzyka
HTML, odnoszcy si jedynie do tego elementu. Jest to najczciej spotykany rodzaj elektora.

124

Co to znaczy mie styl, czyli sw kilka o CSS

vv Selektor uniwersalny uywany, gdy jakie cechy i wartoci s uniwersalne

i powinny dotyczy wszystkich elementw na stronie.
vv Potomek selektor zbudowany w oparciu o zalenoci panujce pomidzy
poszczeglnymi znacznikami jzyka HTML.

Przykady selektorw uniwersalnych:

*
{color: blue;}
BODY
{color: blue}

Tak zapisane selektory dziaaj dla wszystkich elementw strony nagwki,

akapity, listy itd. bd miay kolor niebieski. Przykady potomkw:
p
{color: blue}
p > span
{font-style: italic}
Kolor tekstu akapitu bdzie niebieski, ale dodatkowo, jeli wewntrz akapitu pojawi si znacznik <span>, otoczony nim tekst bdzie pochylony.

Specyfikacja kaskadowych arkuszy stylw dopuszcza rwnie moliwo grupowania selektorw. Jeli na przykad chciaby, aby wszystkie listy, ktre wystpi
w dokumencie, miay kolor czerwony, to zamiast definiowa styl dla kadego
typu listy, moesz zastosowa nastpujcy zapis:
ul, ol, dl
{
color: red
}
Selektory ID pozwalaj okreli styl okrelonego elementu na stronie, co pozwala
zrnicowa formatowanie elementw tego samego typu na stronie. Wyobra
sobie, e wszystkie akapity na stronie maj mie kolor granatowy, ale w jednym
tekst powinien by czerwony, poniewa zawiera on szczeglnie wane informacje.
W tym celu moesz zdefiniowa style w nastpujcy sposb:
p {color: navy}
p#wazne {color: red}
Aby utworzy akapit zawierajcy tekst w kolorze czerwonym, musisz go wywoa
przez uycie zdefiniowanej nazwy:
<p id="wazny"> Bardzo wane informacje wyrnione kolorem
czerwonym</p>
Pozostae akapity bdziesz tworzy, uywajc znacznika <p>.
125

Tworzenie stron WWW. Ilustrowany przewodnik

Definicja identyfikatora moe rwnie mie nastpujc posta:

#duzy_czerwony_tekst
{font-size: 20pt; color: red}
Identyfikator ten moesz wywoa w dowolnym znaczniku, korzystajc z atrybutu ID.
Kolejnym podstawowym elementem specyfikacji kaskadowych arkuszy stylw
jest klasa. Klas konstruuje si w nastpujcy sposb:
selektor.nazwa_klasy {cecha: warto}
Tak zdefiniowana klasa moe by wywoana tylko w znaczniku, dla ktrego zostaa utworzona. Aby wywoa klas w dokumencie, naley uy atrybutu CLASS.
Na przykad tworzc klas akapitu zawierajcego tekst w kolorze czerwonym,
naley wpisa definicj:
p.czerwony {color: red}
Aby wywoa t klas w dokumencie, wpisz:
<p class="czerwony"> Czerwony tekst </p>
Uwaga

Deklaracja selektora ID musi by poprzedzona znakiem #, ale znaku tego nie naley uywa do odwoywania si do wartoci atrybutu ID.

Uwaga

Pamitaj, aby definiujc klas, umieci znak kropki midzy selektorem a nazw
klasy.

Dziedziczenie i kaskadowo to cechy, ktrym kaskadowe arkusze stylw zawdziczaj swj dynamiczny rozwj i pozycj. O kaskadowoci bya mowa ju
wczeniej w tym rozdziale, a teraz warto napisa kilka sw o dziedziczeniu.

Jeli chcesz okreli kolor tekstu w komrce tabeli, zrobisz to przez uycie elementu <td>. Moesz to rwnie zrobi przez uycie elementu <table> i wtedy
wszystkie komrki tabeli, zarwno w wierszach, jak i w nagwkach, bd miay
okrelony dla tabeli kolor. Ale moesz to rwnie zrobi, definiujc kolor tekstu
dla elementu <body>. Wtedy nie tylko tekst w komrkach tabeli bdzie mia
okrelony kolor, ale rwnie okrelony kolor bdzie mie tekst w akapitach, nagwkach i listach. Na tym wanie polega dziedziczenie w kaskadowych arkuszach stylw elementy nadrzdne domylnie przekazuj zdefiniowane waciwoci elementom, ktre znajduj si niej w hierarchii (rysunek 6.2).
126

Co to znaczy mie styl, czyli sw kilka o CSS

HEAD
HTML

BODY
H1

TABLE

TH

TD

TR

TD

UL
Rysunek 6.2. Schemat dziedziczenia w kaskadowych arkuszach stylw

W naszym przykadzie kolor niebieski dla tekstu, zdefiniowany w elemencie

<body>, bdzie oznacza rwnie niebieski kolor tekstu we wszystkich komrkach tabeli. Jeli jednak okrelimy atrybut elementu podrzdnego, to nie przekae
on tej waciwoci w gr hierarchii. W naszym przykadzie niebieski tekst zdefiniowany dla komrki tabeli nie bdzie oznacza niebieskiego tekstu dla wszystkich elementw wewntrz elementu <body>.

Dziedziczenie dziaa domylnie, czyli dla tych elementw, dla ktrych nie okrelono innej wartoci waciwoci ni ta, ktr wskazano dla elementu nadrzdnego. Moemy zdefiniowa czerwony tekst w komrkach tabeli, mimo e dla
elementu <body> zdefiniowano, e tekst ma by niebieski.

Wikszo ludzi ogranicza wykorzystanie kaskadowych arkuszy stylw do okrelania koloru tekstu w dokumencie lub kroju czcionki w nagwkach. Jednak istniej rwnie ciekawsze zastosowania kaskadowych arkuszy stylw mog one
suy do tworzenia menu, do czego wikszo projektantw zaangaowaaby
JavaScript (rysunek 6.3).

Rysunek 6.3. Menu utworzone z wykorzystaniem kaskadowych arkuszy stylw

127

Tworzenie stron WWW. Ilustrowany przewodnik

<html>
<head><link rel="stylesheet" href="menu.css" type="text/css">
</head>
<body>
<ul id="menu">
<li>Firma
<ul>
<li><a href=" "> Misja</a></li>
<li><a href=" "> Historia</a></li>
<li><a href=" "> Kontakt</a></li>
</ul>
</li>
<li>Ofetra
<ul>
<li><a href=" "> Konsulting</a></li>
<li><a href=" "> Projektowanie aplikacji</a></li>
</ul>
</li>
</ul>
</body>
</html>
Menu utworzone bez uycia JavaScriptu, a wycznie z wykorzystaniem kaskadowych arkuszy stylw wykorzystuje osobny plik o nazwie menu.css o nastpujcej
zawartoci:
body{background-color: lightblue; font-size: larger}
#menu { background-color: blue; float: left }
#menu li {font-size: x-large; color: yellow}
#menu li a {color: lime}
#menu li a hover {color: navy; background-color: white;
font-size: larger }

Formatowanie tekstu
Specyfikacja kaskadowych arkuszy stylw pozwala na kontrolowanie nastpujcych waciwoci tekstu:
vv wyrwnanie poziome i pionowe,
vv wcicie,
vv odstpy midzy wierszami,

128

Co to znaczy mie styl, czyli sw kilka o CSS

vv odstpy midzy wyrazami,

vv odstpy midzy literami,
vv dekoracja tekstu,
vv przeksztacanie tekstu,
vv kontrola pustej przestrzeni.

Pionowe i poziome wyrwnanie tekstu:

vv do prawej text-align: left,

vv do lewej text-align: right,
vv wyrodkowanie text-align: center,
vv wyjustowanie bloku tekstu text-align: justify,
vv do gry vertical-align: top,
vv do rodka vertical-align:middle,
vv do dou vertical-align: bottom,
vv indeks dolny vertical-align: sub,
vv indeks grny vetical-align: super.

Wcicie pierwszego wiersza akapitu

Aby uzyska efekt wcicia pierwszego wiersza w akapicie, naley uy parametru
text-indent i okreli gboko tego wcicia w jednostkach wzgldnych lub
bezwzgldnych (rysunek 6.4). Na przykad:
p {text-indent: 1 cm}

Rysunek 6.4. Wcicie akapitu uzyskano przez uycie parametru text-indent

129

Tworzenie stron WWW. Ilustrowany przewodnik

Odstpy
Za sterowanie odstpem pomidzy wierszami tekstu odpowiada parametr
line-height, ktry moe przyjmowa wartoci dodatnie i ujemne. Przy uyciu
wartoci dodatnich odstpy midzy wierszami si zwikszaj, a gdy uyjesz wartoci ujemnych, tekst bdzie si zagszcza (rysunek 6.5).

Rysunek 6.5. Parametr line-height umoliwia dokadne okrelenie odstpu midzy wierszami

Kaskadowe arkusze stylw pozwalaj rwnie definiowa odstpy pomidzy poszczeglnymi wyrazami tekstu przy wykorzystaniu parametru word-spacing.
Rwnie i w tym wypadku moliwe jest podanie wartoci dodatnich (zwikszenie odstpu midzy wyrazami) i ujemnych (zmniejszenie odstpu midzy wyrazami) (rysunek 6.6).

Rysunek 6.6. Sowa zostay cinite, poniewa parametr word-spacing ma warto ujemn

130

Co to znaczy mie styl, czyli sw kilka o CSS

Twrcy kaskadowych arkuszy stylw poszli jeszcze o krok dalej i pozwolili projektantom stron wpywa nawet na odstpy pomidzy literami w tekcie. Efekt
ten mona uzyska, korzystajc z parametru letter-spacing.
Na przykad:

p {letter-spacing: 5pt}

Dekoracja tekstu
W kaskadowych arkuszach stylw twrcy stron mog kontrolowa wygld tekstu
za pomoc waciwoci text-decoration. Korzystajc z tego parametru, mog
sprawi, e tekst bdzie:
vv podkrelony text-decoration: underline,
vv przekrelony text-decoration: line-through,
vv nadkrelony text-decoration: overline,
vv migajcy text-decoration: blink,
vv bez dekoracji tekstu text-decoration: none.

Korzystajc z tego parametru, moesz na przykad wyczy podkrelenia wszystkich czy na stronie:
A {text-decoration: none;}

Mae i wielkie litery

Nie trudzc si zbytnio, moesz zamieni cay tekst na stronie na wielkie litery,
chocia oryginalnie w pliku jest on wpisany maymi literami. Na tak wygod
pozwala parametr text-transform. Moe on przyjmowa nastpujce wartoci:
vv tylko wielkie litery text-transform: uppercase (rysunek 6.7),
vv tylko mae litery text-transform: lowercase,
vv kada pierwsza litera w sowie jest zamieniana na wielk text-transform: capitalize,
vv bez zmian text-transform: none.

Zamiast wstawia do dokumentu twarde spacje, moesz uy parametru whitespace, ktry przyjmuje nastpujce wartoci:
vv normal spacje s redukowane do jednej,
vv pre zachowanie dokadnej liczby spacji znajdujcych si w tekcie,
vv nowrap blokuje automatyczne amanie wierszy.

131

Tworzenie stron WWW. Ilustrowany przewodnik

Rysunek 6.7. Wszystkie litery zostay automatycznie zamienione na wielkie przez uycie
parametru text-transform: uppercase

Formatowanie wygldu czcionki

Zgodnie ze specyfikacj kaskadowych arkuszy stylw moliwe jest definiowanie
nastpujcych wasnoci czcionki:
vv rodzaju atrybut font-family,
vv rozmiaru atrybut font-size,
vv wagi atrybut font-weight,
vv stylu atrybut font-style.

Pod pojciem rodzaju czcionki kryje si rozrnienie pomidzy krojami czcionek

lub rodzinami czcionek. Za pomoc kaskadowych arkuszy stylw moesz okreli rodzaj czcionki, z ktrego chcesz korzysta przy wywietlaniu wskazanego
fragmentu tekstu. Konstrukcja stylu jest budowana wedug nastpujcej definicji:
selektor {font-family: nazwa wasna czcionki lub nazwa
rodzajowa czcionki}
nazwa wasna czcionki np. Arial, Times New Roman, Verdana;

nazwa rodzajowa czcionki jedna z piciu wartoci: serif, sans-serif, monospace, cursive lub fantasy.

Czcionki szeryfowe (serif ) charakteryzuj si tym, e kada litera posiada ozdobniki zwane szeryfami. Dodatkowo czcionki tego typu s proporcjonalne, gdy
kada litera ma inn szeroko. Typowym przedstawicielem tej grupy czcionek
jest czcionka Times New Roman. Przykad czcionki szeryfowej (serif ) przedstawiono na rysunku 6.8.
132

Co to znaczy mie styl, czyli sw kilka o CSS

Rysunek 6.8.
Czcionka szeryfowa

Czcionki bezszeryfowe nie maj adnych ozdobnikw na czcionce, ale s one

rwnie proporcjonalne. Ten rodzaj czcionek jest najczciej uywany do tworzenia tekstu przeznaczonego do czytania (tre strony). Typowym przedstawicielem tej grupy czcionek jest czcionka Arial. Przykad czcionki bezszeryfowej
(sans-serif ) przedstawiono na rysunku 6.9.
Rysunek 6.9.
Czcionka bezszeryfowa

Czcionki tego typu s nieproporcjonalne, co oznacza, e kada litera ma tak

sam szeroko. Ten rodzaj czcionek automatycznie kojarzy si z tekstem napisanym na maszynie do pisania. Typowym przedstawicielem tej grupy czcionek jest
czcionka Curier New (rysunek 6.10).
Rysunek 6.10.
Przykad czcionki typu
monospace

Czcionki typu cursive charakteryzuj si duym podobiestwem do pisma odrcznego, mog te zawiera rnego rodzaju ozdobniki w postaci zawijasw. Przykadem czcionki typu cursive moe by czcionka Comic Sans MS (rysunek 6.11).
Rysunek 6.11.
Przykad czcionki typu
cursive

Czcionki typu fantasy to czcionki, ktrych nie da si zakwalifikowa do adnego

z opisanych powyej rodzajw czcionek (rysunek 6.12).
Rysunek 6.12.
Przykad czcionki typu
fantasy

133

Tworzenie stron WWW. Ilustrowany przewodnik

Uwaga

Naley pamita, e czcionki zdefiniowane w arkuszu stylw s pobierane z komputera uytkownika przegldajcego stron. Jeli w systemie nie ma zainstalowanej czcionki okrelonej przez arkusz stylw, przegldarka zastpi j domyln
czcionk dla danego systemu. Dlatego przy projektowaniu stron nie naley uywa zbyt wymylnych i rzadko spotykanych krojw czcionek. Warto trzyma si
najpopularniejszych, jak Times, Arial czy Helvetica.

Za rozmiar czcionki uytej na stronie odpowiada parametr font-size. Rozmiar

czcionki moe by podany w jednostkach wzgldnych lub bezwzgldnych. Moesz w zwizku z tym uywa nastpujcych definicji rozmiarw czcionki:
vv font-size: 20 pt,
vv font-size: 12 px,
vv font-size: 200%.
Ciekawym rozwizaniem jest rwnie moliwo korzystania ze zdefiniowanych
wielkoci: xx-small, x-small, medium, large, x-large, xx-large. Dodatkowo
istnieje rwnie moliwo okrelenia wzgldnych rozmiarw za pomoc opcji
larger oraz smaller. Na przykad:
body
{font-size: large;}
.wiekszy
{ font-size: larger;}
.mniejszy
{font-size: smaller;}
Pojcie wagi czcionki odnosi si do jej gruboci, a do definicji gruboci czcionki
uywany jest atrybut font-weight. Warto moe by okrelona za pomoc liczb
z przedziau od 100 do 900 oraz nazw bold, bolder, lighter i normal. Styl
czcionki jest definiowany przez parametr font-style, ktry moe przyjmowa
jedn z dwch wartoci italic (kursywa) lub oblique.

Kontrola nad wygldem list za pomoc kaskadowych arkuszy stylw polega na

sterowaniu waciwociami uytej czcionki oraz okrelaniu typu listy, uytego punktora graficznego oraz definiowaniu pozycji elementw listy wzgldem
punktora.

Typy list dzielimy na punktowane, numerowane i definicje. Od typu listy uzalenione s rodzaje punktorw, ktrych moemy uy w licie. Dla list numerowanych punktorami mog by litery (mae lub wielkie) oraz cyfry (arabskie lub
rzymskie). Dla list punktowanych moemy uy takich punktorw jak kwadrat,
koo lub okrg.
134

Co to znaczy mie styl, czyli sw kilka o CSS

Typ listy okrela waciwo list-style-type. Dla listy punktowanej moe ona
przyjmowa wartoci:
vv disc punktor ma posta koa,
vv circle punktor ma posta okrgu,
vv square punktor ma posta kwadratu.

Dla listy numerowanej waciwo list-style-type moe przyjmowa wartoci:

vv decimal odpowiada liczbom arabskim,
vv lower-roman odpowiada maym liczbom rzymskim,
vv upper-roman odpowiada duym liczbom rzymskim,
vv lower-alpha odpowiada maym literom,
vv upper-alpha odpowiada duym literom,
vv none brak wypunktowania.

Czasem projektanci chc zabysn zupenie now i niestandardow koncepcj

listy, i wanie na takie okazje twrcy kaskadowych arkuszy stylw przygotowali
parametr list-style-image, ktry pozwala uy jako punktora listy wskazanego pliku graficznego w formacie GIF, JPG lub PNG. Naley jednak pamita, e
obrazek nie powinien by zbyt duy, gdy bdzie psu efekt listy (rysunek 6.13).
Czasem moe rwnie wystpi konieczno regulacji pooenia tekstu wzgldem punktora. Do tego celu suy parametr list-style-position.

Rysunek 6.13. Punktor w licie mona zastpi niewielkim plikiem graficznym

Parametr list-style-position przyjmuje nastpujce wartoci:

vv outside punktor znajduje si wyranie poza list,
vv inside punktor jest schowany w tekcie listy.

135

Tworzenie stron WWW. Ilustrowany przewodnik

Jeeli lista zawiera krtkie wpisy w kadym punkcie, to rnica pomidzy ustawieniami parametru list-style-position bdzie dla uytkownika trudna do
zauwaenia. Stosowanie tego parametru jest zasadne, jeli kada pozycja listy
skada si z wicej ni jednego wiersza.

Kolor i to
Kady element strony, ktry moesz sformatowa przez uycie kaskadowych arkuszy stylw, moe mie zdefiniowany kolor i to. Jako to elementy mog mie
zdefiniowany kolor lub uycie wskazanego obrazu. Aby przypisa kolor do elementu strony, naley uy parametru color i poda warto koloru przez uycie
jego zwyczajowej nazwy angielskiej, zapisu z palety rgb lub okrelenie wartoci
szesnastkowej koloru. Szczegowe sposoby definiowania kolorw znajdziesz
wczeniej w tym rozdziale.
To elementu moesz okreli poprzez podanie koloru ta:
selektor {background-color: warto;}
lub wskazanie obrazu, ktry ma zosta uyty jako to obiektu:
selektor {background-image: URL(obraz.gif)}
Obraz uyty jako to elementu strony musi by zapisany w formacie JPG, GIF
lub PNG.

Domylnie obraz uyty jako to elementu jest powielany do rozmiaru elementu,

jeli jego rozmiar jest mniejszy ni rozmiar elementu, ktrego to stanowi. Jednak
za pomoc kaskadowych arkuszy stylw moliwe jest wprowadzenie kontroli nad
powielaniem oraz zablokowanie przewijania ta.
Za powielanie obrazu w obrbie elementu, dla ktrego zdefiniowane jest to bdce obrazem, odpowiada parametr background-repeat, ktry moe przyjmowa nastpujce wartoci:

vv no-repeat to nie bdzie powielane i zostanie wywietlone tylko jeden

raz,
vv repeat-x to bdzie powielane wyczenie w poziomie,
vv repeat-y to bdzie powielane wycznie w pionie,
vv repeat to bdzie powielane w pionie i w poziomie.

Dodatkowo istnieje moliwo zatrzymania ta, aby nie przesuwao si wraz z zawartoci caej strony. Do tego celu suy parametr background-attachment
z ustawion wartoci fixed. Na przykad:
body
{background-image: url(tlo.gif);
136

Co to znaczy mie styl, czyli sw kilka o CSS

background-attachment: fixed;
}
Specyfikacja kaskadowych arkuszy stylw pozwala nie tylko zdefiniowa sposb
powtarzania obrazu umieszczonego w tle elementu, ale rwnie pozwala okreli
pozycj obrazu wzgldem okna przegldarki lub jego lewego grnego rogu. Waciwo t okrela parametr background-position, ktry moe przyjmowa
jedn z nastpujcych wartoci:
vv center to wyrodkowane,
vv left to z lewej strony okna,
vv right to z prawej strony okna,
vv top to znajduje si na grze okna,
vv bottom to znajduje si na dole okna,
vv warto liczbowa okrela odlego ta od lewego grnego rogu okna
przegldarki.

Wartoci parametrw mona ze sob czy, dziki czemu mona na przykad

umieci to w prawym, grnym rogu okna przegldarki, stosujc zapis:
background-position: right top

Jeli zdecydowae si na uycie wartoci liczbowych do okrelenia pooenia ta,

moesz stosowa wartoci wzgldne lub bezwzgldne.
Szczegowy opis wartoci wzgldnych i bezwzgldnych stosowanych w kaskadowych arkuszach stylw znajdziesz wczeniej w tym rozdziale.

Marginesy
Podczas tworzenia stron WWW mona definiowa dwa rodzaje marginesw:
zewntrzne i wewntrzne. Marginesy zewntrzne strony to margines lewy, prawy,
grny i dolny. Do okrelania szerokoci marginesu naley uy parametru margin
w poczeniu z okreleniem pooenia marginesu:
vv margin-left lewy margines.
vv margin-right prawy margines,
vv margin-top grny margines,
vv margin-bottom dolny margines.

Parametr przyjmuje wartoci liczbowe wzgldne i bezwzgldne. Marginesy s definiowane w sposb niezaleny od siebie (grny moe by inny ni dolny, a prawy
moe by inny ni lewy) i mog przyjmowa wartoci ujemne.
Przykadowa definicja marginesw na stronie:

137

Tworzenie stron WWW. Ilustrowany przewodnik

body
{
margin-left: 1 cm;
margin-right: 2 cm;
margin-top: 1 cm;
margin-bottom: 3 cm;
}
Uwaga

Pamitaj, e marginesy rnych elementw si sumuj. Jeli na przykad ustawisz

lewy margines dla elementu <body> na 2 cm, a nastpnie umiecisz na stronie
tabel, dla ktrej ustawisz lewy margines na 2 cm, to lewa krawd tabeli zostanie
odsunita od lewej krawdzi strony o 4 cm.
Wskazwka

Jeli chcesz ustawi identyczne wartoci dla wszystkich marginesw, moesz to

zrobi, uywajc wycznie parametru margin, na przykad:

body
{
margin: 12 pt
}
Margines wewntrzny jest definiowany za pomoc parametru padding w poczeniu z okreleniem miejsca na stronie, ktrego dotyczy margines. Okrelenie
to naley poda w jzyku angielskim: right (prawy), left (lewy), top (grny)
i bottom (dolny).

Programy do tworzenia arkuszy stylw

Mam dla Ciebie dobr wiadomo nie zawsze bdziesz musia tworzy kaskadowe arkusze stylw samodzielnie, poniewa istniej programy, ktre zrobi
za Ciebie brudn robot. W takie funkcje wyposaone s dobre edytory WYSIWYG (jak na przykad Dreamweaver, o czym mwilimy szczegowo w rozdziale 2.), ale moesz rwnie pobra programy do tworzenia arkuszy stylw
z sieci. Do takich programw naley Style Master, ktrego testow wersj moesz
pobra pod adresem http://www.westciv.com/style_master (rysunek 6.14).

138

Co to znaczy mie styl, czyli sw kilka o CSS

Rysunek 6.14. Program Style Master pozwala w prosty sposb tworzy kaskadowe arkusze
stylw

Jeli zainteresowaa Ci tematyka kaskadowych arkuszy stylw, moesz pogbi

swoj wiedz, odwiedzajc witryny powicone tej tematyce:
vv http://www.csszengarden.com (rysunek 6.15),
vv http://www.kurshtml.boo.pl/,
vv http://www.w3schools.com/css/.

139

Tworzenie stron WWW. Ilustrowany przewodnik

Rysunek 6.15. W sieci WWW znajdziesz wiele witryn szczegowo omawiajcych tematyk
kaskadowych arkuszy stylw

140