Box model, Flexbox, Grid, typografie, barvy, layout, animace, pseudo třídy, CSS proměnné a media queries — vše s příklady, vysvětlením a tipy.
box-sizing, width, height, padding, margin, border, outline, overflow — základní model každého elementu.
display:flex, flex-direction, justify-content, align-items, flex-wrap, gap, flex-grow, order — jednorozměrný layout.
display:grid, grid-template, grid-column, grid-row, grid-areas, auto-fill, minmax, fr — dvourozměrný layout.
font-family, font-size (rem/clamp), font-weight, line-height, letter-spacing, text-transform, text-decoration.
color, background, gradient (linear/radial/conic), opacity, filter, backdrop-filter, mix-blend-mode.
display, position (relative/absolute/fixed/sticky), z-index, float, object-fit, aspect-ratio, clip-path.
transition, animation, @keyframes, transform (translate/scale/rotate), will-change, prefers-reduced-motion.
:hover, :focus, :focus-visible, :nth-child, :not, :is, :has, ::before, ::after, ::placeholder, ::marker.
--custom-property, var(), calc(), min(), max(), clamp(), dark mode s proměnnými, CSS cascade layers.
@media, container queries, viewport jednotky (dvh/svh), responsive images, mobile-first, prefers-*.
| Selektor | Co vybere |
|---|---|
| * | Všechny elementy |
| div | Všechny <div> |
| .class | Elementy s class |
| #id | Element s id |
| div p | p uvnitř div (potomek) |
| div > p | p přímý child div |
| div + p | p hned za div (sourozenec) |
| div ~ p | Všechna p za div |
| [attr] | Má atribut attr |
| [attr="val"] | attr rovná se val |
| [attr^="val"] | attr začíná val |
| [attr$="val"] | attr končí val |
| [attr*="val"] | attr obsahuje val |
| Pseudo | Co vybere |
|---|---|
| :hover | Při najetí myší |
| :focus | Při focusu |
| :focus-visible | Focus z klávesnice |
| :active | Při klikání |
| :visited | Navštívený odkaz |
| :first-child | První child |
| :last-child | Poslední child |
| :nth-child(n) | N-tý child |
| :not(x) | Ne x |
| :is(a,b) | a nebo b |
| :where(a,b) | a nebo b (spec 0) |
| :has(x) | Obsahuje x |
| ::before / ::after | Generovaný obsah |