DHTML0037

Podstawy CSS

Mieszanie i dopasowywanie plików

Aby otrzymać dokładnie taki układ strony jakiego potrzebujesz możesz mieszać i dopasowywać pliki CSS pochodzące z różnych źródeł i wykorzystywać je w jednym dokumencie HTML. Dla przykładu, poszczególne części witryny możesz oznaczyć różnymi kolorami.

W tym celu możesz użyć jednego głównego pliku CSS określającego ogólny wygląd całej witryny, a następnie zastosować osobne pliki CSS definiujące kolory poszczególnych jej części.

S Rady

■    Choć nazwa zewnętrznego pliku CSS może mieć całkowicie dowolną postać, to jednak dobrym pomysłem jest nadanie nazwy, która przypomni Ci przeznaczenie stylów umieszczonych w danym pliku. Dla przykładu, „nawigacja.css” będzie zapewne znacznie lepszą nazwą niż „Listing-1-7.css”.

■    Pliki CSS nie muszą posiadać rozszerzenia „.css”. Równie dobrze moglibyśmy nadać plikowi nazwę „nazwapliku”, a i tak by działał. Jednak dodanie rozszerzenia może uchronić nas przed zamieszaniem.

■    Plik CSS nie powinien zawierać żadnych znaczników HTML, ani niczego innego prócz komentarzy oraz dołączonych arkuszy stylów. (Patrz „Importowanie zewnętrznych plików CSS”, strona 31.)

Stosowanie

zewnętrznych plików CSS

Główną korzyścią ze stosowania CSS jest możliwość stworzenia arkusza stylów, który będzie stosowany nie w jednym dokumencie HTML-owym, lecz w całej witrynie. Takie zewnętrzne pliki CSS mogą być zastosowane w setkach różnych dokumentów HTML-owych, bez konieczności wielokrotnego podawania tych samych danych.

Wykorzystywanie zewnętrznego pliku CSS jest procesem dwuetapowym. Pierwszym etapem jest podanie reguł w pliku tekstowym, a drugim dołączenie lub zaimportowanie tego pliku do dokumentu HTML-owego.

Stosowanie zewnętrznego pliku CSS

1.    Przy pomocy edytora lub dowolnego innego programu stwórz nowy plik tekstowy. Na przykład możesz użyć programu Notepad.

2.    H1, H2 {font: bold 18pt/18pt; helvetica,sans-serif;}

H1 {color: blue;}

#warstwa1 {position:relative;}

Podaj swoje reguły CSS; mogą to być reguły poniższych typów:

•    selektory HTML-owe,

•    selektory klas,

•    selektory identyfikatorów,

•    grupy selektorów,

•    grupy selektorów kontekstowych,

•    zaimportowany plik CSS.

3.    Zapisz plik tekstowy pod nazwą nazwapliku. css, gdzie nazwapliku jest dowolną nazwą, jaką chcesz nadać plikowi, a .css rozszerzeniem określającym

jego typ.

4.    Jak zostało pokazane na kolejnych kilku stronach, aby zewnętrzne pliki CSS mogły oddziaływać na znaczniki w dokumencie HTML-owym, musisz bądź to dołączyć plik CSS do dokumentu HTML-owego, bądź też zaimportować plik CSS.

Stosowanie zewnętrznych plików CSS

37