Print this chapterPrint this chapter

Úloha 4 – Základní CSS vlastnosti v praxi

Úvod k úloze

Po pochopení principů kaskádování a specificity přichází na řadu práce s tím, co dělá stránku vizuálně atraktivní a čitelnou – tedy se samotnými CSS vlastnostmi. Zde se studenti naučí ovlivňovat barvy, písma, velikosti, okraje či vyplnění prvků. Tyto znalosti jim umožní vytvořit konzistentní design, kde mají prvky jednotný vzhled a uživatel se snadno orientuje.

Teorie a principy

  1. Barvy (color, background-color)

    • color ovlivňuje barvu textu.

    • background-color mění barvu pozadí.

    • Hodnoty lze psát jako názvy (red), hexadecimálně (#ff0000), RGB (rgb(255,0,0)) nebo HSL (hsl(0, 100%, 50%)).

  2. Písmo (font-family, font-size, font-weight, text-align)

    • font-family určuje typ písma.

    • font-size nastavuje velikost.

    • font-weight definuje tloušťku písma (normal, bold, nebo čísly).

    • text-align zarovnává text (left, center, right, justify).

  3. Okraje a vyplň (margin, padding)

    • margin = vnější odsazení prvku (mezera mezi prvky).

    • padding = vnitřní odsazení obsahu od okraje prvku.

    • Lze psát jednotlivě (margin-top, padding-left) nebo zkráceně (margin: 10px 20px;).

  4. Rámeček (border)

    • Kombinuje tloušťku, styl a barvu:

Praktické příklady kódu

Barevné nadpisy a pozadí

Nastavení písma

Okraje a vyplň

Kombinace pro konzistentní vzhled

Typické chyby / záludnosti

  • Použití pouze názvů barev – omezuje design, naučte se raději hex a RGB.

  • Nesprávné pochopení rozdílu mezi margin a padding – studenti je často zaměňují.

  • Zapomenutí fallback písma – např. font-family: "Roboto", sans-serif; je lepší než jen Roboto.

  • Nejednotné odsazení – pokud nemají jasná pravidla pro okraje a vyplně, stránka působí neuspořádaně.

  • Příliš malý kontrast mezi barvou textu a pozadí – stránka pak není čitelná.

Shrnutí

  • Barvy lze zapisovat různými formáty, nejflexibilnější je hex nebo RGB/HSL.

  • Písmo má mnoho vlastností – rodina, velikost, tloušťka, zarovnání.

  • Margin vs. padding – margin = venku, padding = uvnitř.

  • Border umožňuje orámování prvků.

  • Konzistentní použití těchto vlastností vede k jednotnému a čitelnému designu.