Kurs CSS
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ą:
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.
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.
Wstęp |
Cascading Style |
Składnia,
Jednostski,
Czcionka,
Tekst,
Kolor / tło,
Scrollbar,
Outline,
Listy,
Tabele
|
Dziedziczenie |
Selektory
|
FAQ