Kolory, typografia i model pudełkowy
Stosuj kolory za pomocą wartości hex, rgb i hsl, wybieraj czcionki, ustawiaj rozmiary i wysokości wierszy oraz używaj margin, border i padding do rozmieszczania elementów.
Kolory, typografia i model pudełkowy to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Wartości kolorów CSS
CSS obsługuje wiele formatów kolorów. Należy wybrać format najczytelniejszy w danym kontekście: kody szesnastkowe dla kolorów marki, hsl() do łatwego dostosowywania kolorów, rgb() dla wartości generowanych programowo oraz nazwane kolory do szybkiego prototypowania.
color: #2b6cb0; /* hex */
color: rgb(43, 108, 176); /* rgb */
color: hsl(212, 61%, 43%); /* hsl */
color: royalblue; /* named */
color: rgba(0,0,0,0.5); /* rgba with alpha */Kolory i obrazy tła
Tło elementu należy ustawiać za pomocą background-color. background-image służy do ustawiania gradientów lub adresów URL. Skrót background łączy kolor, obraz, pozycję, rozmiar i powtarzanie w jednej deklaracji.
background-color: #f7fafc;
background-image: linear-gradient(135deg, #667eea, #764ba2);
background: url('/hero.webp') center / cover no-repeat #1a202c;Właściwości czcionki
Typografię można kontrolować za pomocą: font-family (krój pisma), font-size (em, rem, px), font-weight (100–900), font-style (kursywa), line-height (współczynnik czytelności) oraz letter-spacing (tracking).
body {
font-family: 'Inter', system-ui, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.6;
color: #1a202c;
}Właściwości tekstu
Dodatkowe właściwości stylowania tekstu: text-align (do lewej, wyśrodkowanie, do prawej, wyjustowanie), text-decoration (podkreślenie, przekreślenie, brak), text-transform (wielkie litery, kapitalizacja), text-overflow: ellipsis do skracania tekstu.
h1 { text-align: center; text-transform: uppercase; }
a { text-decoration: none; }
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}rem a em i px
px jest jednostką absolutną. em jest względne względem rozmiaru czcionki danego elementu (i podlega kaskadowości). rem jest względne względem rozmiaru czcionki elementu głównego (jest przewidywalne). Do większości rozmiarów należy używać rem, aby uwzględniać preferencje użytkownika dotyczące czcionki.
html { font-size: 16px; } /* 1rem = 16px */
.card { padding: 1.5rem; } /* 24px */
.small { font-size: 0.875rem; } /* 14px */Model pudełkowy
Każdy element HTML jest prostokątnym pudełkiem złożonym z czterech warstw: zawartości (rzeczywiste wymiary elementu), dopełnienia (przestrzeń wewnątrz obramowania), obramowania oraz marginesu (przestrzeń na zewnątrz obramowania).
/* Total width = content + padding + border */
.box {
width: 200px;
padding: 16px;
border: 2px solid #ccc;
margin: 24px;
}box-sizing: border-box
Domyślnie, przy wartości content-box, do zadeklarowanej szerokości dodawane są dopełnienie i obramowanie. Przy box-sizing: border-box dopełnienie i obramowanie są uwzględniane w zadeklarowanej szerokości — i niemal zawsze właśnie tego potrzeba.
/* Apply globally */
*, *::before, *::after {
box-sizing: border-box;
}
/* Now width: 200px includes padding and border */
.card {
width: 200px;
padding: 20px; /* doesn't add to width */
}Zapadanie się marginesów
Pionowe marginesy między sąsiednimi elementami blokowymi zapadają się — obowiązuje tylko większy margines. Zapadają się również marginesy rodzica oraz jego pierwszego lub ostatniego elementu potomnego. Marginesy elementów potomnych Flexboxa i Gridu nie zapadają się.
Skrót padding
Skrót padding: top right bottom left ustawia wszystkie strony. Dwie wartości ustawiają odstępy pionowe i poziome. Trzy ustawiają odstęp górny, poziome, a następnie dolny.
padding: 16px; /* all sides */
padding: 8px 16px; /* top/bottom left/right */
padding: 8px 16px 24px; /* top left/right bottom */
padding: 8px 16px 24px 32px; /* top right bottom left */Właściwości obramowania
Obramowanie można ustawić za pomocą skrótu border: width style color. Poszczególne strony można ustawiać za pomocą właściwości takich jak border-top. Do zaokrąglania narożników służy border-radius. outline jest podobne, ale nie wpływa na układ.
.card {
border: 1px solid #e2e8f0;
border-radius: 8px;
}
button:focus {
outline: 2px solid #3182ce;
outline-offset: 2px;
}Przepełnienie
overflow: hidden przycina zawartość, która wykracza poza rozmiar elementu. overflow: scroll dodaje paski przewijania. overflow: auto dodaje paski przewijania tylko wtedy, gdy są potrzebne. Za pomocą overflow-x i overflow-y można niezależnie kontrolować poszczególne osie.
Szybki test
Przy ustawieniach box-sizing: border-box, width: 300px; padding: 20px; border: 2px solid jaka jest całkowita wyrenderowana szerokość elementu?
Podsumowanie: kolory, typografia i model pudełkowy
Kolory można ustawiać za pomocą hex, rgb lub hsl. Czcionki należy definiować za pomocą font-family, rozmiaru, grubości i line-height. Każdy element jest pudełkiem: zawartość + dopełnienie + obramowanie + margines. Aby uzyskać przewidywalne rozmiary, należy globalnie włączyć box-sizing: border-box.
Często zadawane pytania
Czy lekcja „Kolory, typografia i model pudełkowy” jest bezpłatna?
Tak — pełny tekst „Kolory, typografia i model pudełkowy” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Kolory, typografia i model pudełkowy”?
Stosuj kolory za pomocą wartości hex, rgb i hsl, wybieraj czcionki, ustawiaj rozmiary i wysokości wierszy oraz używaj margin, border i padding do rozmieszczania elementów. Ćwiczysz Frontend Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Frontend Academy?
Nie wymagamy żadnego doświadczenia. Frontend Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.
Ile czasu zajmuje lekcja „Kolory, typografia i model pudełkowy”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Frontend Academy?
Tak. Każda lekcja Frontend Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Selektory i kaskada
- Kolory, typografia i model pudełkowy
- Display: podstawy block, inline, flex i grid
- Pozycjonowanie: relative, absolute, fixed, sticky