Teoria
Teoria

Podłączanie stylów zewnętrznych

Najczęściej style są podłączane z zewnętrznego pliku z rozszerzeniem .css. W tym celu stosuje się znacznik <link>. Na przykład:

<head>
  <link href="external.css" rel="stylesheet">
</head>

Atrybut href ustawia adres pliku, a atrybut rel="stylesheet" informuje przeglądarkę, że podłączamy style, a nie coś innego.

Lepiej jest umieszczać style wewnątrz <head>, ale nie jest to konieczne. Znacznik <link> będzie działał w innym miejscu strony.

W tym zadaniu podłączysz zewnętrzny plik stylu, który znajduje się pod adresem external.css(kliknij link, aby otworzyć ten plik w przeglądarce).

index.html

HTML

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Podłączanie stylów zewnętrznych</title>  </head> <body> <h1>Style zewnętrzne</h1> <p>Style zewnętrzne są znacznie wygodniejsze niż style wbudowane, ponieważ można podłączyć ten sam plik stylu do wielu stron.</p> <p>Jeśli zajdzie potrzeba wprowadzenia zmian w stylach, wystarczy zmienić jeden plik, a zmiany pojawią się na wszystkich stronach, do których jest on podłączony.</p> <p>W tym przypadku konieczne będzie manipulowanie wbudowanymi stylami.</p> </body> </html>

ObiettiviFatto

Podłącz zewnętrzny plik stylu do strony. Aby to zrobić:

Dodaj znacznik <link> wewnątrz <head>,
nadać mu atrybut rel z wartością stylesheet
i atrybut href z wartością external.css.