Selektory | Funkcje | Wsparcie przeglądarek | 🅰 = animowalność
/* ... */ | Definiuje komentarz w CSS | |
align-content | Określa wyrównanie między liniami w elastycznym (flexible) kontenerze, gdy elementy nie zajmują jego całej dostępnej przestrzeni. | |
align-items | Określa wyrównanie elementów w elastycznym kontenerze. | |
align-self | Określa wyrównanie wybranych elementów w elastycznym kontenerze. | |
all | Resetuje wszystkie właściwości (oprócz unicode-bidi i direction) | |
ANIMATION | ||
animation | Skrót dla wszystkich własności animacji (animation-*) | |
animation-delay | Określa opóźnienie rozpoczęcia animacji | |
animation-direction | Określa kierunek animacji - czy należy odtwarzać do przodu, do tyłu, czy w naprzemiennych cyklach | |
animation-duration | Określa czas trwania animacji do ukończenia jednego cyklu | |
animation-fill-mode | Określa styl elementu, gdy animacja nie jest odtwarzana (przed jej uruchomieniem, po zakończeniu lub w obu przypadkach) | |
animation-iteration-count | Określa liczbę odtworzeń animacji | |
animation-name | Określa nazwę animacji dla @keyframes | |
animation-play-state | Określa, czy animacja jest uruchomiona, czy wstrzymana | |
animation-timing-function | Określa krzywą prędkości animacji |
backface-visibility | Określa czy tylna ściana elementu ma być widoczna czy nie gdy jest obserwowana | |
BACKGROUND | ||
background | 🅰 | Skrót właściwości tła (background-*) |
background-attachment | Określa, czy obraz tła ma być przewijany z resztą strony, czy też ma być nieruchomy | |
background-blend-mode | Określa tryb mieszania każdej warstwy tła (kolor/obraz) | |
background-clip | Określa, jak daleko tło (kolor lub obraz) powinno się rozciągać w obrębie elementu | |
background-color | 🅰 | Określa kolor tła elementu |
background-image | Określa jeden lub więcej obrazów tła dla elementu | |
background-origin | Określa pozycję początkową obrazu tła | |
background-position | 🅰 | Określa pozycję obrazu tła |
background-repeat | Określa, czy/jak obraz w tle będzie powtarzany | |
background-size | 🅰 | Określa rozmiar obrazów tła |
BORDER | ||
border | 🅰 | Skrót właściwości obramowania - szerokości, stylu i koloru (border-width, border-style i border-color) |
border-color | 🅰 | Ustawia kolor wszystkich czterech krawędzi obramowania |
border-style | Ustawia styl krawędzi obramowania (wszystkich czterech) | |
border-width | 🅰 | Ustawia szerokość wszystkich czterech krawędzi obramowania |
border-bottom | 🅰 | Skrót właściwości dla dolnej krawędzi obramowania - border-bottom-width, border-bottom-style i border-bottom-color |
border-bottom-color | 🅰 | Ustawia kolor dolnej krawędzi obramowania |
border-bottom-style | Ustawia styl dolnej krawędzi obramowania | |
border-bottom-width | 🅰 | Ustawia szerokość dolnej krawędzi obramowania |
border-left | 🅰 | Skrót właściwości dla lewego obramowaniaborder-left-* |
border-left-color | 🅰 | Ustawia kolor lewego obramowania |
border-left-style | Ustawia styl lewej krawędzi obramowania | |
border-left-width | 🅰 | Ustawia szerokość lewej krawędzi obramowania |
border-right | 🅰 | Skrót właściwości dla prawej krawędzi obramowaniaborder-right-* |
border-right-color | 🅰 | Ustawia kolor prawej krawędzi obramowania |
border-right-style | Ustawia styl prawej krawędzi obramowania | |
border-right-width | 🅰 | Ustawia szerokość prawej krawędzi obramowania |
border-top | 🅰 | Skrót właściwości border-top-width, border-top-style i border-top-color |
border-top-color | 🅰 | Ustawia kolor górnej krawędzi obramowania |
border-top-style | Ustawia styl górnej krawędzi obramowania | |
border-top-width | 🅰 | Ustawia szerokość górnej krawędzi obramowania |
border-image | Skrót do własności ustawień obrazu obramowania (border-image-*) | |
border-image-outset | Określa wielkość, o jaką obszar obrazu obramowania wykracza poza pole obramowania | |
border-image-repeat | Określa, czy obraz obramowania powinien być rozciągany (domyślnie), zaokrąglany czy powtarzany | |
border-image-slice | Określa sposób wycinania obrazu obramowania | |
border-image-source | Określa ścieżkę do obrazu, który ma być używany jako obramowanie | |
border-image-width | Określa szerokość obrazu obramowania | |
border-radius | Skrót właściwości dla 4 promieni (zaokrągleń) narożników obramowania border-*-*-radius | |
border-bottom-left-radius | 🅰 | Definiuje promień zaokrąglenia lewego dolnego rogu obramowania |
border-bottom-right-radius | 🅰 | Definiuje promień zaokrągleni prawego dolnego rogu obramowania |
border-top-left-radius | 🅰 | Definiuje promień górnego lewego rogu obramowania |
border-top-right-radius | 🅰 | Definiuje promień górnego prawego rogu obramowania |
border-collapse | Określa, czy obramowania w tabeli powinny zostać zwinięte w jedną ramkę, czy też rozdzielone (domyślnie) | |
border-spacing | 🅰 | Ustawia odległość między krawędziami obramowań sąsiednich komórek (tylko gdy nie zmieniono border-collapse: separate na :collapse) |
bottom | 🅰 | Ustawia pozycję elementów od dołu ich elementu nadrzędnego |
box-decoration-break | Ustawia zachowanie tła i obramowania elementu przy podziale strony lub, w przypadku elementów wbudowanych (in-line), przy podziale linii | |
box-shadow | 🅰 | Dołącza jeden lub więcej cieni do elementu |
box-sizing | Definiuje sposób obliczania szerokości i wysokości elementu: czy powinny one zawierać wypełnienie (padding) i obramowanie, czy nie | |
break-after | Określa zachowanie podziału strony, kolumny lub regionu (page-, column-, region-) po wygenerowanym pudełka | |
break-before | Określa zachowanie podziału strony, kolumny lub regionu przed wygenerowanym pudełkiem | |
break-inside | Określa zachowanie podziału strony, kolumny lub regionu w wygenerowanym pudełku |
caption-side | Określa położenie podpisu tabeli | |
caret-color | Określa kolor karetki kursora w danych wejściowych, obszarach tekstowych lub w jakimkolwiek edytowalnym elemencie | |
@charset | Określa kodowanie znaków używane w arkuszu stylów | |
clear | Określa, z której strony elementu elementy pływające nie mogą się unosić | |
clip | 🅰 | Określa przycięcie elementu pozycjonowanego absolutnie. (Przestarzałe! zalecane: clip-path) |
clip-path | 🅰- | Pozwala przyciąć element do podstawowego kształtu lub źródła SVG. Animowalne 🅰 dla basic-shape. |
color | 🅰 | Ustawia kolor testu |
COLUMN(s) | ||
columns | 🅰 | Skrót właściwości szerokości i liczby kolumn (column-width i column-count) |
column-count | 🅰 | Określa liczbę kolumn, na które należy podzielić element |
column-width | 🅰 | Określa szerokość kolumny |
column-fill | Określa sposób wypełniania kolumn (zrównoważony lub nie) | |
column-gap | 🅰 | Określa odstęp między kolumnami |
column-rule | 🅰 | Skrót właściwości column-rule-* |
column-rule-color | 🅰 | Określa kolor pionowej linii rozdzielającej kolumny |
column-rule-style | Określa styl pionowej linii między kolumnami | |
column-rule-width | 🅰 | Określa szerokość pionowej linii między kolumnami |
column-span | Określa ile kolumn powinien obejmować dany element (rozpiętość) | |
content | Używany z pseudoelementami :before i :after do wstawiania generowanej treści | |
counter-increment | Zwiększa lub zmniejsza wartość jednego lub więcej liczników CSS | |
counter-reset | Tworzy lub resetuje jeden lub więcej liczników CSS | |
cursor | Określa wygląd kursora myszy wyświetlany po wskazaniu elementu | |
direction | Określa kierunek tekstu/pisania tekstu | |
display | Określa sposób wyświetlania określonego elementu HTML | |
empty-cells | Określa, czy ramki i tło mają być wyświetlane w pustych komórkach w tabeli |
🛠️ filter | 🅰 | Definiuje efekty (np. Rozmycie lub przesunięcie koloru) na elemencie przed jego wyświetleniem |
flex | 🅰 | Skrót właściwości flex-grow, flex-shrink i flex-basis |
flex-basis | 🅰 | Określa początkową długość elementu elastycznego |
flex-grow | 🅰 | Określa ile razy element wzrośnie w stosunku do reszty (elementów elastycznych) |
flex-shrink | 🅰 | Określa sposób kurczenia się elementu w stosunku do reszty |
flex-flow | Skrót właściwości flex-direction i flex-wrap | |
flex-direction | Określa kierunek elementów elastycznych | |
flex-wrap | Określa, czy elementy elastyczne powinny się zawijać, czy nie | |
float | Określa, czy i w jaki sposób element powinien się unosić (pływać) | |
FONT | ||
@font-face | Reguła zezwalająca witrynom na pobieranie i używanie czcionek innych niż „bezpieczne dla sieci” | font | 🅰 | Skrót właściwości font-style, font-variant, font-weight, font-size/line-height, font-family |
font-family | Określa rodzinę czcionek dla tekstu | |
font-size | 🅰 | Określa rozmiar czcionki tekstu |
font-style | Określa styl czcionki dla tekstu | |
font-variant | Określa, czy tekst powinien być wyświetlany małą czcionką | |
font-weight | 🅰 | Określa wagę (grubość) czcionki |
font-feature-settings | Umożliwia kontrolę nad zaawansowanymi funkcjami typograficznymi czcionek OpenType | |
font-kerning | Kontroluje wykorzystanie informacji o kerningu (sposób rozmieszczania liter) | |
font-size-adjust | 🅰 | Kontrola rozmiaru czcionki poprzez 'wartość współczynnika kształtu', gdy pierwsza wybrana czcionka nie jest dostępna (na dziś tylko w Firefox) |
font-stretch | 🅰 | Wybiera normal, condensed lub expanded face z rodziny czcionek |
font-variant-caps | Kontroluje użycie alternatywnych glifów dla kapitalików | |
font-synthesis | Kontroluje, które brakujące kroje pisma (pogrubienie lub kursywa) mogą zostać zsyntetyzowane przez przeglądarkę | |
font-variant-alternates | Kontroluje użycie alternatywnych glifów powiązanych z alternatywnymi nazwami zdefiniowanymi w @font-feature-values | |
font-language-override | Kontroluje użycie specyficznych dla języka glifów w kroju pisma | |
@font-feature-values | Umożliwia autorom używanie wspólnej nazwy w font-variant-alternate dla funkcji aktywowanej inaczej w OpenType | |
font-variant-east-asian | Kontroluje użycie alternatywnych glifów w skryptach wschodnioazjatyckich (np. Japońskim i chińskim) | |
font-variant-ligatures | Określa, które ligatury i formy kontekstowe są używane w treści tekstowej elementów, których dotyczą | |
font-variant-numeric | Kontroluje użycie alternatywnych glifów dla liczb, ułamków i znaczników porządkowych | |
font-variant-position | Kontroluje użycie alternatywnych glifów o mniejszych rozmiarach umieszczonych jako indeks górny lub dolny względem linii bazowej czcionki |
grid | 🅰 | Skrót właściwości grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns i grid-auto-flow |
grid-area | 🅰 | Albo przypisuje nazwę elementu siatki albo jest Skrótem właściwości grid-row-start, grid-column-start, grid-row-end i grid-column-end |
grid-auto-columns | 🅰 | Określa domyślny rozmiar kolumny |
grid-auto-flow | 🅰 | Określa automatyczny sposób wstawiania elementów do siatki |
grid-auto-rows | 🅰 | Określa domyślny rozmiar wiersza |
grid-column | 🅰 | Skrót właściwości grid-column-start i grid-column-end |
grid-column-end | 🅰 | Określa, gdzie zakończyć element siatki (kolumnę) |
grid-column-gap | 🅰 | Określa rozmiar odstępu między kolumnami w układzie siatki |
grid-column-start | 🅰 | Określa od której kolumny zacząć element siatki |
grid-gap | 🅰 | Skrót właściwości grid-row-gap i grid-column-gap |
grid-row | 🅰 | Skrót właściwości grid-row-start i grid-row-end |
grid-row-end | 🅰 | Określa, gdzie zakończyć element siatki (wiersz) |
grid-row-gap | 🅰 | Określa rozmiar odstępu między wierszami |
grid-row-start | 🅰 | Określa od którego wiersza zacząć element siatki |
grid-template | 🅰 | Skrót właściwości grid-template-rows, grid-template-columns i grid-areas |
grid-template-areas | 🅰 | Określa sposób wyświetlania kolumn i wierszy przy użyciu nazwanych elementów siatki |
grid-template-columns | 🅰 | Określa rozmiar kolumn i ich liczbę w układzie siatki |
grid-template-rows | 🅰 | Określa rozmiar wierszy w układzie siatki |
hanging-punctuation | Określa, czy znak interpunkcyjny może być umieszczony poza polem wiersza | |
height | 🅰 | Ustawia wysokość elementu |
hyphens | Ustawia sposób podziału słów, aby poprawić układ akapitów | |
image-rendering | Wskazuje przeglądarce, które aspekty obrazu są najważniejsze do zachowania podczas skalowania obrazu | |
@import | Umożliwia importowanie arkusza stylów do innego arkusza stylów | |
isolation | Określa, czy element musi utworzyć nową zawartość stosu (przydatne przy mixowaniu obrazów) | |
justify-content | Określa wyrównanie między elementami wewnątrz elastycznego pojemnika, gdy elementy nie zajmują całej dostępnej przestrzeni | |
@keyframes | Określa kod animacji (z listą klatek kluczowych). |
left | 🅰 | Określa lewą pozycję ustawienia pozycjonowanego elementu |
letter-spacing | 🅰 | Zwiększa lub zmniejsza odstęp między znakami w tekście |
line-break | Określa sposób przerywania linii tekstu chińskiego, japońskiego lub koreańskiego (CJK). | |
line-height | 🅰 | Określa wysokość wiersza (interlinię) |
list-style | Skrót właściwości listy (wszystkich - typ, pozycja, obraz) | |
list-style-image | Określa obraz jako znacznik elementu listy | |
list-style-position | Określa pozycję znaczników pozycji na liście (w punktowaniu) | |
list-style-type | Określa typ znacznika pozycji listy |
🛠️ @media | Ustawia reguły stylu dla różnych mediów - typów/urządzeń/rozmiarów | |
margin | 🅰 | Skrót do ustawień wszystkich marginesów elementu |
margin-bottom | 🅰 | Ustawia dolny margines elementu |
margin-left | 🅰 | Ustawia lewy margines elementu |
margin-right | 🅰 | Ustawia prawy margines elementu |
margin-top | 🅰 | Ustawia górny margines elementu |
max-height | 🅰 | Ustawia maksymalną wysokość elementu |
max-width | 🅰 | Ustawia maksymalną szerokość elementu |
min-height | 🅰 | Ustawia minimalną wysokość elementu |
min-width | 🅰 | Ustawia minimalną szerokość elementu |
mix-blend-mode | Określa, w jaki sposób zawartość elementu powinna się mieszać (miksować) z tłem nadrzędnym |
object-fit | Określa sposób, w jaki zawartość img i video powinna być dopasowana do pudełka | |
object-position | 🅰 | Określa wyrównanie elementów img i video w jego pudełku |
opacity | 🅰 | Ustawia poziom krycia (nieprzeźroczystości) dla elementu |
order | 🅰 | Ustawia kolejność elementu elastycznego względem pozostałych |
orphans (sieroty) | Ustawia minimalną liczbę wierszy, które należy pozostawić na dole strony, gdy dojdzie do podziału strony w elemencie | |
outline | 🅰 | Skrót właściwości outline-width, outline-style i outline-color |
outline-style | Określa styl konturu | |
outline-width | 🅰 | Ustawia szerokość konturu |
outline-color | 🅰 | Ustawia kolor konturu |
outline-offset | 🅰 | Odsuwa kontur i rysuje go poza krawędzią ramki |
overflow | Określa, co ma się stać, gdy zawartość przepełnia pole elementu (ciąć, ukrywać, paski przewijania). | |
overflow-x | Określa, co zrobić gdy zawartość przepełni obszar krawędzi pola elementu z lewej / prawej strony. | |
overflow-y | Określa, co zrobić gdy zawartość przepełni obszar krawędzi pola elementu z góry / na dole strony. | |
overflow-wrap | Określa, czy przeglądarka może przerywać wiersze w słowach, aby zapobiec przepełnieniu |
padding | 🅰 | Skrót wszystkich właściwości padding-* (wyściółka, wypełnienie, margines wewnętrzny) |
padding-top | 🅰 | Ustawia górne wypełnienie elementu |
padding-right | 🅰 | Ustawia prawe wypełnienie elementu |
padding-bottom | 🅰 | Ustawia dolne wypełnienie elementu |
padding-left | 🅰 | Ustawia lewe wypełnienie elementu |
🛠️ page-break-after | Ustawia zachowanie podziału strony po elemencie | |
🛠️ page-break-before | Ustawia zachowanie podziału strony przed elementem | |
🛠️ page-break-inside | Ustawia zachowanie podziału strony wewnątrz elementu | |
perspective | 🅰 | Daje elementowi pozycjonowanemu 3D trochę perspektywy |
perspective-origin | 🅰 | Określa, w której pozycji użytkownik patrzy na element pozycjonowany 3D |
pointer-events | Określa, czy element reaguje na zdarzenia wskaźnika | |
position | Określa typ metody pozycjonowania elementu (statyczny, względny, bezwzględny lub stały) |
quotes | Ustawia typ znaków cudzysłowu dla osadzonych cytatów | |
resize | Określa, czy (i jak) można zmieniać rozmiar elementu przez użytkownika | |
right | 🅰 | Określa prawą pozycję elementu pozycjonowanego |
scroll-behavior | Określa, czy zamiast prostego skoku animować płynnie pozycję przewijania w przewijanym polu |
tab-size | Określa szerokość znaku tabulacji | |
table-layout | Definiuje algorytm używany do układania komórek tabeli, wierszy i kolumn | |
TEXT | ||
text-align | Określa wyrównanie tekstu w poziomie | |
text-align-last | Opisuje sposób wyrównania ostatniego wiersza bloku lub linii tuż przed wymuszonym podziałem linii, gdy wyrównanie tekstu jest „justowane” | |
text-combine-upright | Określa kombinację wielu znaków w przestrzeni pojedynczego znaku | |
text-decoration | Określa dekorację tekstu | |
text-decoration-line | Określa umiejscowienie linii dekoracji tekstu | |
text-decoration-style | Określa styl linii dekoracyjnej tekstu | |
text-decoration-color | 🅰 | Określa kolor linii dekoracyjnej tekstu |
text-indent | 🅰 | Określa wcięcie pierwszego wiersza w bloku tekstowym |
text-justify | Określa metodę justowania tekstu | |
text-orientation | Określa orientację tekstu w linii | |
text-overflow | Określa, co powinno się stać, gdy tekst przepełni element zawierający | |
text-shadow | 🅰 | Dodaje cień do tekstu |
text-transform | Kontroluje wielkie litery tekstu | |
text-underline-position | Określa pozycję podkreślenia ustawioną za pomocą właściwości text-decoration | |
  | ||
