Przejdź do treści

Centrum Kształcenia Zawodowego i Ustawicznego w Mrągowie

Zewnętrzne arkusze stylów

środa,

Zewnętrzne arkusze stylów

Deklaracje stylów CSS można dołączyć do dokumentu w postaci zewnętrznego pliku. Standardowo plik stylów ma rozszerzenie css. W zewnętrznym arkuszu stylów nie należy zamieszczać żadnych znaczników HTML.

Przykładowy plik stylów.

h1, p {
  font-family: sans-serif; color: black;
}

h1 {
  color: red;
}

Zewnętrzny plik stylów CSS można dołączyć za pomocą znacznika <link>. W tym przypadku musi on zawierać dwa atrybuty, rel (relation, powiązanie) wskazuje, w jaki sposób plik zewnętrzny wiąże się ze stroną, href to ścieżka dostępu do pliku. W przypadku stylów CSS atrybut rel zawsze ma wartość stylesheet. W starszych wersjach języka HTML znacznik <link> dołączający plik z deklaracjami stylów CSS obowiązkowo wymagał atrybutu type o wartości text/css, w HTML 5 nie ma już takiej potrzeby. Może być on umieszczony w dowolnym miejscu sekcji <head> lub <body>.

Przykładowa strona HTML z dołączonym arkuszem stylów.

<!DOCTYPE html>
<html lang="pl">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Style zewnętrzne</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<h1>Zewnętrzne style CSS</h1>
	<p>Deklaracje stylów CSS można dołączyć do dokumentu w postaci zewnętrznego pliku.</p>
	<p>W zewnętrznym arkuszu stylów nie należy zamieszczać żadnych znaczników HTML.</p>
</body>
</html>

Zewnętrzny arkusz stylów CSS to najlepsze rozwiązanie w przypadku witryn składających się z wielu stron. Wszystkie deklaracje znajdują się w jednym miejscu i w razie modyfikacji nie ma potrzeby dokonywania zmian w każdym pliku HTML z osobna. Niektórzy autorzy stron dołączają do swoich stron wiele arkuszy stylów w postaci kilku, a nawet kilkunastu i więcej plików css. Pozwala to zachować modularność kodu CSS, np. odrębny plik to ogólne style wszystkich stron, kolejny to reguły wykorzystane w galerii zdjęć itd.

Artykuł: IBM Personal Computer XT

IBM Personal Computer XT

Artykuł: Jan Rodowicz „Anoda”

Jan Rodowicz „Anoda”

Artykuł: Marian Bernaciak

Marian Bernaciak

Artykuł: Stanisław Brzezina

Stanisław Brzezina

Artykuł: Michał Issajewicz „Miś”

Michał Issajewicz „Miś”

Artykuł: Cyryl Ratajski

Cyryl Ratajski

Nasze technikum

Technik informatyk

Szkoły dla dorosłych

Nasza szkoła

Pełna oferta edukacyjna

Oferta szkoły