Lista stylów CSS

CSS (Kaskadowe Arkusze Stylów) służy do kontrolowania układu i wyglądu stron internetowych. Ta lista obejmuje najczęściej używane właściwości i selektory.

Selektory

Typ	Przykład	Opis
All	`* { }`	Dopasuj wszystkie elementy
Type	`h1 { }`	Dopasuj określony znacznik HTML
Class	`.header { }`	Dopasuj elementy z klasą header
ID	`#main { }`	Dopasuj element o identyfikatorze main
Descendant	`div p { }`	Dopasuj wszystkie p wewnątrz div
Pseudo	`a:hover { }`	Stan po najechaniu myszą

Model pudełkowy

.box {
  width: 300px;
  height: 200px;
  padding: 10px;    /* Margines wewnętrzny */
  border: 1px solid #ccc; /* Obramowanie */
  margin: 20px;     /* Margines zewnętrzny */
  box-sizing: border-box; /* Zawiera obramowanie i padding */
}

Typografia

Property	Opis	Przykład
`font-family`	Rodzina czcionek	`font-family: Arial, sans-serif;`
`font-size`	Rozmiar czcionki	`font-size: 16px;`
`font-weight`	Grubość czcionki	`font-weight: bold;`
`text-align`	Wyrównanie tekstu	`text-align: center;`
`line-height`	Wysokość linii	`line-height: 1.5;`
`color`	Kolor czcionki	`color: #333;`

Kolory i tła

Property	Opis	Przykład
`background-color`	Kolor tła	`background-color: #f0f0f0;`
`background-image`	Obraz tła	`background-image: url('bg.jpg');`
`background-size`	Rozmiar tła	`background-size: cover;`
`opacity`	Przezroczystość	`opacity: 0.8;`

Pozycjonowanie

position: static; : Domyślny układ przepływu
position: relative; : Przesunięcie względem własnej pozycji
position: absolute; : Pozycjonowanie względem najbliższego nie-statycznego przodka
position: fixed; : Pozycjonowanie względem okna przeglądarki
position: sticky; : Przyklejony podczas przewijania do określonej pozycji
z-index: 10; : Kolejność nakładania

Wyświetlanie i układ

display: block; : Element blokowy
display: inline; : Element liniowy
display: inline-block; : Element blokowo-liniowy
display: flex; : Włącz układ elastyczny (flex)
display: grid; : Włącz układ siatkowy (grid)
display: none; : Ukryj element bez zajmowania miejsca

Skrócone zapisy właściwości

margin: 10px 5px 15px 20px; (Góra Prawo Dół Lewo)
padding: 10px 5px; (Góra-Dół Lewo-Prawo)
border: 1px dashed red; (Szerokość Styl Kolor)