Przejdź do treści

Wstawianie stylów - CSS

Import arkusza stylów @import

Jak zaimportować arkusz stylów z zewnętrznego dokumentu?

<style>
@import url(adres zewnętrznego arkusza stylów);
</style>

Polecenie można wstawić zarówno w wewnętrznym jak i zewnętrznym arkuszu stylów. Pozwala wczytać zewnętrzny arkusz stylów, przy czym może się on znajdować na tym samym serwerze (wtedy można podać względną ścieżkę dostępu) lub w dowolnym miejscu w obrębie całego Internetu (wtedy podajemy adres internetowy). Po wczytaniu, zostanie on automatycznie dołączony do strony.

Oprócz importu arkusza, możesz umieścić pomiędzy znacznikami <style> a </style> dodatkowo własne reguły stylów, a nawet polecenie importu drugiego arkusza (ich działania zostaną połączone, a w przypadku konfliktów pierwszeństwo będzie miała ostatnia w kolejności deklaracja importu).

Import arkusza stylów działa bardzo podobnie jak dołączenie zewnętrznego arkusza - w obu przypadkach reguły CSS są zapisane w osobnym pliku *.css. Różnica w działaniu jest subtelna, ale ważna. Mianowicie importowany arkusz stylów ma taki sam priorytet kaskadowości (ważności), jak arkusz do którego został zaimportowany. Innymi słowy, jeśli chcemy, aby określony arkusz CSS był ważniejszy od wszystkich pozostałych zewnętrznych arkuszy, możemy go dołączyć poniżej innych odwołań do arkuszy lub zaimportować w wewnętrznym arkuszu. Import arkuszy może również być przydatny, jeśli chcemy oszczędzić wstawiania dodatkowych znaczników <link rel="Stylesheet">. W takim przypadku dołącza się tylko jeden zewnętrzny plik *.css, a w nim importuje pozostałe arkusze.

Jeżeli polecenie importu znajduje się w zewnętrznym arkuszu stylów, to relatywną ścieżkę dostępu do arkusza importowanego należy konstruować względem położenia arkusza CSS, w którym jest wstawione polecenie @import, a nie względem dokumentu HTML!

UWAGA!
Wszystkie polecenia importu (może ich być kilka) muszą się znajdować zaraz na początku arkusza stylów, tzn. przed właściwymi regułami CSS, znajdującymi się w arkuszu, do którego następuje import!

W MSIE 8.0 i starszych można zagnieżdżać importowane arkusze CSS tylko do trzeciego poziomu, tzn. importowany na najwyższym poziomie arkusz może sam zaimportować nowy plik CSS, a ten z kolei jeszcze tylko jeden dodatkowy - deklaracje z następnych zagnieżdżonych plików zostaną pominięte!

Komentarze

Zobacz więcej komentarzy

Facebook