Přejít na cvičení:
Rozhodovačka
Přejít na téma:
CSS: hlavní vlastnosti a jejich použití
Zobrazit na celou obrazovku
Procvičujte neomezeně

Váš denní počet odpovědí je omezen. Pro navýšení limitu či přístup do svého účtu s licencí se přihlaste.

Přihlásit se
Zobrazit shrnutí tématu
MZ7
Sdílet
Zobrazit nastavení cvičení

QR kód

QR kód lze naskenovat např. mobilním telefonem a tak se dostat přímo k danému cvičení nebo sadě příkladů.

Kód / krátká adresa

Tříznakový kód lze napsat do vyhledávacího řádku, také je součástí zkrácené adresy.

Zkopírujte kliknutím.

MZ7
umime.to/MZ7

Nastavení cvičení


Pozor, nastavení je platné pouze pro toto cvičení a předmět.

umime.to/MZ7

CSS: hlavní vlastnosti a jejich použití

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

vlastnost (identifikátor vlastnosti) význam
background-color barva pozadí
background pozadí, lze společně určit např. barvu, obrázek pomocí url(…)
margin vnější odsazení (okraj)
border rámeček
padding vnitřní odsazení (okraj)
width šířka
height výška

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:

vlastnost (identifikátor vlastnosti) význam příklad hodnoty
color barva textu green
text-align zarovnání center
font-size velikost textu 12pt
font-weight tloušťka řezu bold
font-style přepíná např. běžný řez a kurzívu italic
font-family nastavení fontu (rodiny písma) sans-serif

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

hodnota význam
block zobrazí se jako blok, může mít definované rozměry
inline zobrazí se v rámci řádku
inline-block zobrazí se v rámci řádku, může mít definované rozměry
flex uspořádá prvky vedle sebe nad sebe s mnoha možnostmi nastavení
grid uspořádá prvky do mřížky s mnoha možnostmi nastavení

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.

Zavřít

CSS: hlavní vlastnosti a jejich použití (střední)

Vyřešeno:

NAPIŠTE NÁM

Děkujeme za vaši zprávu, byla úspěšně odeslána.

Napište nám

Nevíte si rady?

Nejprve se prosím podívejte na časté dotazy:

Čeho se zpráva týká?

Vzkaz Obsah Ovládání Přihlášení Licence