|
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ą:
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.
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. | 
