CSS jednotky, barvy, proměnné, písma a ligatury

Co jsou vlastnosti CSS

Vlastnosti CSS (CSS properties) jsou parametry, které definují, jak má prvek vypadat. Každé pravidlo má tvar vlastnost: hodnota; a každá vlastnost má vlastní pravidla, jaké hodnoty přijímá.

p {
  color: red;          /* barva textu */
  font-size: 16px;     /* velikost písma */
  margin: 1rem;        /* vnější odsazení */
}

CSS dnes obsahuje stovky vlastností, ale ovládat jich aktivně potřebuješ jen pár desítek. Důležité je rozumět, jak fungují hodnoty a jednotky, které do vlastností dosazuješ.

CSS jednotky

Jednotky určují číselné hodnoty (rozměry, velikosti písma, mezery). Dělí se na absolutní (pevně dané) a relativní (závisí na kontextu).

Absolutní jednotky

Pozor: CSS pixel není fyzický pixel. Na HiDPI displejích (Retina, OLED telefonech) odpovídá více fyzickým pixelům. Prohlížeč to řeší automaticky, ale je dobré o tom vědět při práci s image-rendering nebo <canvas>.

Relativní jednotky podle písma

em vs rem (klíčový rozdíl)

html { font-size: 16px; }

.rodic {
  font-size: 20px;
}

.rodic .dite {
  font-size: 1.5em;   /* 1.5 × 20px = 30px (závisí na rodiči) */
  margin: 1rem;       /* 1 × 16px = 16px (závisí na :root, předvídatelné) */
}

rem je předvídatelnější, protože nezávisí na vnořování. Doporučení:

• rem pro font-size, margin, padding, gap (globální mezery)
• em pro vlastnosti, které mají škálovat s textem (např. border-radius u tlačítka)
• px pro tenké okraje (border: 1px solid) a stínítka

Viewport jednotky