R_10_07.PDF

Rozdział 10.

XHTML i arkusze stylów

W trzech ostatnich rozdziałach mogłeś zauważyć odwołania do znaczników HTML,

które często określałam jako „przestarzałe w HTML-u 4.0 i zastępowane arkuszami

stylów ”. Nadszedł czas, aby rozwiać tę tajemnicę i pokazać, jakie są tendencje rozwoju

HTML-a. W tym rozdziale poznasz sposób na formatowanie i projektowanie stron

opracowany przez World Wide Web Consortium. W rozdziale 3. — „Wprowadzenie do

HTML” dowiedziałeś się, że HTML jest językiem znacznikowym, którego zadaniem

jest opis struktury strony, a nie jej wyglądu. HTML nigdy nie został zaprojektowany

w celu określania wyglądu strony (wyboru czcionek, kolorów czy też odległości

pomiędzy wyrazami bądź literami), został on stworzony w celu opisu elementów

tworzących stronę (nagłówków, teksu, obrazów, itp.). Rozszerzenia standardowych

znaczników HTML (< font >, < color >, < margin >, itd.) udostępniły autorom stron

WWW możliwości wykraczające poza początkowe zamierzenia twórców języka

HTML.

W celu przywrócenia początkowej struktury języka HTML i zapewnienia autorom stron

WWW tak poszukiwanej możliwości kontroli ich układu i wyglądu World Wide Web

Consortium wprowadziło kaskadowe arkusze stylów (ang: Cascading S

tyle Sheets,

w skrócie: CSS) oraz XHTML ( Extensible HyperText Markup Language ).

tym rozdziale poznasz:

różnice pomiędzy językami HTML i XHTML,

podstawowe informacje o kaskadowych arkus

krótką historię kaskadowych arkuszy stylów,

sposoby tworzen

arkuszy stylów,

najczęściej wykorzystywane właściwości stylów oraz ich wartości,

sposoby kontroli wyglądu strony, czcionek i

zach stylów,

ia i implementacji zewnętrznych, osadzonych oraz lokalnych

kolorów przy wykorzystaniu

właściwości kaskadowych arkuszy stylów.

246

Część 4. Arkusze stylów, tabele i ramki

Czym

jest XHTML i dlaczego należy go używać?

World Wide Web Consortium (W3C) określa XHTML jako sposób wyrażenia HTML 4.0

w postaci aplikacji XML. Uważam, że to dobra wiadomość dla wszystkich autorów

stron WWW. Wraz z rozwojem Internetu coraz więcej firm będzie wchodziło na rynek,

prezentując nowe przeglądarki dokumentów (na przykład, przeglądarki internetowe

oraz inne programy). Jest całkiem prawdopodobne, że w niedalekiej przyszłości

dzisiejsze przeglądarki zostaną zastąpione jakimiś zupełnie nowymi programami.

eć pewność, że Twoje strony WWW będzie można oglądać

ch. Właśnie w tym celu został opracowany XHTML. Jest to

Identyfikator <DOCTYPE>

amiętasz zapewne, że wszystkie dokumenty HTM

HTML> , <HEAD> , <BODY> oraz odpowiednie znacznik

rzedstawiłam

L muszą zawierać pewne elementy:

i zamykające; elementy te

w poniższym przykładzie:

<html>

<head>

<title>Prosta strona HTML</title></head>

<body>

Najprostsza strona WWW zawierająca 3 znaczniki

</body>

</html>

TML dodaje jeszcze jeden wymagany element — identyfikator <DOCTYP

acznik ten określa typ tworzonego dokumenty HTML, który może b

ansitional (pośredni), ścisły Strict

żyj znacznika <DOCTYPE> definiującego typ dokumentu jako po

ument jest w większości przypadków format

E> .

yć:

(ścisły) lub Frameset (układ ramek).

średni

ransitional), jeśli dok

życiu arkuszy stylów,

(określające, na przykład, kolory i czcionki), dzięki którym dokument może być

oglądany w starszych przeglądarkach.

owany przy

jednak zawiera także formatujące znaczniki HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN"

"http://www.w3.org/TR/xhtml1/DTD/ transitional.dtd ">

żyj znacznika <DOCT

okument jest formato

YPE> definiującego typ dokumentu jako

ścisły (strict), jeśli

wany wyłącznie za pomocą arkuszy stylów. Dokumenty

tego typu będzie można oglądać tylko w przeglądarkach obsługujących kaskadowe

arkusze stylów (CSS), takich jak Internet Explorer 4 lub Netscape Navigator 4.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Stri

rg/TR/xhtml1/DTD/ strict.dtd ">

ct //EN"

