Dokumentacja CSS
Zwięzła dokumentacja CSS oparta na przykładach. Przeczytaj o zagadnieniu, zobacz kod i przećwicz go na ścieżce Coddy.
Zacznij ścieżkę CSS z przewodnikiemPierwsze kroki
- Inline CSSInline CSS umieszcza deklaracje bezpośrednio na elemencie za pomocą atrybutu style. Poznaj składnię, sytuacje, w których style inline są dobrym wyborem, powód, dla którego wygrywają z arkuszami stylów, i porównanie z wewnętrznym i zewnętrznym CSS.
- Zewnętrzny CSSZewnętrzny CSS znajduje się w pliku .css, który każda strona dołącza przez <link rel="stylesheet">; wewnętrzny CSS siedzi w elemencie <style> na jednej stronie. Poznaj oba sposoby, działanie ścieżek do plików i to, która reguła wygrywa, gdy się spotkają.
- KomentarzeCSS ma jedną składnię komentarzy, /* ... */, dla jednej i wielu linii. Dowiedz się, gdzie można umieszczać komentarze, jak zakomentować regułę i dlaczego // oraz zagnieżdżone komentarze po cichu psują następną regułę.
- !important!important sprawia, że deklaracja wygrywa ze zwykłymi deklaracjami bez względu na ich specyficzność. Dowiedz się dokładnie, co pokonuje, co pokonuje jego, jak działa pod spodem specyficzność i jakie są czystsze sposoby na wygranie konfliktu stylów.
- Zmienne CSSZmienne CSS (custom properties) przechowują wartość w jednym miejscu i pozwalają używać jej ponownie przez var(). Dowiedz się, jak deklarować je w :root, ograniczać ich zasięg i nadpisywać, ustawiać wartości zapasowe, przełączać motywy w JavaScripcie i unikać pułapki nieprawidłowej wartości.
Selektory
- SelektorySelektor CSS wybiera elementy, które stylizuje reguła. Poznaj wszystkie rodzaje selektorów, cztery kombinatory (potomka, dziecka, sąsiedniego rodzeństwa, ogólnego rodzeństwa), selektory atrybutów, grupowanie i testuj selektory na żywo.
- Selektor klasySelektor klasy (.name) stylizuje każdy element z tą klasą; selektor id (#name) stylizuje jeden element o tym id. Poznaj składnię, wiele klas i łączenie klas, różnicę między klasą a id, zasady nazewnictwa i przełączanie klas w JavaScripcie.
- PseudoklasyPseudoklasy wybierają elementy według pozycji lub stanu: :nth-child(), :first-child, :not(), :focus, :checked, :has() i inne. Poznaj składnię, wzór an+b z testerem na żywo i różnicę między nth-child a nth-of-type.
- ::before i ::after::before i ::after wstawiają generowaną treść jako pierwsze i ostatnie dziecko elementu, prosto z CSS. Poznaj właściwość content, dowiedz się, dlaczego pusty content jest wymagany, jak je pozycjonować, jak robić podpowiedzi z attr(), liczniki i gdzie one nie działają.
- HoverPseudoklasa :hover stylizuje element, gdy kursor znajduje się nad nim. Poznaj efekty hover dla przycisków i kart, płynne przejścia, kolory linków z :link, :visited, :hover i :active we właściwej kolejności oraz hover na ekranach dotykowych.
Model pudełkowy
- Model pudełkowyKażdy element to pudełko z czterech warstw: treści, paddingu, obramowania i marginesu. Dowiedz się, jak każda warstwa wpływa na rozmiar, jak box-sizing: border-box zmienia obliczenia, i zobacz każdą warstwę zmierzoną na żywo.
- PaddingPadding to przestrzeń wewnątrz elementu, między jego treścią a obramowaniem. Poznaj skrócony zapis padding z 1 do 4 wartościami, właściwości dla pojedynczych stron, logiczny padding, procenty i to, jak padding zmienia rozmiar elementu.
- MarginMargin to przezroczysta przestrzeń na zewnątrz obramowania elementu, która odpycha inne elementy. Poznaj skrócony zapis margin, wyśrodkowanie przez margin: 0 auto, ujemne marginesy, margin auto we flexboxie i powód, dla którego pionowe marginesy się zapadają.
- Margin a paddingPadding to przestrzeń wewnątrz obramowania elementu, a margin to przestrzeń na zewnątrz. Zobacz oba na tym samym pudełku, obok siebie i na żywo, a potem dowiedz się, którego użyć dla tła, obszaru kliknięcia, odstępów między elementami i wyśrodkowania.
- ObramowanieWłaściwość border rysuje linię wokół paddingu elementu. Poznaj skrót border, wszystkie style obramowania, kolory i pojedyncze boki, zaokrąglone rogi przez border-radius oraz różnicę między obramowaniem a outline.
- Width i heightwidth i height ustawiają rozmiar pudełka elementu. Poznaj rozmiary stałe i procentowe, dowiedz się, dlaczego height: 100% często nic nie robi, jak min-height i max-width tworzą elastyczne layouty, czym różni się auto od 100% i jak działają słowa kluczowe fit-content.
Tekst i czcionki
- Rozmiar czcionkiWłaściwość font-size ustala, jak duży jest tekst. Poznaj jednostki, które przyjmuje (px, rem, em, %, słowa kluczowe, vw), sposób zmiany rozmiaru czcionki w HTML, powód, dla którego rem to bezpieczny wybór, i to, jak rozmiary w em się mnożą.
- Grubość czcionkiWłaściwość font-weight sprawia, że tekst jest pogrubiony, cienki albo coś pomiędzy. Poznaj skalę liczbową od 100 do 900, normal i bold, względne bolder i lighter oraz powód, dla którego grubość czasem nic nie zmienia.
- Line Heightline-height ustala wysokość każdej linii tekstu, a więc odstęp między liniami. Dowiedz się, dlaczego liczba bez jednostki to dobry wybór domyślny, jak inaczej dziedziczą się wartości px, em i %, oraz jakie wartości sprawdzają się w tekście i nagłówkach.
- Kolor tekstuZnacznik <font color> jest przestarzały; kolor tekstu w HTML ustawia się właściwością CSS color. Dowiedz się, jak pokolorować całą stronę, jedno słowo, link albo nagłówek, kolorami nazwanymi, hex i rgb, i jak zachować czytelność tekstu.
- PodkreśleniePodkreśl tekst przez text-decoration, a potem kontroluj linię: jej kolor, styl, grubość i odległość od tekstu. Dowiedz się też, jak usunąć podkreślenie z linków i kiedy nie warto tego robić.
- Cień tekstutext-shadow rysuje jeden lub więcej cieni za tekstem. Poznaj cztery wartości (przesunięcie x, przesunięcie y, rozmycie, kolor), nakładanie cieni dla efektów poświaty, obrysu i 3D oraz użycie cienia, żeby tekst był czytelny na złożonym tle.
Kolory i tła
- KoloryWszystkie sposoby zapisu koloru w CSS: nazwy kolorów, kody hex, rgb() i rgba(), hsl(), przezroczystość przez kanał alfa, currentColor oraz nowsze oklch() i color-mix(). Każdy z przykładem na żywo i konwerterem.
- Kolor tłabackground-color wypełnia pudełko elementu kolorem. Dowiedz się, jak ustawić kolor tła całej strony, diva, wiersza tabeli albo jednego słowa, jak działa przezroczystość, dlaczego bgcolor jest przestarzały i czym background-color różni się od skrótu background.
- Obraz tłabackground-image umieszcza obraz albo gradient za treścią elementu. Poznaj url() i gradienty, background-size (cover i contain), background-position, background-repeat, nakładanie kilku teł i skrót background.
- GradientyGradienty CSS to obrazy, które przeglądarka rysuje z kolorów. Poznaj radial-gradient (kształt, rozmiar, pozycja), linear-gradient (kierunek i kąty), conic-gradient, punkty kolorów, ostre przejścia do pasków, gradienty powtarzane i tekst z gradientem.
- Box shadowbox-shadow rysuje cienie wokół pudełka elementu. Poznaj pięć wartości (x, y, rozmycie, spread, kolor), cienie inset, nakładanie kilku cieni dla realistycznej głębi, obrysy fokusu zrobione przez spread i błędy, przez które cienie wyglądają brudno.
Układ strony
- DisplayWłaściwość display decyduje o tym, jak element uczestniczy w układzie strony. Poznaj block, inline i inline-block na zmierzonych pudełkach obok siebie, display none a visibility hidden oraz miejsce flex, grid, flow-root i contents.
- Positionposition: absolute umieszcza element w dokładnych współrzędnych wewnątrz najbliższego pozycjonowanego przodka. Dowiedz się, jak absolute współpracuje z position: relative, potem poznaj fixed i sticky, właściwości top/right/bottom/left i inset oraz powody, dla których sticky czasem się nie przykleja.
- Z-index w CSSz-index decyduje, który z nachodzących na siebie elementów jest rysowany na wierzchu. Dowiedz się, na jakich elementach działa, jak konteksty nakładania grupują elementy tak, że z-index 9999 wciąż może przegrać, co tworzy kontekst nakładania i jak naprawić z-index, który nie działa.
- Overflowoverflow decyduje, co dzieje się z treścią, która nie mieści się w pudełku: pokazać ją, przyciąć czy dodać paski przewijania. Poznaj visible, hidden, scroll, auto i clip, overflow-x i overflow-y, wielokropek w tekście i skutki uboczne overflow w układzie.
- Float i clearfloat spycha element na jedną stronę i pozwala tekstowi go opływać, tak jak w czasopismach umieszcza się zdjęcia. Poznaj float left, right i inline-start, clear, powód, dla którego rodzic zapada się wokół elementów pływających, jak naprawia to display: flow-root i dlaczego float nie służy już do układu strony.
- Wyśrodkowanie divaWszystkie sposoby na wyśrodkowanie diva w poziomie, w pionie albo w obu kierunkach: flexbox, grid, margin auto, pozycja absolutna z transform, inset z margin auto i align-content. Każdy działa na żywo i mierzy własne wyśrodkowanie, a tabela podpowiada, kiedy którego użyć.
- Wyśrodkowanie obrazka<img> jest elementem liniowym, więc wyśrodkowuje się jak tekst: text-align: center na rodzicu. Możesz też zamienić go w blok z margin: 0 auto albo wyśrodkować flexboxem lub gridem, także w pionie. Każda metoda działa na żywo i mierzy wynik.
Flexbox i Grid
- FlexboxFlexbox układa elementy w rzędzie albo w kolumnie i steruje tym, jak dzielą miejsce i jak się wyrównują. Poznaj display: flex, oś główną i poprzeczną, wszystkie właściwości kontenera, flex-grow, flex-shrink i flex-basis, z edytorem na żywo, który mierzy, gdzie ląduje każdy element.
- Justify Contentjustify-content rozmieszcza elementy flex wzdłuż osi głównej, a align-items wzdłuż osi poprzecznej. Zobacz wszystkie wartości obok siebie, zmierzone, z klikalną siatką wyrównania, align-self i powodami, dla których justify-content czasem nic nie robi.
- Flex wrapflex-wrap decyduje, czy elementy flex ściskają się w jednej linii, czy przechodzą do następnej, a flex-direction decyduje, czy układają się w rzędzie, czy w kolumnie. Poznaj obie właściwości na przykładach na żywo, skrót flex-flow, align-content i responsywny rząd kart bez media queries.
- CSS GridCSS grid układa elementy jednocześnie w wierszach i kolumnach. Poznaj display: grid, grid-template-columns, jednostkę fr, repeat() i minmax(), auto-fill kontra auto-fit, umieszczanie elementów przez grid-column oraz grid-template-areas, na żywej siatce, którą edytujesz i mierzysz.
Responsywny design
- Media QueriesMedia query stosuje CSS tylko wtedy, gdy spełniony jest warunek, na przykład minimalna szerokość ekranu, ciemny motyw albo wskaźnik myszy. Poznaj składnię @media, breakpointy mobile first, składnię zakresów, prefers-color-scheme, matchMedia w JavaScripcie i container queries.
- Jednostki CSSrem zależy od rozmiaru czcionki korzenia, em od rozmiaru czcionki bieżącego elementu, px jest stały, a % zależy od właściwości. Zobacz każdą jednostkę zmierzoną w zagnieżdżonym demo, dlaczego em się kumuluje, kiedy czego używać i jak działają vw, vh i dvh.
- clamp()clamp(MIN, PREFERRED, MAX) zwraca wartość preferowaną, ale nigdy mniejszą niż MIN ani większą niż MAX. Dowiedz się, jak uelastycznia rozmiary czcionek i odstępy bez media queries, jak obliczyć wartość środkową i jak łączą się z nią min() i max().
- calc()calc() pozwala liczyć w CSS i łączyć jednostki, na przykład 100% minus stały panel boczny o szerokości 200px. Poznaj zasady składni (spacje mają znaczenie), calc() ze zmiennymi CSS, typowe układy, które rozwiązuje, i powód, dla którego niepoprawne calc() jest po cichu ignorowane.
Przejścia i efekty
- TransitionPrzejście CSS animuje właściwość od starej wartości do nowej, gdy ta się zmienia, na przykład po najechaniu kursorem. Poznaj skrócony zapis transition, wszystkie funkcje czasu obok siebie, to, co można, a czego nie można animować, obejście dla height: auto i ograniczony ruch.
- AnimacjeAnimacje CSS prowadzą element przez kroki zdefiniowane w @keyframes, samodzielnie i tyle razy, ile chcesz. Poznaj składnię @keyframes, wszystkie osiem właściwości animation, fill-mode i direction, wskaźniki ładowania, pauzowanie i szacunek dla ograniczonego ruchu.
- TransformWłaściwość transform przesuwa, skaluje, obraca i pochyla element bez zmiany układu wokół niego. Poznaj wszystkie funkcje transformacji, powód, dla którego kolejność funkcji ma znaczenie, transform-origin, osobne właściwości translate, scale i rotate oraz trik z translate(-50%, -50%) do wyśrodkowania.
- RotateObróć element przez transform: rotate(45deg) albo nowszą właściwość rotate. Poznaj jednostki kąta (deg, turn, rad), obracanie wokół rogu z transform-origin, obracanie tekstu i ikon, kręcący się wskaźnik ładowania i obrót 3D z rotateX i rotateY.
- Opacityopacity sprawia, że cały element i wszystko w nim staje się przezroczyste, od 0 (niewidoczny) do 1 (pełny). Poznaj wartości, powód, dla którego opacity wygasza też tekst, sposób na przezroczyste samo tło, opacity: 0 kontra visibility kontra display i wygaszanie po najechaniu.
- Rozmycie i filtryfilter: blur(5px) rozmywa element, a backdrop-filter: blur() rozmywa to, co jest za nim. Poznaj wszystkie funkcje filtrów (brightness, contrast, grayscale, sepia, saturate, hue-rotate, invert, drop-shadow) z suwakami na żywo, ich łączenie i problem rozmytych krawędzi.
