Dołączanie stylów do dokumentu

Lekcja: Dołączanie stylów do dokumentu HTML

Cel lekcji:
Poznanie sposobów dołączania stylów CSS do dokumentu HTML w celu zmiany wyglądu i organizacji elementów na stronie.

Wprowadzenie do stylów CSS

CSS (Cascading Style Sheets) to język służący do opisywania wyglądu i formatowania dokumentów HTML. Dzięki CSS możemy oddzielić treść (HTML) od prezentacji (CSS), co pozwala na łatwiejsze zarządzanie wyglądem strony i umożliwia ponowne wykorzystanie stylów na różnych stronach.

Sposoby dołączania stylów do dokumentu HTML

  1. Style inline (wewnętrzne w elementach HTML):

    • Styl jest dodawany bezpośrednio w znaczniku HTML przy użyciu atrybutu style.
    • Używane do szybkich, jednorazowych zmian wyglądu.
    • Przykład: 
      <p style="color: red; font-size: 16px;">Ten tekst jest czerwony i ma rozmiar 16px.</p>

  2. Style osadzone (wewnętrzne w dokumencie):

    • Styl jest definiowany w sekcji <head> za pomocą znacznika <style>.
    • Używane, gdy chcemy zdefiniować style dla pojedynczej strony.
    • Przykład: 
      <style>
  body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
  }
  h1 {
    color: navy;
    text-align: center;
  }
</style>

  3. Style zewnętrzne (pliki CSS):

    • Styl jest zapisany w oddzielnym pliku z rozszerzeniem .css, który jest dołączany do dokumentu HTML za pomocą znacznika <link>.
    • Używane w dużych projektach, aby oddzielić treść od stylów i umożliwić wielokrotne użycie stylów na różnych stronach.
    • Przykład dołączenia: 
      <link rel="stylesheet" href="styles.css">

  4. Style importowane:

    • Styl z pliku CSS może być zaimportowany do innego pliku CSS lub sekcji <style> za pomocą dyrektywy @import.
    • Używane w bardziej zaawansowanych projektach, gdy chcemy połączyć różne zestawy stylów.
    • Przykład: 
      @import url('styles.css');

Kaskadowość i priorytety w CSS

Jeśli różne style są stosowane do tego samego elementu, przeglądarka decyduje, które zastosować, w następującej kolejności:

  1. Style inline mają najwyższy priorytet.
  2. Następnie style osadzone w <style>.
  3. Na końcu style zewnętrzne z plików CSS.
  4. Reguły później zdefiniowane w kodzie mają wyższy priorytet niż wcześniejsze (jeśli dotyczą tego samego elementu).

Ćwiczenia

Ćwiczenie 1: Style inline

  • Stwórz dokument HTML z kilkoma paragrafami tekstu. Dodaj różne kolory i rozmiary tekstu za pomocą stylów inline w atrybucie style.

Ćwiczenie 2: Style osadzone

  • Stwórz stronę HTML, na której użyjesz stylów osadzonych w <head>, aby zmienić kolor tła, wyróżnić nagłówki i ustawić marginesy dla sekcji.

Ćwiczenie 3: Style zewnętrzne

  • Utwórz plik HTML i osobny plik CSS. Połącz je za pomocą znacznika <link>. W pliku CSS zdefiniuj styl dla nagłówków, paragrafów i obrazków.

Ćwiczenie 4: Eksperyment z priorytetami

  • W jednym dokumencie HTML zastosuj styl inline, osadzony oraz zewnętrzny dla tego samego elementu (np. nagłówka). Sprawdź, który styl zostanie zastosowany.

Podsumowanie:
Dzięki znajomości różnych sposobów dołączania stylów do dokumentów HTML uczniowie będą mogli lepiej zarządzać wyglądem swoich stron. Oddzielenie treści od stylów to klucz do tworzenia przejrzystych i łatwych do utrzymania projektów.