Kaskadowe arkusze stylów

Zanim zacznę opisywać składnię wyjaśnię nazwę i specyfikę kaskadowości stylów.

Kaskadowość

Wyobraźmy sobie, że tworzymy witrynę, której większość elementów będzie miała identyczne formatowanie i wygląd. Taka sama wielkość czcionki będzie na 10 z 11 stron, taki sam krój i takie same kolory. Opisywanie tego za każdym razem, to udręka. Z pomocą przychodzi tu zewnętrzny plik stylów dołączony lub zaimportowany dla wszystkich 10 stron.

Jedna ze stron będzie miała odrębny częściowo wygląd, a zatem dla tej strony dodatkowy kod css zostanie osadzony w sekcji <head>. Jeśli oprócz tego zaistnieje potrzeba zmiany czegokolwiek dla jednego tylko elementu na stronie można odpowiedni styl wpisać bezpośrednio przy znaczniku.

Mam nadzieję, że jest w tej chwili jasne, że najważniejszym jest kod opisujący wygląd danego znacznika znajdujący się najbliżej tego znacznika. Tak właśnie działa kaskadowość i jeśli jeszcze nie jest to jasne z pewnością po wykonaniu kilku przykładów stanie się oczywiste.

Osadzanie stylów na stronie

Style wewnętrzne:

  • lokalne,
  • zagnieżdżone.

Style zewnętrzne:

  • dołączone,
  • importowane.

Najbliższy znacznikowi jest styl lokalny, który dopisany jest bezpośrednio do znacznika:

[html]
<h3 style="color: red; font-size: 18px"> Czerwony nagłówek o rozmiarze czcionki 18px</h3>
[/html]

Kolejnym w kolejności jest styl zagnieżdżony znajdujący się w sekcji head:

[html]
<style type="text/css">
p{color: green;
font-size: 11px;}
</style>
[/html]

Dopiero w następnej kolejności zadziałają style zewnętrzne będące osobnymi plikamidołączone lub zaimportowane do dokumentu html.

[html]
<link href="nazwa_arkusza_stylow.css" rel="stylesheet" type="text/css" />
[/html]

Importować możemy z zewnętrznej strony lub z własnego serwera (lokalnie).

[html]
<style>
@import url("http://www.adres_strony.com.pl/nazwa_pliku.css");
@import url("nazwa_arkusza.css");
</style>
[/html]

Oczywiście wszelkie dołączanie czy importowanie arkuszy musi znajdować się w sekcji <head> </head>

 


Back to: HTML5 i CSS