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