CSS Cheat Sheet: ściąga z CSS
Ostatnia aktualizacja
Selektory
Jak wskazać elementy, które chcesz ostylować.
| Selektor | Pasuje do |
|---|---|
* | Wszystkie elementy |
p | Wszystkie elementy <p> (po znaczniku) |
.btn | Elementy z class="btn" |
#main | Element z id="main" |
div p | Wszystkie <p> wewnątrz <div> (potomkowie) |
div > p | Tylko bezpośrednie dzieci |
a:hover | Linki pod kursorem (pseudoklasa) |
li:first-child | Pierwszy <li> w rodzicu |
li:nth-child(2n) | Co drugi (parzysty) <li> |
input[type="text"] | Pola z tym atrybutem |
p::before | Treść generowana przed <p> (pseudoelement) |
Model pudełkowy
Każdy element to pudełko: treść, padding, obramowanie, margines.
| Właściwość | Co robi |
|---|---|
width / height | Rozmiar obszaru treści |
padding | Odstęp wewnątrz obramowania |
border | 1px solid #333: grubość, styl, kolor |
margin | Odstęp na zewnątrz obramowania |
box-sizing: border-box | Szerokość obejmuje padding i obramowanie |
margin: 0 auto | Wyśrodkowanie elementu blokowego w poziomie |
overflow: hidden | Przycięcie wystającej treści |
Typografia i kolor
| Właściwość | Przykład |
|---|---|
color | color: #333: kolor tekstu |
background | background: #fff albo obraz/gradient |
font-family | font-family: system-ui, sans-serif |
font-size | font-size: 16px (albo rem, em) |
font-weight | 400 (normalna) … 700 (pogrubiona) |
line-height | 1.5: odstęp między wierszami |
text-align | left, center, right, justify |
text-decoration | underline, none |
Flexbox
Układ jednowymiarowy: wiersze albo kolumny. Ustaw display: flex na rodzicu.
| Właściwość (kontenera) | Co robi |
|---|---|
display: flex | Dzieci stają się elementami flex |
flex-direction | row (domyślnie) albo column |
justify-content | Wyrównanie wzdłuż osi głównej (center, space-between) |
align-items | Wyrównanie wzdłuż osi poprzecznej (center, stretch) |
gap | Odstęp między elementami, np. gap: 16px |
flex-wrap | wrap pozwala elementom przejść do nowej linii |
flex: 1 (na dziecku) | Element rośnie, by wypełnić dostępne miejsce |
Grid
Układ dwuwymiarowy. Ustaw display: grid na rodzicu.
| Właściwość | Co robi |
|---|---|
display: grid | Dzieci stają się elementami siatki |
grid-template-columns | 1fr 1fr 1fr albo repeat(3, 1fr) |
grid-template-rows | Określa rozmiary wierszy |
gap | Odstęp między wierszami i kolumnami |
grid-column | 1 / 3: rozciągnięcie elementu na kilka kolumn |
auto-fit / minmax | repeat(auto-fit, minmax(200px, 1fr)) dla responsywnych siatek |
place-items: center | Wyśrodkowanie każdego elementu w komórce |
Pozycjonowanie i wyświetlanie
| Właściwość / wartość | Co robi |
|---|---|
position: static | Domyślnie: w normalnym przepływie |
position: relative | Przesunięcie względem normalnego miejsca |
position: absolute | Pozycja względem najbliższego pozycjonowanego przodka |
position: fixed | Przypięty do okna przeglądarki |
position: sticky | Przykleja się po przewinięciu do progu |
top / right / bottom / left | Przesunięcia elementów pozycjonowanych |
z-index | Kolejność nakładania (wyższy = na wierzchu) |
display: none | Usuwa element z układu |
display: inline-block | Płynie w linii, ale przyjmuje width/height |
Przejścia i transformacje
| Właściwość | Przykład |
|---|---|
transition | transition: all 0.2s ease |
transform: translate | translate(10px, 0): przesunięcie |
transform: scale | scale(1.1): zmiana rozmiaru |
transform: rotate | rotate(45deg) |
opacity | 0 (niewidoczny) … 1 (nieprzezroczysty) |
box-shadow | 0 2px 8px rgba(0,0,0,.15) |
border-radius | 8px: zaokrąglone rogi |
Jednostki i responsywność
| Jednostka / funkcja | Znaczenie |
|---|---|
px | Piksele bezwzględne |
% | Względem rodzica |
rem | Względem rozmiaru czcionki elementu głównego |
em | Względem bieżącego rozmiaru czcionki |
vw / vh | 1% szerokości / wysokości okna |
fr | Ułamek wolnej przestrzeni (grid) |
@media (max-width: 600px) { … } | Reguły stosowane poniżej punktu przełamania |
Selektory, model pudełkowy, flexbox, grid i właściwości, o których zawsze się zapomina, na jednej stronie. Ten CSS cheat sheet to szybka ściąga do stylowania i układania stron internetowych, od wybierania elementów po ich wyśrodkowanie.
Wszystko tutaj to standardowy CSS działający w nowoczesnych przeglądarkach. Skopiuj regułę albo wypróbuj ją w edytorze online HTML, gdzie edytujesz CSS z natychmiastowym podglądem. Połącz ją ze ściągą z HTML do znaczników albo naucz się układów od zera w darmowym interaktywnym kursie CSS w Coddy.
CSS cheat sheet: najczęstsze pytania
Czy ten CSS cheat sheet jest darmowy?
Tak. Ta ściąga z CSS jest darmowa i nie wymaga rejestracji. Dodaj ją do zakładek i korzystaj z niej, gdy potrzebujesz sprawdzić selektor, właściwość albo wzorzec układu.
Flexbox czy grid?
Flexboxa używaj do układów jednowymiarowych: rzędu przycisków, paska nawigacji, elementów w jednym wierszu lub kolumnie. Grida używaj do układów dwuwymiarowych, w których kontrolujesz jednocześnie wiersze i kolumny, np. układ strony albo galerię kart. Dobrze działają razem: siatka kart, w której każda karta używa flexboxa w środku, to częsty wzorzec.
Jak wyśrodkować diva w CSS?
Najprostszy nowoczesny sposób to flexbox na rodzicu:
display: flex; justify-content: center; align-items: center; wyśrodkowuje dziecko w poziomie i w pionie. Do samego wyśrodkowania w poziomie elementu blokowego o ustalonej szerokości nadal wystarcza margin: 0 auto.Czy mogę ćwiczyć CSS online?
Tak. Otwórz edytor online HTML, aby pisać HTML i CSS razem z podglądem na żywo. Gdy chcesz uczyć się bardziej systematycznie, darmowy interaktywny kurs CSS w Coddy krok po kroku omawia selektory, model pudełkowy, flexbox i grid.
Czy ta ściąga nadaje się dla początkujących?
Tak. Prowadzi od selektorów i modelu pudełkowego (podstaw) do flexboxa, grida i przejść, więc możesz zacząć od górnych sekcji i stopniowo poznawać nowoczesne układy.
Powiązane materiały
Więcej ściąg
