CSS
- Część 1
1.
Wstęp.
1.1
Krótki opis CSS dla HTML
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ą:
H1
{ color: blue }
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:
ltyp: "stylesheet";
lnazwę
i położenie opisu wyglądu wewnątrz atrybutu "href";
ltyp
opisu wyglądu określonego przez: "text/css".l
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.
1.2
Opis CSS2 dla XML
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.
Kurs
pochodzi z serwisu Programowanie wg Stelmika
zanotowane.pldoc.pisz.plpdf.pisz.plteen-mushing.xlx.pl