Ważną zaletą stylów jest to, że niezwykle ułatwiaja i przyspieszają pracę. Gdy chcemy zmienić wygląd wybranych elementów strony bądź całego serwisu wystarczy wykonać odpowiednie zmiany w arkuszu stylów, a efekt będzie widoczny od razu we wszystkich elementach oznaczonych tym stylem. Jakakolwiek zmiana wyglądu dokumentów formatowanych bezpośrednio poprzez znaczniki HTML wymagała dokonania poprawek na każdej stronie, w każdym elemencie z osobna.

Kolejna zaleta arkuszy css to możliwość oddzielenia układu strony od właściwości jej elementów. Za pomocą języka HTML tworzy się tylko strukturę dokumentu, a korzystając ze stylów odpowiednio się go formatuje, ustawia się np. kolor czcionki, tło, wielkość liter itp. W ten sposób nasz dokument staje się bardziej przejrzysty.

Gdy znamy zalety arkszy stylów musimy dowiedzieć się w jaki sposób dołączyć je do dokumentu HTML. Jak sie okazuje style mogą być umieszczane w dokumencie na kilka sposobów:

1.
Style CSS można dołączyć z zewnętrznego pliku (*.css), a w dokumentach w sekcji <HEAD> wstawić odpowiednie odwołania do tego pliku. Są to odwołania do tzw. stylów zewnętrznych:

W tym przypadku należy utworzyć odrębny plik o nazwie *.css, np. style.css lub mojstyl.css, plik ten powinien zawierać definicje stylów dla wszystkich elementów strony www, które chcemy odpowiednio sformatować.

Ten sposób dołączania stylów jest bardzo wygodny, ponieważ tworzy się tylko jeden plik ze stylami. W tym pliku można trzymać definicje stylów nawet dla dużych serwisów internetowych, składających się z wielu stron.

UWAGA!
Szablony z Szablonowni zawierają załączony zewnętrzny arkusz stylów o nazwie styl.css lub style.css, należy pamiętać aby umieścić go na serwerze WWW, ponieważ tylko razem z tym plikiem każdy szablon będzie wyglądał poprawnie!

2.
Definicję stylu umieszczamy na początku strony w sekcji nagłówkowej, czyli pomiędzy znacznikami <HEAD> i </HEAD> , definiuje ona na cały dokument i wygląda na przykład tak:

<HEAD>
<STYLE TYPE="text/css">

</STYLE>
</HEAD>

Gdy kilka stron jest formatowanych za pomocą tego samego zestawu stylów, lepiej stosować zewnętrzne arkusze stylów, co ułatwia dokonywanie zmian i zmniejsza wielkość plików.

3.
Definicje stylu są umieszczane w środku tekstu i dotyczą wyłącznie wybranego znacznika lub fragmentu dokumentu, na przykład w poniższy sposób można zdefiniować wielkość i krój czcionki dla konkretnego paragrafu:

<P style="font-size: 10pt; font-family: Arial, Verdana, Helvetica">
Treść akapitu
</P>

4.
Definicje stylów są importowane z innej strony za pomocą polecenia @import. Import jest definiowany za pomocą następującego polecenia, umieszczanego w ramach sekcji HEAD:

Style można tworzyć ręcznie, gdyż jest to zwykły tekst. Można też posługiwać się narzędziami, które ułatwiają i przyspieszają ich tworzenie. Niektóre edytory HTML zawierają kreatory stylów pozwalające definiować wygląd wybranych elementów strony www. Taki kreator ma np. program Pajączek.

Istnieją również odrębne edytory arkuszy stylów, dla przykładu:

TopStyle Pro - polecany jako jeden z lepszych, shareware oraz TopStyle Lite (darmowy)
http://www.bradsoft.com/

EasyStyle v2.0 - darmowy
http://www.easyasp.org/

Astyle CSS editor 2.04 - shareware
http://www.athlab.com/

Style Master 3.5 - shareware
http://www.westciv.com/style_master/index.html

Style są obecnie w większości interpretowane przez przeglądarki Internet Explorer, Netscape oraz Opera. Zaleca się jednak ostrożność i sprawdzanie wyglądu stron ze stylami w różnych przeglądarkach, gdyż interpretacje bywają niekiedy odmienne i strona może być różnie, nie zawsze poprawnie wyświetlana w którejś z nich.

Kaskadowość stylów polega na tym, że istnieje ściśle określony porządek, w jakim są wykorzystywane reguły zdefiniowane w poszczególnych arkuszach. Najogólniej można powiedzieć, że właściwości zdefiniowane w arkuszu późniejszym mają wyższy priorytet, niż właściwości zdefiniowane w arkuszach wcześniejszych. W pierwszej kolejności wygląd strony jest modyfikowany zgodnie z regułami podanymi w zewnętrznych arkuszach stylów. W drugiej kolejności zostają zastosowane definicje stylów zapisane w osadzonych arkuszach stylów, które, w razie konieczności, zastępują definicje stylów opisane w zewnętrznych arkuszach stylów. Na końcu są stosowane style lokalne.

Więcej o stylach na stronach:
http://www.w3.org/Style/CSS/
ABC kaskadowych arkuszy stylów (CSS)
CSS. Kaskadowe arkusze stylów. Przewodnik encyklopedyczny
Po prostu DHTML i CSS
Projektowanie serwisów WWW. Standardy sieciowe


	© 2003-2008 by Szablonownia