210 haseł · 16 kategorii
Dokumentacja CSS
Selektory, pseudoklasy i właściwości CSS z każdą wartością pokazaną na żywym przykładzie. Model pudełkowy, Flexbox, Grid, typografia, przejścia i animacje.
210 haseł
Selektory
Wybieranie elementów po znaczniku, klasie, atrybucie i miejscu w drzewie dokumentu.
- Selektor typuWybiera wszystkie elementy o podanej nazwie znacznika, na przykład każdy akapit p albo każdy punkt listy li.
- .klasaWybiera elementy, które mają podaną klasę w atrybucie class. Najczęściej używany selektor do stylowania komponentów.
- #idWybiera element o podanym identyfikatorze z atrybutu id. Ma bardzo wysoką specyficzność, więc jego reguły trudno potem nadpisać.
- [atrybut]Wybiera elementy po atrybucie HTML i jego wartości: dokładnej, początku, końcu, fragmencie albo słowie z listy.
- *Gwiazdka pasuje do każdego elementu. Służy do resetów stylów i reguł dla wszystkich dzieci wybranego kontenera.
- A BSpacja między selektorami wybiera elementy B leżące gdziekolwiek wewnątrz elementu A, na dowolnej głębokości.
- A > BZnak > wybiera elementy B, które są bezpośrednimi dziećmi elementu A, czyli leżą dokładnie jeden poziom niżej.
- A + BZnak + wybiera element B, który stoi bezpośrednio za elementem A i ma z nim wspólnego rodzica.
- A ~ BZnak ~ wybiera wszystkie elementy B, które stoją gdziekolwiek za elementem A i mają z nim wspólnego rodzica.
- A, BPrzecinek łączy kilka selektorów w jedną regułę, żeby nadać im te same style bez powtarzania deklaracji.
- &Pozwala pisać reguły wewnątrz innych reguł, jak w Sass. Znak & oznacza w nich selektor reguły nadrzędnej.
- SpecyficznośćWaga selektora, która decyduje, która reguła wygra, gdy kilka reguł ustawia tę samą właściwość tego samego elementu.
Pseudoklasy
Stany i pozycje elementów: najechanie, fokus, zaznaczenie, n-ty element i walidacja.
- :hoverPasuje do elementu, nad którym znajduje się kursor myszy. Podstawa efektów najechania na przyciski, linki i karty.
- :focusPasuje do elementu, który ma fokus, czyli przyjmuje teraz dane z klawiatury, np. do klikniętego pola formularza.
- :focus-visiblePasuje do elementu z fokusem wtedy, gdy przeglądarka uzna, że wskaźnik powinien być widoczny, np. przy nawigacji klawiaturą.
- :focus-withinPasuje do elementu, który sam ma fokus albo zawiera element z fokusem. Pozwala wyróżnić cały formularz lub kartę.
- :activePasuje do elementu w chwili aktywacji, najczęściej gdy przycisk myszy jest wciśnięty nad przyciskiem lub linkiem.
- :first-childPasuje do elementu, który jest pierwszym dzieckiem swojego rodzica.
- :last-childPasuje do elementu, który jest ostatnim dzieckiem swojego rodzica.
- :nth-child()Wybiera elementy według pozycji wśród rodzeństwa: co drugi, co trzeci, pierwsze trzy albo wszystkie od siódmego.
- :nth-of-type()Wybiera elementy według pozycji wśród rodzeństwa z tym samym znacznikiem, na przykład co drugi obrazek albo trzeci akapit.
- :not()Wybiera elementy, które nie pasują do podanego selektora ani do żadnego z listy.
- :is()Dopasowuje element do dowolnego selektora z listy. Skraca długie, powtarzalne selektory do jednego zapisu.
- :where()Działa jak :is(), ale zawsze ma zerową specyficzność. Idealna do stylów bazowych, które łatwo nadpisać.
- :has()Wybiera element na podstawie tego, co zawiera lub co stoi za nim. Pozwala stylować rodzica według jego dzieci.
- :checkedPasuje do zaznaczonego pola wyboru, wybranego przycisku radio i wybranej opcji na liście select.
- :disabledPasuje do wyłączonych elementów formularza, czyli takich, których nie da się kliknąć, zaznaczyć ani edytować.
- :invalidPasuje do pól formularza, których wartość łamie reguły walidacji HTML, np. do pustego pola wymaganego albo błędnego adresu e-mail.
- :placeholder-shownPasuje do pola input lub textarea, które w tej chwili wyświetla tekst zastępczy, czyli jest puste i ma atrybut placeholder.
- :rootPasuje do elementu głównego dokumentu, w HTML do znacznika html. Zwyczajowe miejsce na zmienne CSS całej strony.
Pseudoelementy
Fragmenty, których nie ma w HTML: treść przed i po elemencie, pierwsza litera, zaznaczenie.
- ::beforeTworzy wirtualny element na początku zawartości elementu. Służy do ikon, ozdobników i etykiet bez dodatkowego HTML.
- ::afterTworzy wirtualny element na końcu zawartości elementu. Idealny do strzałek, znaczków, podkreśleń i nakładek.
- ::placeholderStylizuje tekst podpowiedzi wyświetlany w pustym polu input lub textarea.
- ::selectionZmienia wygląd fragmentu tekstu zaznaczonego przez użytkownika myszą lub klawiaturą.
- ::markerStylizuje znacznik elementu listy: kropkę w liście ul albo numer w liście ol.
- ::first-letterStylizuje pierwszą literę pierwszego wiersza w bloku tekstu. Klasyczny sposób na inicjał na początku artykułu.
- ::first-lineStylizuje pierwszy wiersz tekstu w elemencie blokowym, niezależnie od tego, ile słów się w nim zmieści.
- ::backdropStylizuje warstwę tła pod modalnym oknem dialog, elementem pełnoekranowym i otwartym popoverem.
Model pudełkowy
Wymiary, marginesy, odstępy wewnętrzne, obramowania i przepełnienie.
- widthUstawia szerokość elementu.
- heightUstawia wysokość elementu.
- min-widthUstala minimalną szerokość, poniżej której element się nie zwęży.
- max-widthUstala maksymalną szerokość, powyżej której element się nie rozciągnie.
- min-heightUstala minimalną wysokość, ale pozwala elementowi rosnąć razem z treścią.
- max-heightUstala maksymalną wysokość elementu.
- marginUstawia zewnętrzny odstęp elementu od sąsiadów.
- paddingUstawia wewnętrzny odstęp między treścią a obramowaniem.
- borderSkrót, który ustawia grubość, styl i kolor obramowania.
- border-widthUstawia grubość obramowania.
- border-styleUstawia styl linii obramowania: ciągła, przerywana, kropkowana i inne.
- border-colorUstawia kolor obramowania.
- border-radiusZaokrągla rogi elementu.
- box-sizingDecyduje, czy width i height obejmują padding i obramowanie.
- outlineRysuje obwódkę wokół elementu, która nie zajmuje miejsca w układzie.
- overflowDecyduje, co zrobić z treścią, która nie mieści się w elemencie.
- aspect-ratioUstala proporcje szerokości do wysokości elementu.
- outline-offsetOdsuwa obwódkę od krawędzi elementu albo wsuwa ją do środka, nie zmieniając układu strony.
- overflow-xDecyduje, co zrobić z treścią wystającą w poziomie. Bliźniacza overflow-y robi to samo w pionie.
- margin-inlineUstawia marginesy na początku i końcu wiersza. Logiczna wersja margin-left i margin-right, która rozumie kierunek pisma.
- padding-inlineUstawia odstęp wewnętrzny na początku i końcu wiersza. Logiczna wersja padding-left i padding-right, która rozumie kierunek pisma.
- inline-sizeUstawia rozmiar elementu wzdłuż wiersza tekstu. W poziomym piśmie to szerokość, a para block-size ustala wysokość.
- border-imageZastępuje zwykłe obramowanie obrazkiem albo gradientem pociętym na narożniki i krawędzie.
Układ i pozycjonowanie
Sposób wyświetlania elementu, pozycja, warstwy i opływanie.
- displayUstala, jak element zachowuje się w układzie strony i jak układa swoje dzieci.
- positionWybiera sposób pozycjonowania elementu: w przepływie, względnie, absolutnie, na stałe lub przyklejony.
- topOdsuwa pozycjonowany element od górnej krawędzi jego punktu odniesienia.
- rightOdsuwa pozycjonowany element od prawej krawędzi jego punktu odniesienia.
- bottomOdsuwa pozycjonowany element od dolnej krawędzi jego punktu odniesienia.
- leftOdsuwa pozycjonowany element od lewej krawędzi jego punktu odniesienia.
- insetSkrót, który ustawia top, right, bottom i left w jednej deklaracji.
- z-indexUstala, który element leży wyżej, gdy elementy na siebie nachodzą.
- floatPrzesuwa element do lewej lub prawej krawędzi, a tekst opływa go z drugiej strony.
- clearKaże elementowi zejść poniżej wcześniejszych elementów pływających.
- visibilityUkrywa element, ale zostawia puste miejsce, które zajmował.
- container-typeZamienia element w kontener, o którego rozmiar mogą pytać reguły @container. Obejmuje też container-name i skrót container.
- columnsDzieli treść elementu na kolumny jak w gazecie. Skrót dla column-width i column-count.
- column-ruleRysuje linię między kolumnami układu wielokolumnowego. Skrót dla grubości, stylu i koloru linii.
- containObiecuje przeglądarce, że wnętrze elementu nie wpływa na resztę strony, więc może ona ograniczyć przeliczanie układu i rysowanie.
- content-visibilityPozwala przeglądarce pominąć renderowanie treści, której nie widać, i dzięki temu przyspieszyć długie strony.
Flexbox
Jednowymiarowy układ elementów w wierszu lub kolumnie.
- justify-contentRozmieszcza elementy wzdłuż osi głównej kontenera flex lub grid.
- align-itemsWyrównuje elementy na osi poprzecznej kontenera flex lub grid.
- flex-directionUstala kierunek osi głównej: elementy flex układają się w wierszu albo w kolumnie.
- flex-wrapPozwala elementom flex zawijać się do kolejnych linii, gdy brakuje miejsca.
- flex-flowSkrót łączący flex-direction i flex-wrap w jednej deklaracji.
- align-contentRozmieszcza całe linie elementów na osi poprzecznej kontenera.
- align-selfNadpisuje wyrównanie jednego elementu na osi poprzecznej.
- orderZmienia kolejność wyświetlania elementu w kontenerze flex lub grid.
- flex-growOkreśla, jak chętnie element rośnie, żeby wypełnić wolne miejsce.
- flex-shrinkOkreśla, jak bardzo element kurczy się, gdy w kontenerze brakuje miejsca.
- flex-basisUstala początkowy rozmiar elementu flex na osi głównej, zanim zacznie rosnąć lub się kurczyć.
- flexSkrót ustawiający flex-grow, flex-shrink i flex-basis elementu.
- gapUstawia odstępy między elementami w kontenerze flex, grid i wielokolumnowym.
- row-gapUstawia odstęp między wierszami w kontenerze flex lub grid.
- column-gapUstawia odstęp między kolumnami w kontenerze flex, grid lub wielokolumnowym.
Grid
Dwuwymiarowa siatka z wierszami, kolumnami i nazwanymi obszarami.
- grid-template-columnsDefiniuje kolumny siatki: ich liczbę i szerokości.
- grid-template-rowsDefiniuje wiersze siatki: ich liczbę i wysokości.
- grid-template-areasOpisuje układ siatki nazwanymi obszarami, niemal jak rysunek w kodzie.
- grid-templateSkrót ustawiający wiersze, kolumny i nazwane obszary siatki w jednej deklaracji.
- grid-auto-columnsUstala szerokość kolumn, które siatka tworzy automatycznie.
- grid-auto-rowsUstala wysokość wierszy, które siatka tworzy automatycznie.
- grid-auto-flowDecyduje, jak elementy bez określonej pozycji wypełniają siatkę.
- grid-columnOkreśla, w których kolumnach siatki zaczyna się i kończy element.
- grid-rowOkreśla, w których wierszach siatki zaczyna się i kończy element.
- grid-areaPrzypisuje element do nazwanego obszaru siatki albo ustawia jego wiersze i kolumny naraz.
- justify-itemsWyrównuje wszystkie elementy w ich komórkach wzdłuż osi poziomej.
- justify-selfWyrównuje pojedynczy element w jego komórce siatki wzdłuż osi poziomej.
- place-itemsSkrót ustawiający align-items i justify-items jednocześnie.
- place-contentSkrót ustawiający align-content i justify-content jednocześnie.
- place-selfSkrót ustawiający align-self i justify-self pojedynczego elementu.
Typografia
Kroje pisma, rozmiary, interlinia, wyrównanie i dekoracje tekstu.
- font-familyWybiera krój pisma, z listą zapasowych krojów na wypadek braku pierwszego.
- font-sizeUstawia rozmiar czcionki.
- font-weightUstawia grubość czcionki, od cienkiej po bardzo pogrubioną.
- font-styleWłącza kursywę lub pochylenie tekstu.
- line-heightUstawia wysokość linii tekstu, czyli odstęp między wierszami.
- letter-spacingZmienia odstępy między literami.
- word-spacingZmienia odstępy między wyrazami.
- text-alignWyrównuje tekst w poziomie: do lewej, do prawej, do środka lub do obu krawędzi.
- text-decorationDodaje lub usuwa linie przy tekście: podkreślenie, przekreślenie, nadkreślenie.
- text-transformZmienia wielkość liter: wszystkie wielkie, wszystkie małe lub wielkie pierwsze litery.
- text-indentUstawia wcięcie pierwszej linii tekstu w bloku.
- text-shadowDodaje cień pod tekstem.
- white-spaceDecyduje, jak traktować spacje, entery i zawijanie linii w tekście.
- word-breakPozwala łamać wyrazy w dowolnym miejscu, gdy nie mieszczą się w linii.
- overflow-wrapŁamie długie wyrazy tylko wtedy, gdy inaczej wystawałyby poza kontener.
- text-overflowDecyduje, jak oznaczyć tekst ucięty na końcu linii, na przykład wielokropkiem.
- vertical-alignWyrównuje w pionie elementy liniowe i zawartość komórek tabeli.
- font-variantWłącza warianty kroju, na przykład kapitaliki albo cyfry o równej szerokości.
- fontSkrót ustawiający styl, grubość, rozmiar, interlinię i krój czcionki naraz.
Kolory i tła
Kolor tekstu, tła, gradienty i obrazy w tle.
- colorUstawia kolor tekstu i domyślny kolor obramowań, dekoracji oraz ikon SVG z currentcolor.
- background-colorUstawia kolor tła elementu.
- background-imageUstawia obraz lub gradient jako tło elementu.
- background-sizeUstala rozmiar obrazu tła: pokrycie całości, zmieszczenie w całości albo konkretne wymiary.
- background-positionUstawia położenie obrazu tła w elemencie.
- background-repeatDecyduje, czy i jak obraz tła powtarza się, żeby wypełnić element.
- background-attachmentDecyduje, czy tło przewija się razem z treścią, czy stoi w miejscu.
- background-clipUstala, do którego obszaru elementu sięga tło, łącznie z efektem tła w tekście.
- background-originUstala, od którego obszaru elementu liczona jest pozycja obrazu tła.
- backgroundSkrót ustawiający wszystkie właściwości tła w jednej deklaracji.
- opacityUstawia przezroczystość całego elementu razem z jego zawartością.
Efekty
Cienie, filtry, przezroczystość, przycinanie i tryby mieszania.
- box-shadowDodaje cień wokół elementu, na zewnątrz lub do środka.
- filterNakłada efekty graficzne na element: rozmycie, jasność, kontrast, skalę szarości i inne.
- backdrop-filterNakłada filtr na to, co widać pod elementem, na przykład rozmycie tła za panelem.
- mix-blend-modeUstala, jak kolory elementu mieszają się z tym, co leży pod nim.
- background-blend-modeMiesza ze sobą warstwy tła elementu: obrazy, gradienty i kolor.
- clip-pathPrzycina element do wybranego kształtu: koła, elipsy, wielokąta i innych.
- mask-imageUżywa obrazu lub gradientu jako maski przezroczystości elementu.
- object-fitDecyduje, jak obraz lub wideo wypełnia ramkę o innych proporcjach.
- object-positionUstawia położenie obrazu lub wideo wewnątrz jego ramki.
Transformacje
Przesuwanie, obracanie, skalowanie i perspektywa.
- transformPrzesuwa, obraca, skaluje lub pochyla element bez wpływu na układ strony.
- transform-originUstawia punkt, wokół którego element się obraca i względem którego się skaluje.
- translatePrzesuwa element w poziomie, pionie lub w głąb, niezależnie od właściwości transform.
- rotateObraca element o podany kąt, niezależnie od właściwości transform.
- scalePowiększa lub pomniejsza element, niezależnie od właściwości transform.
- perspectiveDodaje głębię transformacjom 3D dzieci elementu.
- perspective-originUstawia punkt, z którego widz patrzy na scenę 3D.
- backface-visibilityDecyduje, czy widać tył elementu obróconego w 3D.
- transform-styleDecyduje, czy dzieci elementu żyją we wspólnej przestrzeni 3D, czy są spłaszczane.
Przejścia
Płynna zmiana wartości między dwoma stanami.
- transitionSkrót, który sprawia, że zmiany wartości CSS następują płynnie, a nie skokowo.
- transition-propertyWskazuje, które właściwości CSS mają zmieniać się płynnie.
- transition-durationUstala, jak długo trwa przejście.
- transition-timing-functionUstala krzywą tempa przejścia: przyspieszanie, zwalnianie lub ruch skokowy.
- transition-delayUstala, po jakim czasie od zmiany wartości zaczyna się przejście.
- transition-behaviorPozwala włączyć do przejść właściwości zmieniające się skokowo, takie jak display.
Animacje
Klatki kluczowe i wszystkie właściwości sterujące animacją.
- animation-nameWskazuje, które klatki kluczowe @keyframes ma odtworzyć element.
- animationSkrót ustawiający wszystkie parametry animacji opartej na @keyframes.
- animation-durationUstala, jak długo trwa jeden cykl animacji.
- animation-timing-functionUstala krzywą tempa animacji między klatkami kluczowymi.
- animation-delayUstala, po jakim czasie animacja się zaczyna.
- animation-iteration-countUstala, ile razy animacja ma się powtórzyć.
- animation-directionUstala kierunek odtwarzania animacji: do przodu, wstecz albo na przemian.
- animation-fill-modeDecyduje, jak element wygląda przed rozpoczęciem i po zakończeniu animacji.
- animation-play-stateWstrzymuje lub wznawia animację.
- @keyframesDefiniuje kolejne etapy animacji, czyli klatki kluczowe.
Interakcja i inne
Kursor, zaznaczanie, przewijanie, listy, tabele i dopasowanie obrazów.
- cursorUstawia wygląd kursora myszy nad elementem.
- pointer-eventsWyłącza reagowanie elementu na kliknięcia i najechanie kursorem.
- user-selectPozwala zablokować lub ułatwić zaznaczanie tekstu przez użytkownika.
- resizePozwala użytkownikowi zmieniać rozmiar elementu, przeciągając jego róg.
- scroll-behaviorWłącza płynne przewijanie przy przechodzeniu do kotwic i przewijaniu skryptem.
- scroll-snap-typeSprawia, że przewijany kontener zatrzymuje się na wybranych elementach.
- scroll-snap-alignWskazuje, którą krawędzią element ma się przyciągać w przewijanym kontenerze.
- overscroll-behaviorZapobiega przewijaniu całej strony po dojściu do końca przewijanego elementu.
- accent-colorZmienia kolor akcentu kontrolek formularza: pól wyboru, przycisków opcji, suwaków i pasków postępu.
- caret-colorUstawia kolor kursora tekstowego w polach do pisania.
- list-style-typeUstawia rodzaj znacznika elementów listy: kropki, cyfry, litery lub własny symbol.
- list-style-positionUstala, czy znacznik listy stoi na zewnątrz czy wewnątrz bloku elementu.
- border-collapseŁączy sąsiednie obramowania komórek tabeli w jedną linię albo zostawia je osobno.
- border-spacingUstawia odstęp między komórkami tabeli z rozdzielonymi obramowaniami.
- table-layoutWybiera algorytm liczenia szerokości kolumn tabeli: według treści albo stały.
- contentWstawia treść generowaną w pseudoelementach ::before i ::after.
- appearanceWyłącza systemowy wygląd kontrolek formularza, żeby można je było stylować od zera.
Reguły @
Media queries, zapytania o kontener, własne fonty, warstwy i warunki obsługi.
- @mediaWłącza style tylko wtedy, gdy urządzenie spełnia warunek: ma odpowiednią szerokość okna, ciemny motyw, mysz albo drukuje stronę.
- @containerNakłada style zależnie od rozmiaru kontenera, a nie całego okna. Komponent dopasowuje się do miejsca, które dostał w układzie.
- @supportsWłącza style tylko w przeglądarkach, które obsługują daną właściwość, wartość albo selektor. Pozwala bezpiecznie korzystać z nowości.
- @font-faceRejestruje krój pisma pod wybraną nazwą, której potem używasz w font-family. Pozwala korzystać z fontów z plików własnej strony.
- @importDołącza zawartość innego arkusza CSS do bieżącego. Może od razu umieścić go w warstwie albo wczytać tylko dla wybranych mediów.
- @layerDzieli style na warstwy kaskadowe o ustalonej kolejności. Reguła z późniejszej warstwy wygrywa bez względu na specyficzność selektora.
- @propertyRejestruje zmienną CSS z typem, wartością początkową i zasadą dziedziczenia. Taką zmienną można płynnie animować, np. kąt gradientu.
- @starting-styleOpisuje styl, od którego zaczyna się przejście, gdy element pojawia się na stronie. Dzięki temu nowe elementy mogą płynnie wjeżdżać.
Funkcje i jednostki
calc(), clamp(), var(), gradienty, zapis kolorów i jednostki długości.
- calc()Wylicza wartość z działania matematycznego i pozwala łączyć różne jednostki, na przykład procenty z pikselami.
- clamp()Trzyma wartość w przedziale od minimum do maksimum, a pomiędzy pozwala jej płynnie rosnąć. Podstawa płynnej typografii.
- min()Wybiera najmniejszą z podanych wartości. Działa jak górny limit, np. szerokość 100% rodzica, ale nie więcej niż 600px.
- max()Wybiera największą z podanych wartości. Działa jak dolny limit, np. odstęp 5% szerokości, ale nigdy mniej niż 16px.
- var()Wstawia wartość zmiennej CSS, czyli właściwości niestandardowej zapisanej jako --nazwa. Pozwala też podać wartość zapasową.
- rgb()Zapisuje kolor jako mieszankę światła czerwonego, zielonego i niebieskiego, z opcjonalną przezroczystością. Obejmuje też zapis hex.
- hsl()Zapisuje kolor przez odcień na kole barw, nasycenie i jasność. Łatwo w nim rozjaśnić, przyciemnić albo stonować kolor.
- oklch()Zapisuje kolor przez jasność, chromę i odcień w przestrzeni dopasowanej do oka. Kolory o tej samej jasności wyglądają równie jasno.
- color-mix()Miesza dwa kolory w podanych proporcjach i wybranej przestrzeni barw. Tworzy jaśniejsze, ciemniejsze i półprzezroczyste warianty.
- linear-gradient()Tworzy płynne przejście kolorów wzdłuż prostej linii. Używa się go jako obrazu, najczęściej w background lub background-image.
- radial-gradient()Tworzy przejście kolorów rozchodzące się od punktu na zewnątrz, po okręgu albo elipsie. Dobre do poświat, winiet i miękkich świateł.
- conic-gradient()Tworzy przejście kolorów dookoła punktu, jak wskazówka zegara. Rysuje wykresy kołowe, koła barw i obracające się obwódki.
- repeat()Powtarza wzór kolumn lub wierszy siatki. Z auto-fill lub auto-fit i minmax() tworzy responsywną siatkę bez media queries.
- JednostkiPrzegląd jednostek długości w CSS: od stałych pikseli, przez em i rem zależne od czcionki, po jednostki okna, kontenera i siatki.