Umieszczanie stylów w dokumencie
Kaskadowe arkusze stylów mogą być osadzone w kodzie strony na kilka sposobów. Specyfikacja przewiduje następujące rozwiązania:
■ Style wewnętrzne
♦ lokalne
♦ zagnieżdżone
■ Style zewnętrzne
♦ dołączone
♦ importowane
Pierwszym rozwiązaniem jest umieszczenie deklaracji stylu bezpośrednio w formatowanym znaczniku. Rozwiązanie takie nosi nazwę stylu lokalnego, gdyż działa wyłącznie na zawartość znacznika, w którym się znajduje.
<p>Treść dokumentu</p>
<p style=”color:green; font-size:15pt;”Treść dokumentu</p>
Wadą powyższego rozwiązania jest spore utrudnienie w przypadku zmiany sposobu formatowania danego elementu oraz niepotrzebne powiększanie kodu. Weźmy na przykład dokument, w którym umieszczono czterdzieści bloków tekstu i każdy z nich ma wyglądać identycznie. Aby to osiągnąć, do każdego z nich należy wpisać odpowiednie style. Wiąże się to z wykonaniem dodatkowej pracy, stratą czasu oraz zwiększeniem objętości kodu. Sytuację taką przewidzieli twórcy kaskadowych arkuszy stylów, dzięki czemu mamy drugą możliwość: umieszczanie CSS w kodzie XHTML i HTML. Metoda ta polega na zdefiniowaniu odpowiednich wpisów bezpośrednio w nagłówku <head></head> strony. Rozwiązanie to nazywane jest stylem zagnieżdżonym i dzięki jego zastosowaniu polecenia formatujące obejmują swym działaniem całą zwartość <body></body>.
<?xml version=“1.0″ encoding=”IS0-8859-2″?>
<!D0CTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” „http://www.w3.org/TR/xhtmll/DTD/xhtml 1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”pl”>
<head>
<meta http-equiv=”content-type” content=“text/html;charset=IS0-8859-2“ /> <title>Tomasz Dalowski – strona domowa</title>
<style type=”text/css”>
P
{
color:green; font-family:Arial;
}
</style>
</head>
<body>
<p>Przykładowy blok tekstu.</p>
</body>
</html>
Style wewnętrzne — zarówno lokalne, jak i zagnieżdżone — poza zaletami mają również dość poważne wady. Weźmy jako przykład rozbudowany serwis, np. portal Onet.pl, na który składają się setki lub tysiące podstron. Każda z nich jest formatowana w podobny sposób i wykorzystuje ten sam zestaw stylów. W takim przypadku style lokalne odpadają, a zagnieżdżanie definicji w nagłówki <head></head> również nie jest najlepszym pomysłem. Na szczęście istnieje jeszcze trzecia możliwość — styl zewnętrzny — która opiera się na znaczniku <link />, umieszczanym bezpośrednio w nagłówku strony, dzięki czemu taki arkusz również działa na cały dokument. Znacznik ten pozwala na podłączenie zewnętrznego arkusza stylów. Odpowiedni wpis ma następującą postać:
<?xml version=”1.0″ encoding=”IS0-8859-Z”?>
<!D0CTYPE html PUBLIC „-//W3C//DTD XHTML 1.0 Strict//EN” „http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:1ang=“pl”>
<head>
<meta http-equiv=“content-type” content=”text/html;charset=IS0-8859-2“ /> <title>Tomasz Dalowski – strona domowa</title>
<link rel=”Stylesheet” href=”style.css” type=”text/css” />
</head>
<body>
<p>Przykładowy blok tekstu</p>
</body>
</html>
Atrybut href odpowiada za określenie nazwy oraz lokalizacji wybranego arkusza. Kolejny element, rel, definiuje relacje, które w przypadku CSS zawsze mają wartość stylesheet. Ostatni element — type — zawsze posiada wartość text/css.
Dzięki temu przeglądarka „wie”, z jakim arkuszem ma do czynienia. Działanie tego elmentu docenimy w przyszłości, gdy powstaną inne arkusze i zajdzie potrzeba korzystania z nich.
Zewnętrzny arkusz jest zwyczajnym plikiem tekstowym, a jego zawartość może wyglądać tak jak w poniższym przykładzie.
/* To jest przykład zewnętrznego arkusza stylów*/
P
{
color:green; font-family:Arial;
}
Zewnętrzny arkusz powinien być zapisany w pliku o dowolnej nazwie, która nie zawiera polskich znaków. Taki dokument bezwzględnie musi posiadać rozszerzenie zgodne ze wzorem nazwa-pliku.css.
Specyfikacja CSS daje nam jeszcze możliwość zaimportowania arkusza z innej strony oraz zdefiniowania kilku zewnętrznych arkuszy dla tej samej strony.
Kaskadowe arkusze stylów
Pisząc o języku XHTML lub HTML 4.01, nie sposób pominąć kaskadowych arkuszy stylów. Właściwie bez CSS nie da się obecnie zrobić ciekawie wyglądającej strony, która do tego jeszcze byłaby zgodna ze specyfikacją ww. języków.
Na początku wyjaśnijmy sobie, czym są owe kaskadowe arkusze stylów. Pojęcie to pojawiało się w poprzednim rozdziale prawie na każdej stronie, ale nie zostało dokładnie omówione. Od wersji HTML 3.2 wprowadzono pewne innowacje w strukturze języka i zaczęto zastępować część znaczników innymi. Nowe znaczniki nazwano kaskadowymi arkuszami stylów i sukcesywnie je rozbudowywano. Obecnie najnowsza specyfikacja CSS nosi numer 2.1. Prowadzone są również prace nad jej trzecią odsłoną.
Dzięki stylom możemy mieć pełną kontrolę nad formatowaniem dokumentu. Do tej pory żadne z poleceń języka XHTML czy HTML nie pozwalało nam na regulowanie odstępów pomiędzy blokami oraz nakładanie ich na siebie. Warto wspomnieć o tym, że style umożliwiają kontrolę tła poszczególnych części dokumentu, właściwości czcionek zastosowanych na stronie, tabel, formularzy i wielu innych.
Kaskadowe arkusze stylów, w skrócie CSS, możemy określić jako narzędzie do formatowania wyglądu dokumentów. Natomiast za pomocą samych stylów nie możemy stworzyć strony. Podobnie jak język XHTML i HTML, kaskadowe arkusze stylów są standaryzowane przez W3 i tam należy szukać odpowiedniej specyfikacji.