📖
Kolory i typografia
Kolory CSS, czcionki, rozmiary i zmienne CSS
Kolory w CSS
CSS obsługuje kilka formatów kolorów:
css
/* HEX — najczęstszy */
color: #e44d26; /* pomarańczowy */
color: #fff; /* biały (skrót) */
/* RGB */
color: rgb(228, 77, 38);
/* RGBA — z przezroczystością (0 = przezroczysty, 1 = nieprzezroczysty) */
background: rgba(0, 0, 0, 0.5); /* 50% czarny */
/* HSL — odcień, nasycenie, jasność */
color: hsl(14, 76%, 52%);
/* Nazwane kolory */
color: red;
color: cornflowerblue;color — kolor tekstu. background-color (lub background) — kolor tła.
Typografia
css
/* Czcionka */
font-family: 'Inter', Arial, sans-serif;
/* Jeśli 'Inter' się nie załaduje — Arial, jeśli nie — dowolna sans-serif */
/* Rozmiar */
font-size: 16px; /* piksele */
font-size: 1rem; /* względny do elementu głównego (16px domyślnie) */
font-size: 1.125em; /* względny do elementu nadrzędnego */
/* Grubość */
font-weight: 400; /* normalna */
font-weight: 700; /* pogrubiona */
/* Wysokość linii */
line-height: 1.6; /* 1.6× rozmiar czcionki — dobry standard */
/* Wyrównanie */
text-align: left | center | right | justify;
/* Dekoracja */
text-decoration: none | underline | line-through;
text-transform: uppercase | lowercase | capitalize;
letter-spacing: 0.05em; /* odstęp między literami */Zmienne CSS (Custom Properties)
Pozwalają przechowywać wartości i używać ich wielokrotnie w CSS:
css
:root {
--color-primary: #6070f7;
--color-text: #1e293b;
--font-size-base: 16px;
--border-radius: 8px;
}
.btn {
background: var(--color-primary);
border-radius: var(--border-radius);
}
/* Aby zmienić kolor główny — wystarczy zaktualizować w :root */Dlaczego to świetne: zmień jedną wartość w :root a schemat kolorów zaktualizuje się na całej stronie. Idealne dla trybu ciemnego.
css
💬
To CSS tej platformy. rem + zmienne CSS — nowoczesny standard.
Preferuj rem zamiast px dla czcionek! Jeśli użytkownik zwiększył rozmiar czcionki w przeglądarce (dla czytelności), rem skaluje się razem z nim, ale px nie.
Komentarze
Zaloguj się lub Zacznij aby zostawić komentarz.