CSS: hlavní vlastnosti a jejich použití

Mezi běžné vlastnosti používané v rámci CSS patří například:

Některé vlastnosti (např. margin, padding, border) mohou ovlivňovat jen určitou stranu prvku. Chceme-li určit hodnoty pro různé strany, můžeme použít název vlastnosti v kombinaci s -top, -bottom, -left či -right (např. padding-top). Také lze rozepsat více hodnot ke krátkému identifikátoru vlastnosti (např. padding: 5px 10px 15px 20px – nastaví odsazení shora, zprava, zespoda a zleva, padding: 5px 10px – nastaví svislé odsazení 5px a vodorovné 10 px).

Co se týče rozměrů prvku, ve výchozím nastavení se k určenému rozměru přičítá i odsazení a rámeček (tedy např. prvek s width: 100px; padding: 10px bude široký 120 px). Tomuto chování lze předejít pomocí nastavení * {box-sizing: border-box}.

Podobu textu ovlivňují například vlastnosti:

Na způsobu zobrazení prvků se podílí např. vlastnost display. Její často užívané hodnoty jsou:

Zvláště flex a grid se uplatňují při tvorbě responzivního grafického rozvržení webů.

Mezi jednotky užívané v rámci CSS patří např. px (pixely, ve výsledku může být velikost definovaná v pixelech ovlivněna škálováním na zařízení), rem (1 rem = velikost fontu v základním elementu), % (procentní část rodičovského elementu), vw (šířka zobrazení, např. viditelné oblasti v rámci okna prohlížeče), vh (výška zobrazení). Jednotky se za hodnotu zapisují bez mezery.

Pomocí zápisu @media lze část předpisu určit pouze pro určité zařízení či způsob zobrazení:

@media (max-width: 600px) {

  p {

    font-size: 10pt;

  }

}

Kód výše definuje, že odstavce (<p>) budou mít velikost písma 10 pt při šířce obrazovky menší než 600 px.