Ćwiczenie 13 Arkusze stylów

Języki służące do budowy stron WWW zostały uzupełnione o potężne narzędzie do formatowania dokumentów internetowych - style (CSS - Cascading Style Sheets). Umiejętne stosowanie stylów pozwala całkowicie odmienić wygląd strony, nie szkodząc zarazem przeglądarkom, które stylów nie interpretują. Styl, będący zespołem kodów formatujących (jednego czy kilku), pozwala obecnie globalnie lub lokalnie zmieniać sposób formatowania wybranego fragmentu dokumentu. Style są obecnie w znacznej mierze interpretowane przez przeglądarki: Netscape Communicator 4.x i 6, Internet Explorer 4 i 5 oraz Opera 5. Dzięki nim będzie można stopniowo rezygnować z formatowania bezpośrednio za pomocą HTML, przerzucając odpowiedzialność na style. W ten sposób HTML pozostanie w swej czystej postaci i nie będzie już ryzyka niekontrolowanego rozbudowywania zestawu znaczników.

Budowa stylu

Wstawianie stylów

Style mogą być umieszczane w dokumencie na kilka sposobów:

• Kody formatujące są umieszczane w środku tekstu (styl lokalny, in-line style) i dotyczą wybranego znacznika dokumentu.
• Kody formatujące są umieszczane w środku tekstu, obejmują większy fragment dokumentu i nie są związane z wybranymi znacznikami (rozciąganie stylu i wydzielone bloki).
• Kody formatujące są umieszczane na początku strony, w nagłówku HEAD, i oddziałują na cały dokument (zagnieżdżanie stylu).
• Kody formatujące są umieszczane na wzorcowych stronach (lokalnie lub na serwerze), a w dokumentach wstawiamy odpowiednie odwołania do tych stron, co powoduje automatyczne zmiany sposobu formatowania. Są to odwołania do tzw. stylów zewnętrznych.
• Kody formatujące są importowane z innej strony za pomocą polecenia @import.

Dołączanie do zewnętrznego arkusza stylów

Każdą stronę można dołączyć do zewnętrznego arkusza stylów, w którym są zdefiniowane własności różnych elementów - interpretują to polecenie Internet Explorer 4 i 5, Netscape 6 i Opera 5.

Zaprezentowana strona została połączona z zewnętrznym arkuszem - arkusz_1.css (rozszerzenie .css), umieszczonym w innym folderze co strona html. Budowa arkusza, na której oparto stronę wygląda następująco:

<STYLE TYPE="text/css">
<!--
BODY {
       margin-top: 10pt;
       margin-bottom: 10pt;
       margin-left: 10pt;
       margin-right: 10pt;
       font-family: Tahoma, "Arial CE", Arial;
       background-color: #F5F5DC;
       cursor: crosshair;
}
H1 {
       font-family: Verdana;
       font-weight: normal;
       font-style: italic;
       font-size: 40pt;
       color: #FFFFFF;
       background: #CC9933
}
H2 {
       font-family: Verdana;
       font-weight: normal;
       font-style: normal;
       font-size: 20pt;
       color: #996600;
}
P {
       font-family: Verdana;
       font-weight: normal;
       font-style: normal;
       font-size: 10pt;
       color: #000000;
       text-indent: 10pt;
       text-align: justify;
}
-->
</STYLE>

Zwróćmy uwagę na wiersz (pogrubiony) zawierający odniesienie do arkusza. Jest on umieszczany w ramach części nagłówkowej (HEAD) i ma ściśle określoną składnię. HREF wskazuje ścieżkę do katalogu, w którym jest umieszczony arkusz. Może on być oczywiście ulokowany w tym samym folderze, co strony zawierające odniesienie do niego. Wszystkie definicje zewnętrznego arkusza stylów są automatycznie przyjmowane przez elementy danej strony.
Stosowanie zewnętrznego arkusza ma tę zaletę, że nie jest konieczne wprowadzanie stylów na konkretnej stronie, zmniejszamy objętość plików, a także możemy za pomocą zmiany jednego parametru w arkuszu stylów zmienić wygląd wszystkich stron, które się odwołują do tego arkusza (np. kolor tytułu czy wielkość czcionki akapitów).

W zaprezentowanym przykładzie, dla znaczników BODY, H1, H2 i P wartości zostały zdefiniowane za pomocą arkusza stylów. Chcąc zatem zmienić wygląd strony możemy dołączyć nowy arkusz lub zmodyfikować istniejący.

Zmieniając w arkuszu, wartości opisujące kolor czcionki (color:) i kolor tła (background-color:) możemy "przebudować" jej szatę graficzną.
Na potrzeby niniejszej lekcji zostały utworzone dwa pliki html, które różnią się jedynie wierszem opisującym dostęp do arkusza. Nic nie stoi na przeszkodzie, aby utworzyć kilka arkuszy i w zależności od potrzeby wprowadzić na stronie html (w części nagłówkowej) odwołanie do tego, który jest potrzebny.

Cechy selektora

• własności czcionek
• własności tekstu
• kolor i tło
• marginesy zewnętrzne
• kursory

Wykorzystując edytor spróbuj samodzielnie stworzyć prosty arkusz i dołącz go do dowolnego pliku html. Pamiętaj aby zapisując arkusz nadać mu rozszerzenie css.

Jeżeli dotarłeś do tego miejsca, to serdecznie Ci gratuluję!

ebiznes.bitdom.com

autor