#1 Co je zkrácená vlastnost?
Zkrácenou vlastností se rozumí vlastnost, která slučuje vícero jiných vlastností, které spolu souvisejí, do jedné, krátké. Té lze nastavit hodnoty všech jednotlivých vlastností. Pomocí zkrácených vlastností lze psát stručnější (často i čitelnější) CSS soubory; šetříte čas i energii a jste efektivnější.
Například, vlastnost padding je zkrácená vlastnost, která dokáže definovat hodnoty padding-top, padding-right, padding-bottom a padding-left.
#2 Přehled zkrácených vlastností
Zkrácené vlastnosti typicky slučují vlastnosti, které sdílí název vlastnosti se zkrácenou verzí, například font slučuje font-size, font-family a podobně. Výjimky jsou uvedeny v seznamu.
| Vlastnost | Část stylizace | Výjimka |
|---|---|---|
| all | Speciální zkrácená vlasnost, která slučuje všechny CSS vlastnosti | vše |
| animation | Vlastnosti spojené s animacemi | |
| background | Vlastnosti spojené s pozadím | |
| border | Okraje prvku | |
| border-block-end | Konečný okraj blokového prvku | |
| border-block-start | Počátení okraj blokového prvku | |
| border-bottom | Dolní okraj prvku | |
| border-color | Barva okraje prvku | |
| border-image | Obrázek okraje prvku | |
| border-inline-end | Konečný okraj řádkového prvku | |
| border-inline-start | Počáteční okraj řádkového prvku | |
| border-left | Levý okraj prvku | |
| border-radius | Zaoblení rohů | sdružuje 4 rohy prvku |
| border-right | Pravý okraj prvku | |
| border-style | Stylizace okrajů | sdružuje 4 strany prvku |
| border-top | Horní okraj prvku | |
| border-width | Stylizace tloušťky okrajů | sdružuje 4 strany prvku |
| column-rule | Stylizace pravidelných sloupců | |
| columns | Stylizace sloupců | |
| container | Stylizace query kontejneru | |
| contain-intrinsic-size | Stylizace velikosti pro responzivitu | sloučení contain-intrinsic-width a contain-intrinsic-height |
| flex | Stylizace flexboxu | |
| flex-flow | Stylizace směru a zalamování flexboxu | flex-direction a flex-wrap |
| font | Stylizace fontu | font-* a line-height |
| font-synthesis | Stylizace specializace fontu | |
| font-variant | Stylizace varianty fontu | |
| gap | Stylizace mezery mezi prvky | column-gap a row-gap |
| grid | Stylizace rozložení typu grid | |
| grid-area | Obsazení mřížky prvkem v rozložení grid | grid-row-start, grid-column-start, grid-row-end a grid-column-end |
| grid-column | Stylizace sloupců mřížky | |
| grid-row | Stylizace řádků mřížky | |
| grid-template | Stylizace sloupců a řádků mřížky | |
| inset | Pozice prvku | top, right, bottom a left |
| list-style | Typ odrážky v seznamu | |
| margin | Vnější odsazení | |
| mask | Částečné nebo úplné skrývání obrázku | |
| offset | Nastavení směru animace | |
| outline | Nastavení označení při fokusu | |
| overflow | Stylizace, pokud je obsah prvku větší než prvek | |
| padding | Vniřní odsazení | |
| place-content | Zarovnání obsahu blokového i řádkového prvku | align-content a justify-content |
| place-items | Zarovnání blokového i řádkového prvku | align-items a justify-items |
| place-self | Zarovnání samotného blokového i řádkového prvku | align-self a justify-seld |
| scroll-margin | Dělení vnějšího odsazení při scrollování mezi prvky | |
| scroll-padding | Dělení vniřního odsazení při scrollování mezi prvky | |
| scroll-timeline | Stylizace scrollování | |
| text-decoration | Stylizace textu | |
| text-emphasis | Stylizace emočního textu | |
| transition | Stylizace transformace prvku |