Rozszerzenie podstawowych właściwości CSS

Kolory w CSS

W CSS możesz kontrolować kolory elementów na kilka sposobów: za pomocą nazw kolorów, kodów heksadecymalnych, wartości RGB i RGBA, a także wartości HSL.

Przykład:

Nazwy kolorów: CSS obsługuje nazwy wielu kolorów, takich jak red, blue, green, black, itp.
Kody heksadecymalne: Kolory można również określać za pomocą kodów heksadecymalnych, np. #FF0000 (czerwony), #0000FF (niebieski).
RGB: Format rgb() umożliwia podawanie kolorów za pomocą wartości RGB (Red, Green, Blue). Przykład: rgb(255, 0, 0) to czerwony.
RGBA: Jest to rozszerzenie RGB, które umożliwia dodanie przezroczystości. Czwarty parametr określa stopień przezroczystości w skali od 0 do 1, np. rgba(255, 0, 0, 0.5).
HSL: Format hsl() pozwala definiować kolor w przestrzeni barw opartej na odcieniu (hue), nasyceniu (saturation) i jasności (lightness), np. hsl(0, 100%, 50%) to czerwony.

p {
  color: #FF6347; /* Kolor heksadecymalny (pomidorowy) */
  background-color: rgb(240, 248, 255); /* RGB (kolor aliceblue) */
}

Tła w CSS

Możesz kontrolować tło elementu za pomocą właściwości background-color, background-image, background-repeat, background-position i background-size.

background-color: Ustawia kolor tła elementu.
background-image: Pozwala na dodanie obrazka jako tła.
background-repeat: Określa, czy obrazek tła ma się powtarzać. Możliwości to np. repeat (domyślnie), no-repeat (brak powtarzania), repeat-x (powtarzanie tylko w poziomie), repeat-y (powtarzanie tylko w pionie).
background-position: Określa pozycję obrazka tła, np. center, top, bottom, left, right, albo w pikselach lub procentach.
background-size: Ustawia rozmiar obrazka tła, np. cover (rozciąga obrazek na cały element) lub contain (dopasowuje obrazek w granicach elementu).

Przykład:

body {
  background-color: lightblue;
  background-image: url('background.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

Marginesy (margins) i odstępy wewnętrzne (padding)

CSS pozwala kontrolować odstępy między elementami i wewnątrz elementów za pomocą właściwości margin i padding.

margin: Ustawia zewnętrzne odstępy wokół elementu. Można ustawić oddzielnie dla każdej strony: margin-top, margin-right, margin-bottom, margin-left. Można także ustawić wszystkie cztery wartości naraz, np. margin: 10px 15px 20px 5px (kolejno: góra, prawa, dół, lewa).
padding: Ustawia wewnętrzne odstępy wewnątrz elementu. Zasada działa tak samo jak dla marginesów.

Przykład:

div {
  margin: 20px; /* Równe marginesy wokół elementu */
  padding: 15px 30px; /* Wewnętrzne odstępy (góra/dół: 15px, lewa/prawa: 30px) */
  background-color: lightgreen;
}

Obramowania (borders)

CSS pozwala dodać różnorodne obramowania do elementów przy użyciu właściwości border. Możesz kontrolować grubość, styl oraz kolor obramowania.

border-width: Określa grubość obramowania, np. 1px, 3px, itp.
border-style: Określa styl obramowania. Możliwe wartości to m.in. solid, dashed, dotted, double, itp.
border-color: Ustawia kolor obramowania.

Możesz ustawić wszystkie te wartości w jednym poleceniu, np. border: 2px solid red.

Przykład:

p {
  border: 2px dashed blue;
  padding: 10px;
}

Czcionki i tekst

Możesz kontrolować wygląd tekstu na stronie za pomocą właściwości związanych z czcionkami i wyrównaniem tekstu.

font-family: Ustawia rodzinę czcionek, np. Arial, Times New Roman. Możesz podać kilka czcionek na wypadek, gdyby przeglądarka nie obsługiwała pierwszej opcji, np. font-family: Arial, sans-serif;.
font-size: Ustawia rozmiar czcionki, np. 16px, 1.5em, 120%.
font-weight: Określa grubość czcionki, np. bold, normal, lighter, albo wartości liczbowe (np. 100 do 900).
line-height: Ustawia wysokość linii (interlinię), np. 1.5 dla 1.5-krotności rozmiaru czcionki.
text-align: Ustawia wyrównanie tekstu w poziomie, np. left, right, center, justify.

Przykład:

h1 {
  font-family: 'Arial', sans-serif;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
}
p {
  line-height: 1.6;
  text-align: justify;
}

Wyświetlanie elementów (display)

Właściwość display kontroluje sposób wyświetlania elementów. Najczęściej używane wartości to:

block – Elementy blokowe zajmują całą szerokość kontenera (np. <div>, <h1>, <p>).
inline – Elementy liniowe zajmują tyle miejsca, ile potrzebują, i układają się obok siebie (np. <span>, <a>).
inline-block – Łączy właściwości obu powyższych: element wygląda jak liniowy, ale można mu nadać wymiary.
none – Ukrywa element.

Przykład:

div {
  display: block;
}
span {
  display: inline-block;
  width: 100px;
  height: 50px;
  background-color: yellow;
}

Ćwiczenie – Stylizowanie strony

Teraz, po zapoznaniu się z podstawowymi właściwościami CSS, spróbujmy je zastosować na praktycznym przykładzie.

Zadanie: Zaktualizuj swoją stronę, dodając różne kolory, marginesy, obramowania i style czcionek.

<!DOCTYPE html>
<html>
<head>
  <title>Stylizowana strona</title>
  <style>
    body {
      background-color: #f0f8ff;
      font-family: Arial, sans-serif;
      margin: 20px;
    }
    h1 {
      color: #4682b4;
      text-align: center;
    }
    p {
      color: #696969;
      line-height: 1.6;
      margin-bottom: 20px;
    }
    img {
      border: 3px solid #4682b4;
      padding: 10px;
      margin: 20px 0;
    }
    div {
      padding: 20px;
      background-color: #ffffff;
      border: 2px solid #b0c4de;
      margin: 20px 0;
    }
  </style>
</head>
<body>
  <h1>Witaj na mojej stylizowanej stronie</h1>
  <p>To jest stylizowany akapit z marginesami, kolorem tekstu i linią odstępu.</p>
  <img src="https://example.com/obrazek.jpg" alt="Przykładowy obrazek">
  <div>
    <p>To jest blokowy element z wewnętrznymi odstępami, obramowaniem i tłem.</p>
  </div>
</body>
</html>

Przetestuj różne kombinacje wartości, aby zobaczyć, jak wpływają na wygląd strony.

Gratulacje! Ukończyłeś lekcję 5. Możesz teraz zacząć kurs dla zaawansowanych.
Przejdź teraz do lekcji 6 >> Semantyczne HTML5

Spis Treści - darmowy kurs HTML i CSS

Podstawy:
Wprowadzenie: Jak przygotować środowisko pracy
Lekcja 1: Podstawowe tagi HTML i struktura dokumentu
Lekcja 2: Formatowanie tekstu, linki i obrazki
Lekcja 3: Listy, tabele i formularze w HTML
Lekcja 4: Wprowadzenie do CSS
Lekcja 5: Rozszerzenie podstawowych właściwości CSS

Zaawansowane:
Lekcja 6: Semantyczne HTML5
Lekcja 7: Zaawansowane formularze w HTML5
Lekcja 8: Multimedia w HTML5
Lekcja 9: Flexbox – Elastyczny układ stron
Lekcja 10: CSS Grid Layout – Potężny system układów
Lekcja 11: CSS Animacje i przejścia (transitions)
Lekcja 12: Responsywność i Media Queries
Lekcja 13: CSS Variables (Custom Properties)

Dodatki:
- Spis tagów HTML
- Spis Właściwości CSS

Jeśli chciałbyś być poinformowany o następnych kursach to zapisz się do naszego newslettera:

Lekcja 5 – Rozszerzenie podstawowych właściwości CSS

Kolory w CSS

Tła w CSS

Marginesy (margins) i odstępy wewnętrzne (padding)

Obramowania (borders)

Czcionki i tekst

Wyświetlanie elementów (display)

Ćwiczenie – Stylizowanie strony

Spis Treści - darmowy kurs HTML i CSS