Właściwości CSS

Lekcja: Właściwości CSS

Wprowadzenie

CSS (Cascading Style Sheets) pozwala na definiowanie stylów elementów HTML. Dzięki CSS możesz kontrolować wygląd strony internetowej, w tym kolory, rozmiary, układ, czcionki i wiele więcej. W tej lekcji skupimy się na podstawowych właściwościach CSS, ilustrując ich zastosowanie przykładami i ćwiczeniami.

1. Struktura reguły CSS

Każda reguła CSS składa się z:

  • Selektora: Wskazuje, do jakich elementów HTML reguła ma być zastosowana.
  • Deklaracji: Określa stylowanie; składa się z właściwości i wartości.

Przykład:

p {
  color: blue; /* Właściwość: kolor tekstu */
  font-size: 16px; /* Właściwość: rozmiar czcionki */
}

2. Wybrane właściwości CSS

a) Tekst i czcionki

  • color: Ustawia kolor tekstu.
  • font-size: Ustawia rozmiar czcionki.
  • font-family: Określa rodzinę czcionek.
  • text-align: Ustawia wyrównanie tekstu (left, right, center, justify).
  • text-transform: Zmienia wielkość liter (uppercase, lowercase, capitalize).

Przykład:

h1 {
  color: darkgreen;
  text-align: center;
  text-transform: uppercase;
}

b) Kolory i tła

  • background-color: Ustawia kolor tła elementu.
  • background-image: Dodaje obraz jako tło.
  • opacity: Określa przezroczystość (wartość od 0 do 1).

Przykład:

div {
  background-color: lightblue;
  opacity: 0.8;
}

c) Marginesy i odstępy

  • margin: Zewnętrzny odstęp wokół elementu.
  • padding: Wewnętrzny odstęp wewnątrz elementu.
  • border: Dodaje obramowanie.

Przykład:

p {
  margin: 20px;
  padding: 10px;
  border: 2px solid black;
}

d) Rozmiary i układ

  • width, height: Ustawiają szerokość i wysokość elementu.
  • display: Kontroluje sposób wyświetlania elementów (block, inline, flex, none).
  • position: Określa położenie elementu (static, relative, absolute, fixed).

Przykład:

div {
  width: 300px;
  height: 200px;
  position: relative;
}

e) Właściwości zaawansowane

  • box-shadow: Dodaje cień do elementu.
  • transition: Definiuje animacje przejścia między stanami.

Przykład:

button {
  background-color: lightgreen;
  transition: background-color 0.3s;
}

button:hover {
  background-color: green;
}

3. Ćwiczenia

Ćwiczenie 1

Utwórz regułę CSS, która ustawi kolor tekstu wszystkich paragrafów na niebieski i wyrówna je do środka.

Ćwiczenie 2

Zastosuj tło o kolorze #f0f0f0 do elementu div oraz ustaw marginesy wewnętrzne na 20px.

Ćwiczenie 3

Dodaj styl do nagłówka h1, który:

  • Ustawi czcionkę na Arial,
  • Rozmiar na 32px,
  • Kolor tekstu na czerwony.

Ćwiczenie 4

Zdefiniuj obramowanie o grubości 4px, rodzaju dashed i kolorze czarnym dla elementów section.

Ćwiczenie 5

Stwórz animację przy pomocy transition, która zmienia kolor tła przycisku na żółty, gdy użytkownik najeżdża na niego kursorem.

Ćwiczenie 6

Ustaw właściwość box-shadow na element div tak, aby cień był rozmyty na 10px i miał kolor szary.

Ćwiczenie 7

Dodaj styl do elementu p, który ustawi odstęp między wierszami tekstu na 1.5 oraz zmieni wielkość liter na wersaliki (wszystkie duże litery).

Ćwiczenie 8

Dla strony z treścią ustaw:

  • Szerokość głównego kontenera na 800px,
  • Centrowanie kontenera w poziomie za pomocą marginesów,
  • Tło w odcieniu jasnozielonym.

Podsumowanie

Właściwości CSS pozwalają w pełni kontrolować wygląd i układ elementów na stronie. Warto regularnie eksperymentować z różnymi właściwościami i wartościami, aby lepiej zrozumieć ich działanie. Aby stać się ekspertem, pracuj nad stylizowaniem rzeczywistych projektów i testuj nowe funkcje CSS w praktyce.