top | 🅰 | Określa górną pozycję elementu pozycjonowanego |
transform | 🅰 | Stosuje transformację 2D lub 3D do elementu |
transform-origin | 🅰 | Umożliwia zmianę położenia przekształconych elementów |
transform-style | Określa sposób renderowania elementów zagnieżdżonych w przestrzeni 3D | |
transition | Skrót wszystkich właściwości transition-* | |
transition-delay | Określa, kiedy rozpocznie się efekt przejścia (opóźnienie) | |
transition-duration | Określa, ile sekund lub milisekund zajmuje przejście efektu | |
transition-property | Określa nazwę właściwości CSS, dla której służy efekt przejścia | |
transition-timing-function | Określa krzywą prędkości efektu przejścia |
unicode-bidi | Używany razem z właściwością direction do ustawiania lub zwracania, czy tekst powinien zostać zastąpiony w celu obsługi wielu języków w tym samym dokumencie | |
user-select | Określa, czy można wybrać tekst elementu | |
vertical-align | 🅰 | Określa pionowe wyrównanie elementów wbudowanych (inline) lub komórek tabeli |
visibility | 🅰 | Określa, czy element jest widoczny |
white-space | Określa sposób obsługi białych znaków w elemencie | |
widows | Ustawia minimalną liczbę wierszy, które należy pozostawić u góry strony, gdy podział strony nastąpi w elemencie (wdowy) | |
width | 🅰 | Ustawia szerokość elementu |
word-break | Określa podział słów po osiągnięciu końca linii | |
word-spacing | 🅰 | Zwiększa lub zmniejsza odstęp między słowami w tekście |
word-wrap | Umożliwia łamanie długich, niepodzielnych słów i zawijanie ich do następnego wiersza | |
writing-mode |
Tryb pisania. Określa, czy wiersze tekstu mają być ułożone poziomo czy pionowo | |
z-index | 🅰 | Ustawia z-index (kolejność na stosie) elementu pozycjonowanego |