Umieszczanie stylów w dokumencie


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.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *