CSS

Przewodnik po Układach CSS

Opanuj kluczowe właściwości układu CSS

Zrozumienie, jak elementy układają się na stronie, pływają, pozycjonują się i manipulują treścią, to fundament tworzenia nowoczesnych interfejsów. Przetestuj każdą właściwość na żywo!

Struktura

1. Właściwość display

Określa wewnętrzny i zewnętrzny typ wyświetlania elementu, decydując czy zachowuje się jak blok, element w linii, czy układa się flex/gridem.

Popularne wartości:

  • block: Zajmuje całą szerokość, nowy wiersz.
  • inline: Zajmuje tyle miejsca, co zawartość, w linii.
  • inline-block: W linii, ale przyjmuje szerokość/wysokość.
  • flex / grid: Zaawansowane układy elastyczne/siatkowe.
  • none: Całkowicie ukrywa element.
Live Sandbox display: block;
Oto tekst początkowy akapitu. Testowy Element Tekst końcowy akapitu, który pokazuje jak zachowuje się element otaczający.
Układanie

2. Właściwość float

Sprawia, że element "wypływa" do lewej lub prawej strony swojego kontenera, pozwalając innym elementom (np. tekstowi) go obiegać.

Możliwe wartości:

  • none: Domyślnie, brak pływania.
  • left: Pływa do lewej krawędzi.
  • right: Pływa do prawej krawędzi.
Obleganie tekstu float: none;
Box

Ten tekst pokazuje, jak zachowuje się treść otaczająca element z ustawioną właściwością float. Gdy float ma wartość left lub right, blok wysuwa się z normalnego nurtu dokumentu, a linie tekstu naturalnie go opływają z odpowiedniej strony. Pamiętaj, aby kontrolować ten proces za pomocą właściwości clear.

Kontrola

3. Właściwość clear

Określa, czy element może znajdować się obok pływających elementów (float), czy musi zostać przesunięty pod nimi.

Możliwe wartości:

  • none: Domyślnie, pozwala na elementy pływające po obu stronach.
  • left: Brak pływających elementów po lewej stronie.
  • right: Brak pływających elementów po prawej stronie.
  • both: Przenosi element pod wszystkie pływające (lewe i prawe).
Działanie Clear clear: none;
Float Left
Float Right

Powyżej mamy dwa elementy ustawione na float (lewy i prawy). Poniższy blok reaguje na właściwość clear:

Ten element ma przypisany clear: none. Zwróć uwagę, jak wchodzi pod elementy pływające lub chowa się obok nich.
Generowanie

4. Właściwość content

Używana w pseudoklasach ::before i ::after do wstawiania wygenerowanej treści (tekstu, ikon, znaczników) przez CSS.

Zastosowania:

  • Dodawanie ozdobnych cytatów, gwiazdek czy etykiet.
  • Wstawianie ikon Unicode lub SVG w tle.
  • Czyszczenie floatów (tzw. clearfix).
Live Sandbox (::before) content: '★ ';
Element z generowaną treścią CSS
.element::before {
  content: '★ ';
  color: #f43f5e;
  margin-right: 8px;
}
Pozycjonowanie

5. Właściwość position

Definiuje metodę pozycjonowania elementu w dokumencie (współpracuje z właściwościami top, right, bottom, left).

Główne tryby:

  • static: Domyślne zachowanie w normalnym nurcie.
  • relative: Względnie do swojej normalnej pozycji.
  • absolute: Względem najbliższego pozycjonowanego przodka.
  • fixed: Względem okna przeglądarki (nie rusza się przy scrollowaniu).
  • sticky: Hybryda relative i fixed w zależności od pozycji przewijania.
Wizualizator Position position: static;

Przewiń ten mały kontener lub obserwuj zachowanie elementu:

Blok treści numer 1 wewnątrz kontenera.
Element pozycjonowany (static)
Blok treści numer 2.
Blok treści numer 3.
Blok treści numer 4 (koniec kontenera).
Ściągawka

Podsumowanie i Kiedy Czego Używać

Szybkie zestawienie właściwości CSS ułatwiające wybór odpowiedniego narzędzia do układu strony.

Właściwość Główne przeznaczenie Najczęstsze wartości Kiedy stosować?
display Typ wyświetlania i model układu elementu block, inline, flex, grid, none Zawsze; do budowy siatek stron, flexboxów i kontroli widoczności.
float Wypchnięcie elementu do krawędzi i opływanie tekstem left, right, none Klasyczne opływanie grafik w artykułach tekstowych (obecnie rzadziej do layoutów).
clear Blokowanie sąsiedztwa elementów z float left, right, both, none Do resetowania zachowania pod elementami z ustawionym float.
content Generowanie treści w pseudoklasach ::before/::after tekst, URL, ikony, counter Do ozdobników, dekoracji, ikonek CSS bez modyfikacji HTML.
position Precyzyjne pozycjonowanie w przestrzeni okna/kontenera static, relative, absolute, fixed, sticky Do modali, przypiętych nawigacji (sticky/fixed), badge'ów i banerów.