Import arkusza stylów @import

<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.

UWAGA!
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!

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!

Pliki arkuszy stylów mogą mieć negatywny wpływ na szybkość wczytywania strony. Jeśli chcesz się dowiedzieć, w jaki sposób zoptymalizować ładowanie arkuszy stylów, zobacz rozdział: HTML5 / Wstępne ładowanie.

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari	Poziom wsparcia min. 2,5 roku
@import	1 2008-12-11	1 2004-11-09	12 2015-07-29	3.5 1998-11-18	1 2003-06-23	100%