Przejdź do treści

Centrum Kształcenia Zawodowego i Ustawicznego w Mrągowie

Importowanie arkuszy stylów

czwartek,

Importowanie arkuszy stylów

Jednym ze sposobów dołączania deklaracji CSS do strony internetowej jest import arkuszy stylów.

Dołączany arkusz

W dołączanym pliku zadeklarowano kolor tekstu w akapitach. Otrzymał on nazwę colors.css.

p {
  color: green;
}

Import z poziomu osadzonych stylów

Jedną z możliwości importowania arkusza stylów jest zastosowanie stylów osadzonych. Deklaracje z pliku colors.css interpretowane są tak, jakby zostały wpisane w tym miejscu.

<style>
  @import url(colors.css);
  p {font-family: sans-serif;}
</style>

Import z poziomu zewnętrznych stylów

Arkusz stylów może być zaimportowany z poziomu zewnętrznego pliku CSS dołączonego do dokumentu z pomocą znacznika link, jest realizowane podobnie, jak w przypadku stylów osadzonych. Przykładowa zawartość takiego pliku CSS:

@import url(colors.css);
p {
  font-family: sans-serif;
}

Ważne reguły

Importując arkusze stylów, należy znać kilka zasad:

  • można importować kilka plików, jednak trzeba wtedy dla każdego z nich podać osobną deklarację @import;
  • polecenia importu muszą się znajdować zaraz na początku arkusza stylów, przed innymi deklaracjami (wyjątkiem jest deklaracja @charset);
  • ścieżka do importowanego pliku powinna być napisana względem położenia arkusza CSS, w którym jest wstawione polecenie @import;
  • importowane reguły CSS mają taki sam priorytet ważności, jak arkusz z poleceniem importu;
  • w importowanym pliku można zamieszczać kolejne polecenia @import, tworząc w ten sposób kilka poziomów zagnieżdżeń, niektóre przeglądarki mogą mieć problem ze zbyt dużym zagłębieniem;
  • w przypadku importowania arkuszy przeglądarki mogą działać wolniej, ponieważ muszą przetworzyć bardziej złożoną strukturę.
Artykuł: Generał Roman Abraham

Generał Roman Abraham

Artykuł: Kazimierz Heilman-Rawicz

Kazimierz Heilman-Rawicz

Artykuł: Kopiowanie plików z pomocą SCP

Kopiowanie plików z pomocą SCP

Artykuł: Klient SFTP Filezilla

Klient SFTP Filezilla

Artykuł: Odwrócenie kolorów obrazu na&nbsp;wydruku

Odwrócenie kolorów obrazu na wydruku

Artykuł: Victor Hugo

Victor Hugo

Nasze technikum

Technik informatyk

Szkoły dla dorosłych

Nasza szkoła

Pełna oferta edukacyjna

Oferta szkoły