Lekcja: Składnia Kaskadowych Arkuszy Stylów (CSS)

Cel lekcji:
Zrozumienie podstawowej składni CSS oraz umiejętność stosowania reguł stylów w dokumentach HTML.

Wprowadzenie do składni CSS

CSS (Cascading Style Sheets) pozwala na definiowanie wyglądu elementów HTML. Stylowanie odbywa się za pomocą reguł CSS, które składają się z:

1. Selektora: Określa, które elementy HTML mają być stylizowane.

   • Przykłady selektorów: tagi HTML (p, h1), klasy (.class), identyfikatory (#id).

2. Deklaracji: Określa właściwości wyglądu elementu i ich wartości.

   • Deklaracje są zawarte w nawiasach klamrowych {}.
   • Każda deklaracja składa się z pary właściwość: wartość;.

3. Bloku reguł: Kompletna reguła CSS (selektor + deklaracja).

   • Przykład:

     p {
       color: blue;
       font-size: 16px;
     }
     

Podstawowe właściwości CSS

1. Kolory:

   • Właściwość: color (kolor tekstu), background-color (kolor tła).
   • Przykłady:

     color: red;  
     background-color: #f0f0f0;
     

2. Tekst:

   • font-size (rozmiar czcionki), font-family (rodzina czcionek), text-align (wyrównanie), text-decoration (dekoracja, np. podkreślenie).

3. Marginesy i odstępy:

   • margin (zewnętrzne odstępy), padding (wewnętrzne odstępy).

4. Obramowania:

   • border (krawędzie elementów), border-radius (zaokrąglenie rogów).

5. Szerokość i wysokość:

   • width, height.

6. Tło:

   • background-image, background-repeat, background-size.

Rodzaje selektorów w CSS

1. Selektory elementów HTML:

   • Stylizują wszystkie elementy danego typu.

     h1 {
       color: navy;
     }
     

2. Selektory klas:

   • Stylizują elementy oznaczone klasą.

     .example {
       background-color: yellow;
     }
     

3. Selektory identyfikatorów:

   • Stylizują element z określonym identyfikatorem (ID).

     #unique {
       font-size: 24px;
     }
     

4. Selektory złożone:

   • Łączą różne selektory, np. wybierają elementy wewnątrz innych elementów.

     div p {
       color: gray;
     }
     

Ćwiczenia

Ćwiczenie 1: Kolory i tło

Stwórz stronę HTML, na której:

• Wszystkie nagłówki <h1> mają kolor niebieski.
• Paragrafy <p> mają kolor tekstu zielony i tło w odcieniu jasnoszarym.
• Obraz w tle pokrywa całą stronę.

Ćwiczenie 2: Formatowanie tekstu

• Ustaw dla elementów <p>:
  • Czcionkę Arial.
  • Rozmiar 18px.
  • Wyrównanie do środka.
  • Tekst podkreślony.
• Wyróżnij element <span> wewnątrz paragrafów, zmieniając jego kolor na czerwony.

Ćwiczenie 3: Marginesy, odstępy i obramowania

• Utwórz kartę z tekstem (np. „Witaj na mojej stronie”) w <div>.
• Ustaw:
  • Obramowanie o grubości 2px, kolorze czarnym i stylu przerywanym.
  • Zaokrąglenie rogów obramowania na 15px.
  • Wewnętrzny odstęp (padding) 20px.
  • Zewnętrzny odstęp (margin) 30px.

Ćwiczenie 4: Selektory klas i identyfikatorów

• Na stronie umieść trzy różne paragrafy i przypisz im klasy (.red, .blue, .green).
• Każda klasa powinna zmieniać kolor tekstu i rozmiar czcionki.
• Jeden z paragrafów powinien mieć dodatkowo ID highlight, który nada mu tło w kolorze żółtym.

Ćwiczenie 5: Responsywny obraz

• Wstaw obraz na stronę i ustaw jego szerokość na 100%, aby dopasowywał się do szerokości ekranu.
• Dodaj drugi obraz z właściwością max-width: 500px, aby nie przekraczał tej szerokości na dużych ekranach.

Ćwiczenie 6: Kombinacje selektorów

• Stwórz listę <ul> z trzema elementami <li>.
• Zastosuj różne style dla:
  • Wszystkich elementów <li> wewnątrz listy.
  • Tylko pierwszego elementu <li> (użyj selektora :first-child).
  • Wszystkich elementów <li> poza ostatnim (użyj selektora :not(:last-child)).

Podsumowanie

CSS pozwala na znaczną kontrolę nad wyglądem strony internetowej, umożliwiając stosowanie kolorów, stylów tekstu, marginesów i innych właściwości. Znajomość podstawowej składni i sposobu użycia selektorów to klucz do dalszej nauki stylowania w CSS.