|
Kurs CSS cz.I
W tej czΩ╢ci
zostanie pokazane jak │atwe jest tworzenie opisu wygl▒du dokumentu. Zak│adam,
┐e znane s▒ podstawy jΩzyka HTML. ZacznΩ od ma│ego dokumentu HTML:
<!DOCTYPE
HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Przyklad 1</TITLE>
</HEAD>
<BODY>
<H1>Przyklad 1</H1>
<P>To jest tekst na naszej stronie.
</BODY>
</HTML> |
Aby
ustawiµ kolor tekstu w znaczniku H1 jako niebieski mo┐na pos│u┐yµ siΩ poni┐sz▒
instrukcj▒:
CSS sk│ada
siΩ z dw≤ch czΩ╢ci: selektora (H1) i deklaracji (color:
blue). Selektor to nic innego jak nazwa znacznika HTML. Deklaracja
zawiera dwie czΩ╢ci: w│a╢ciwo╢µ (color) i warto╢µ (blue).
Specyfikacja
HTML 4.0 okre╢la w jakim miejscu opis wygl▒du mo┐e siΩ znajdowaµ:
- w dokumencie HTML;
- w osobnym pliku *.css.
Aby umie╢ciµ
opis wygl▒du wewn▒trz dokumentu HTML nale┐y u┐yµ znacznika STYLE:
<!DOCTYPE
HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Przyklad 1</TITLE>
<STYLE type="text/css">
H1 { color: blue }
</STYLE>
</HEAD>
<BODY>
<H1>Przyklad 1</H1>
<P>To jest tekst na naszej stronie.
</BODY>
</HTML> |
Dla zwiΩkszenia
giΩtko╢ci, zalecane jest aby autorzy korzystali z zewnΩtrznych opis≤w wygl▒du.
Takie rozwi▒zanie ma dwie zalety:
- tre╢µ opisu mo┐e byµ zmieniana bez modyfikacji ╝r≤d│owego dokumentu
HTML,
- pliki CSS mog▒ byµ wsp≤│dzielone przez kilka dokument≤w.
W celu przy│▒czenia zewnΩtrznego opisu wygl▒du dokumentu nale┐y wykorzystaµ
znacznik LINK:
<!DOCTYPE
HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Przyklad 1</TITLE>
<LINK rel="stylesheet" href="przyklad.css" type="text/css">
</HEAD>
<BODY>
<H1>Przyklad 1</H1>
<P>To jest tekst na naszej stronie.
</BODY>
</HTML> |
Znacznik LINK
zawiera:
- typ: "stylesheet";
- nazwΩ
i po│o┐enie opisu wygl▒du wewn▒trz atrybutu "href";
- typ
opisu wygl▒du okre╢lonego przez: "text/css".
W celu
pokazania wiΩkszego zwi▒zku miΩdzy opisem wygl▒du i jΩzykiem HTML zostanie
zaprezentowany przyk│ad trochΩ bardziej rozbudowany pod wzglΩdem zawarto╢ci
znacznika STYLE. Teraz dodana zostanie wiΩksza ilo╢µ kolor≤w:
<!DOCTYPE
HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Przyklad 1</TITLE>
<STYLE type="text/css">
BODY { color: red }
H1 { color: blue }
</STYLE>
</HEAD>
<BODY>
<H1>Przyklad 1</H1>
<P>To jest tekst na naszej stronie.
</BODY>
</HTML> |
Powy┐szy
opis wygl▒du zawiera dwie linie: pierwsza ustawia kolor znacznika BODY
na warto╢µ red (czerwony), za╢ druga ustawia kolor znacznika H1
na warto╢µ blue (niebieski). Poniewa┐ nie zosta│ okre╢lony
kolor dla znacznika P, bΩdzie on dziedziczony od znacznika
'ojcowskiego', zwanego BODY. Znacznik H1 jest tak┐e
'dzieckiem' w stosunku do znacznika BODY, ale druga instrukcja w
znaczniku <STYLE> (tj. H1 { color: blue })
uniewa┐nia dziedziczon▒ warto╢µ.
CSS2 ma
ponad 100 r≤┐nych w│a╢ciwo╢ci, w│▒czaj▒c w to color. Oto
kilka innych jeszcze:
<!DOCTYPE
HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Przyklad 1</TITLE>
<STYLE type="text/css">
BODY {
font-family: "Gill Sans", sans-serif;
font-size: 12pt;
margin: 3em;
}
</STYLE>
</HEAD>
<BODY>
<H1>Przyklad 1</H1>
<P>To jest tekst na naszej stronie.
</BODY>
</HTML> |
Pierwsz▒
rzecz▒ jak▒ mo┐na zauwa┐yµ to to, ┐e kilka deklaracji jest zgrupowanych
wewn▒trz bloku zawartego wewn▒trz nawias≤w klamrowych ({...}), i
oddzielonych od siebie przy pomocy ╢rednik≤w. Ostatnia deklaracja nie musi byµ
zako±czona ╢rednikiem.
Pierwsza
deklaracja w znaczniku BODY ustawia czcionkΩ na "Gill
Sans". Je┐eli wy┐ej wymieniona czcionka nie bΩdzie dostΩpna,
przegl▒darka u┐yje czcionki "sans-serif". Znaczniki
'dzieci' w stosunku do znacznika BODY bΩd▒ teraz dziedziczy│y
warto╢µ w│a╢ciwo╢ci font-family.
Druga deklaracja ustawia rozmiar czcionki znacznika BODY na warto╢µ
12 punkt≤w. Jednostka 'pt' jest powszechnie u┐ywana do okre╢lania
rozmiaru czcionki i innych warto╢ci zwi▒zanych z d│ugo╢ci▒. Jest to
jednostka bezwzglΩdna, kt≤ra nie jest skalowalna wzglΩdem ╢rodowiska.
Trzecia deklaracja u┐ywa jednostki wzglΩdnej, kt≤ra jest skalowalna w
stosunku do otoczenia. Jednostka 'em' odnosi siΩ do rozmiaru
czcionki tego elementu. W tym przypadku rezultat jest taki, ┐e marginesy wok≤│
elementu BODY s▒ trzy razy szersze ni┐ rozmiar czcionki.
CSS mo┐e
byµ u┐ywany z r≤┐nymi formatami dokument≤w, na przyk│ad z aplikacjami XML.
W rzeczywisto╢ci XML jest bardziej uzale┐niony od CSS ni┐ HTML, poniewa┐
autorzy nie mog▒ wymy╢liµ w│asne znaczniki (elementy), z kt≤rych
przedstawieniem mo┐e mieµ p≤╝niej problemy przegl▒darka. Oto prosty przyk│ad
XML:
<ARTICLE>
<HEADLINE>Fredrick the Great meets Bach</HEADLINE>
<AUTHOR>Johann Nikolaus Forkel</AUTHOR>
<PARA>
One evening, just as he was getting his
<INSTRUMENT>flute</INSTRUMENT> ready and his
musicians were assembled, an officer brought him a list of
the strangers who had arrived.
</PARA>
</ARTICLE> |
Aby m≤c
przedstawiµ ten fragment dokumentu, nale┐y najpierw zadeklarowaµ, kt≤re
elementy s▒ w tej samej linii (inline-level), a kt≤re s▒ w nastΩpnej linii (block-level).
INSTRUMENT
{ display: inline }
ARTICLE, HEADLINE, AUTHOR, PARA { display: block } |
Pierwsza
instrukcja okre╢la, ┐e znacznik INSTRUMENT ma znale╝µ siΩ w
tej samej linii tekstu co znaczniki otaczaj▒ce (tzn. bez przej╢µ do nastΩpnej
linii), za╢ druga instrukcja, w kt≤rej znaczniki oddzielone s▒ przecinkami
okre╢la, kt≤re z nich znajdowaµ siΩ powinny w osobnych liniach.
Teraz nale┐y po│▒czyµ opis wygl▒du z dokumentem XML. Mo┐na to zrobiµ w
nastΩpuj▒cy spos≤b:
<?XML:stylesheet
type="text/css" href="bach.css"?>
<ARTICLE>
<HEADLINE>Fredrick the Great meets Bach</HEADLINE>
<AUTHOR>Johann Nikolaus Forkel</AUTHOR>
<PARA>
One evening, just as he was getting his
<INSTRUMENT>flute</INSTRUMENT> ready and his
musicians were assembled, an officer brought him a list of
the strangers who had arrived.
</PARA>
</ARTICLE> |
Przegl▒darka
powinna przedstawiµ powy┐szy fragment jako:
Fredrick
the Great meets Bach
Johann Nikolaus Forkel
One evening, just as he was getting his flute ready and his
musicians were assembled, an officer brought him a list of
the strangers who had arrived. |
Zauwa┐,
┐e s│owo "flute" pozosta│o w tym samym wierszu,
poniewa┐ znajdowa│o siΩ wewn▒trz znacznika INSTRUMENT.
Na razie tekst nie zosta│ jeszcze sformatowany. Ale za chwilΩ bΩdzie to
zrobione. Dla przyk│adu, rozmiar czcionki nag│≤wka bΩdzie wiΩkszy ni┐
rozmiar pozosta│ego tekstu, a linia zawieraj▒ca imiΩ i nazwisko autora bΩdzie
wyr≤┐niona czcionk▒ pochy│▒ (italic):
INSTRUMENT
{ display: inline }
ARTICLE, HEADLINE, AUTHOR, PARA { display: block }
HEADLINE { font-size: 1.3em }
AUTHOR { font-style: italic }
ARTICLE, HEADLINE, AUTHOR, PARA { margin: 0.5em } |
Przegl▒darka
powinna przedstawiµ poni┐szy fragment jako:
Fredrick
the Great meets Bach
Johann
Nikolaus Forkel
One
evening, just as he was getting his flute ready and his
musicians were assembled, an officer brought him a list of
the strangers who had arrived.
|
Dodanie
wiΩkszej ilo╢ci instrukcji do opisu wygl▒du pozwoli na dalsz▒ poprawΩ
prezentacji dokumentu.
Autor:
Krzysztof Stelmach
stelmi@priv2.onet.pl
http://stelmik.prv.pl
|