"http://www.w3.o

Użyj znacznika <DOCTYPE> definiującego typ dokumentu jako układ ramek, jeś

dokument zawiera układ ramek. Układy ramek nauczysz się tworzyć w rozdziale 12.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset //EN"

"http://www.w3.org/TR/xhtml1/DTD/ frameset.dtd ">

Niewątpliwie chciałbyś mi

w tych nowych programa

możliwe dzięki wprowadzaniu wymogu, aby dokumenty spełniały pewne ściśle określone

rygory.

Rozdział 10. XHTML i arkusze stylów

247

Przykłady przedstawione w tej książce są zgodne ze standardem XHTML Transitional.

Składn

ia XHTML

TML t

łędów bez żadnych konsekwencji, na przy

nacznik <LI> (element listy) wew

dnocześ

znacznika zamykającego. Z punktu widzenia języka

rzystujący poprawną składnię):

<ol>

o język znacznikowy, w którym można sobie pozwolić na popełnianie pewnych

kład, HTML wie, że rozpoczynając kolejny

nątrz znacznika <OL> (listy numerowanej), chcesz

nie zamknąć poprzedni znacznik <LI> , choć nie podałeś odpowiedniego

HTML poniższy przykład (wyko-

<li START="3">Hej ho, hej ho

pracy by się...</li>

li>

<li>do

</ol>

nie różni się niczym od poniższego f

ragmentu kodu:

<OL>

<LI start="3">Hej ho, hej ho

pracy by się...</LI>

ani do kodu o następującej postaci:

ol>

LI>do pracy by się...</LI>

/OL>

Z p

unktu widzenia języka XHTML wszystkie te przykłady są odmienne. W dalszej

tego podrozdziału

czę-

ści

dowiesz się dlaczego:

nazwy znaczników i atrybutów zapisuj małymi literami , z punktu widzenia języka

XHTML <LI> , <li> oraz <Li> to różne znaczniki, które należy traktować

w całkowicie odmienny sposób, aby ułatwić przeglądarkom analizę i przetwarzan

kodu dokumentów, wszystkie znaczniki i atrybuty HTML będziemy zapisywali

małymi literami,

wartości atrybutów zapisuj wewnątrz cudzysłowów , upewnij się, że wartości

wszystkich atrybutów są zapisywane wewnątrz znaków cudzysłowu, w ten sposó

ułatwisz przeglądarce określenie, że dany tekst jest wartością, a nie poleceniem,

zakańczaj wszystkie znaczniki posiadające jakąś zawartość , jak już wspominała

wcześniej, w

omimo to będzie w stanie poprawnie wyświetlić dokument; XHTML

k należy zak

języku HTML można pominąć znacznik zamykający, a przeglądarka,

p wymaga,

a ańczać

znaczniki, takie jak <BR> — przejście do nowego wiersza lub <HR> — poziomą

by wszystkie znaczniki były poprawnie zamykane, ale ja

nię, które nie mają żadnych znaczników zamykających? Wyst

nacznika zmykający znak ukośnika ( / ), jak pokazałam

arczy umieścić

a końcu z

w poniższym

<LI>do

</OL>

248

Część 4. Arkusze stylów, tabele i ramki

rzykładzie:

<!DOCTYPE html

"http://www.w3.org/TR/xhtml1/DTD/strict.dtd">

<html>

<head>

<title>Nowe wiersze i poziome linie</title></head>

<body>

Pierwszy wiersz<br />

Drugi wiersz

<hr /> <!-

</body>

</html>

oprawnie zagnieżdżaj znaczniki i nie dopuszczaj, aby „zachodziły” na sie

języku HTML oba przedstawi

PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

- otwiera i zamyka znacznik hr -->

p bie ,

w one poniżej fragmenty kodu były identyczne;

jednak w XHTML-u fragmenty te różnią się od siebie; pierwszy przedstawiony

przykład jest poprawny, a drugi nie.

grubiony.<i>Pogrubiona kursywa.</i></b><i>Tekst

wyświetlony kursywą.</i>

<b>Ten tekst jest po

<b>Ten tekst jest pogrubiony.<i>Pogrubiona kursywa.</b>Tekst

wyświetlony kursywą.</i>

Idea

arkuszy stylów

Teraz, kiedy już wiesz, jak należy pisać dokumenty HTML, używając poprawnej skład-

ni języka XHTML oraz, jak określać typ dokumentów przy użyciu znacznika <DOCTY-

E> , zrozumienie idei arkuszy stylów nie powinno przysporzyć Ci żad

pierwszej kolejności autor tworzy standardową stronę

m standa

tworzona, standardowa strona WWW jest całkowicie nieza

wana w taki sposób, aby można ją było poprawnie

nych problemów.

WWW, wykorzystując przy

rdowe znaczniki HTML (te same, które były używane do tej pory). Tak

leżna, to znaczy, została

aprojekto

ach, które nie obsługują arkuszy stylów. Poni

wyświetlić w przeglądar-

żej podałam prosty przykład takiej strony:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://

<html>

www.w3.org/TR/xhtml1/DTD/strict.dtd">

<head>

<title>Zastosowanie arkuszy stylów</title></head>

<body>

<h1>Zastosowanie arkuszy stylów</h1>

<p> W tym prostym przykładzie, nagłówek zostanie wyświetlony

na niebiesko, a tekst akapitu będzie miał inną czcionkę.</p>

</body>

</html>

Powyższa strona WWW nie zawiera żadnych atrybutów określających jej wygląd.

Zgodnie z jej treścią autor chce, aby nagłówek był niebieski, a do wyświetlenia tekstu

akapitu użyje innej czcionki. Aby zrealizować te zamierzenia, tworzy arkusz stylów,

który umożliwia sformatowanie zawartości strony

w sposób określony przez jej autora.

R ne znaczni-

ki (na przykład, h1 ) z właściwościami (takimi jak: color : blue ). W arkuszach stylów

eguły stylów mogą formatować wszystkie znaczniki HTML, łącząc wybra

Rozdział 10. XHTML i arkusze stylów

249

zna

czniki HTML używane są jako selektory . Reguły stylów mogą określać u

cznika oraz wszelkie inne właściwości związane z typografią oraz jego wyg

iżej podałam kilka przykładów reguł stylów.

kład

zna

lądem.

h1 { color: blue }

p { font-family: Arial, Helvetica, sans-serif; color: black }

Reguły stylów , używane w kaskadowych arkuszach stylów, składają się z dwóch części:

selektora , którym może być znacznik HTML, na przykład, p lub h1 oraz z deklaracji

definiującej właściwości i wartości selektora, na przykład, color: blue (gdzie color jest

właściwością, blue , wartością).

Reguła zapisana w pierwszym wierszu powyższego przykładu określa, że nagłówek h1

na stronie będzie wyświetlany w kolorze niebieskim. Natomiast druga reguła określa, że

tekst wszystkich akapitów (znaczników <P> ) na stronie zostanie wyświetlony na czar-

no, czcionkami Arial, Helvetica lub dowolną inną czcionką bezszeryfową.

Teraz, gdy autor stworzył już zawartość strony (standardową stronę WWW) oraz okre-

ślił reguły rządzące jej wyglądem, czas na kolejny etap, którym będzie dołączenie reguł

stylów do standardowego dokumentu HTML. Można to zrobić na trzy sposoby: wyko-

rzystując zewnętrzny arkusz stylów, osadzając arkusz stylów (jak pokazałam w kolej-

nym przykładzie) lub wpisując styl wew

Sposoby tworzenia arkuszy stylów”, dowiesz się więcej na temat spo

rkuszy stylów.

nątrz znacznika. W dalszej części rozdziału pt.:

„

sobów tworzenia

oniższy przykład pokazuje, jak nasza prosta strona W

stylów:

WW może zostać sformatowana

a pomocą osadzonego arkusza

<!DOCTYPE html PUBLI

"http://www.w3.org/TR/xhtml1/DTD/strict.dtd">

C "-//W3C//DTD XHTML 1.0 Strict//EN"

<htm

<head>

<title>Z

tosowanie arkuszy stylów</title>

pe="text/css">

<style

<!--

H1 { color: blue }

P { font-family: Arial, Helvetica, sans-serif; color: black }

-->

</style>

</head>

<body>

<h1>Zastosowanie arkuszy stylów</h1>

<p> W tym prostym przykładzie, nagłówek zostanie wyświetlony

na niebiesko, a tekst akapitu będzie miał inną czcionkę.</p>

</body>

</html>

entu HTML. Kod określający

wygląd strony został umieszczony pomiędzy otwierającym znacznikiem <STYLE> oraz

nie są w stanie

k jakby był on

standardowym dokumentem HTML, natomiast nowsze przeglądarki, obsługujące arku-

odpowiednim znacznikiem zamykającym </STYLE> . Przeglądarki, które

obsługiwać arkuszy stylów, wciąż będą w stanie wyświetlić dokument, ta

sze stylów, wyświetlą go zgodnie z podanymi regułami.

W powyższym przykładzie, demonstrującym wykorzystanie osadzonego arkusza sty-

lów, autor strony oddzielił style od standardowego dokum

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika: