Táto téma je prázdna.

Zobrazuje sa 1 príspevok (z celkového počtu 1)

Autor

Príspevky

12. januára 2026 o 12:57 #186

Odin

Účastník

Základy CSS (Cascading Style Sheets)

1. Čo je CSS?

CSS (Cascading Style Sheets) je jazyk na štýlovanie (vzhľad) HTML dokumentov. Pomocou neho určíte:

farby, písma, veľkosti textu
rozloženie (layout) – kde sa bloky nachádzajú na stránke
reakciu na rôzne zariadenia (responsívny dizajn)

Prečo sa volá “cascading”?
Štýly môžu pochádzať z viacerých zdrojov (vstavaný štýl, interný <style> blok, externý súbor). Ak sa pravidlá prekrývajú, rozhoduje kaskáda – priority a špecifickosť určuje, ktoré pravidlo má prevážiť.

2. Ako prepojiť CSS s HTML

2.1 Externý súbor

<link rel="stylesheet" href="style.css">

style.css je bežný textový súbor s príponou .css.

2.2 Interný štýl (v hlavičke)

<style>
  body { background:#f5f5f5; }
</style>

2.3 Inline štýl (priamo v elemente) – nedoporučuje sa

<p style="color:red;">Text</p>

3. Základná štruktúra CSS pravidla

selector { property: value; property2: value2; }

selector – určuje, na ktoré HTML elementy sa pravidlo aplikuje
property – názov vlastnosti (napr. color, margin)
value – hodnota vlastnosti (napr. red, 10px)

Príklad

h1 {
    color: #2c3e50;      /* farba textu */
    font-size: 32px;      /* veľkosť písma */
    margin-bottom: 20px; /* spodný okraj */
}

4. Typy selectorov

Typ selectoru	Syntax	Príklad	Popis
Element (tag)	`p`	`p {margin:0;}`	Všetky `<p>` elementy
Class	`.meno-triedy`	`.button {padding:10px;}`	Všetky elementy s `class="button"`
ID	`#identifikátor`	`#header {background:#fff;}`	Jediný element s `id="header"`
Atribút	`[atribút]` alebo `[atribút="hodnota"]`	`input[type="text"] {width:200px;}`	Podľa atribútu
Descendant	`rodič potomok`	`nav a {color:#333;}`	Všetky `<a>` vnútri `<nav>`
Child	`rodič > potomok`	`ul > li {list-style:none;}`	Priamo podriadené `<li>`
Pseudo‑class	`:hover`, `:first-child`	`a:hover {text-decoration:underline;}`	Stav elementu
Pseudo‑element	`::before`, `::after`	`p::first-letter {font-size:200%;}`	Časť elementu
Group	`selector1, selector2`	`h1, h2, h3 {margin:0;}`	Viacero selektorov naraz

5. Kaskáda a špecifickosť

5.1 Poradie zdrojov

User‑agent (prehliadač – predvolené štýly)
User style sheets (užívateľské nastavenia)
Author style sheets
- Inline štýl (najvyššia priorita v tejto úrovni)
- Externé/Interné štýly

5.2 Špecifickosť (specificity)

Špecifickosť sa počíta ako trojka (a,b,c):

a – inline (style=) → 1 alebo 0
b – počet ID selectorov
c – počet class, atribút a pseudo‑class selectorov
d – počet element a pseudo‑element selectorov

Príklad:

/* a=0, b=1, c=0, d=0 */   #menu { … }          → (0,1,0,0)
/* a=0, b=0, c=1, d=1 */   .nav a { … }        → (0,0,1,1)
/* a=1, b=0, c=0, d=0 */   style="…" (inline)  → (1,0,0,0)

Vyššia hodnota v ľavom stĺpci prevažuje.

5.3 `!important`

Pridanie !important k vlastnosti prekona všetky ostatné pravidlá, okrem iných !important s vyššou špecifickosťou. Používať opatrne – znižuje čitateľnosť a udržiavateľnosť kódu.

6. Box model (model rámčekov)

Každý blokový alebo inline‑block element je obdĺžnik pozostávajúci z:

+---------------------------+
| margin (vonkajšia medzera)|
|  +---------------------+ |
|  | border (okraj)      | |
|  |  +---------------+  | |
|  |  | padding (vnú) |  | |
|  |  |  +-----------+|  | |
|  |  |  | content   ||  | |
|  |  |  +-----------+|  | |
|  |  +---------------+  | |
|  +---------------------+ |
+---------------------------+

content – samotná hodnota (text, obrázok…)
padding – vnútorná medzera okolo obsahu
border – okraj (šírka, štýl, farba)
margin – vonkajšia medzera medzi elementmi

Zmena výpočtu šírky / výšky

/* predvolené – content‑box */
.box { width:200px; padding:20px; border:5px solid; margin:10px; }

/* box‑sizing: border-box → šírka zahrňuje padding a border */
.box { box-sizing:border-box; }

7. Základné vlastnosti a hodnoty

Skupina	Príklady vlastností	Tipy
Typografia	`font-family`, `font-size`, `font-weight`, `line-height`, `text-align`, `text-decoration`	Používajte web‑safe fonty alebo Google Fonts
Farby	`color`, `background-color`, `background-image`, `opacity`	Hex (`#ff6600`), RGB (`rgb(255,102,0)`), HSL (`hsl(30,100%,50%)`)
Rozmiestnenie	`margin`, `padding`, `border`, `width`, `height`, `max-width`, `min-height`	Skúste box‑sizing:border-box pre jednoduchší výpočet
Zobrazenie	`display` (`block`, `inline`, `inline-block`, `flex`, `grid`, `none`), `visibility`, `overflow`	Flex a Grid sú moderné riešenia pre layout
Pozícia	`position` (`static`, `relative`, `absolute`, `fixed`, `sticky`), `top/right/bottom/left`, `z-index`	`position:sticky` je skvelý pre “prilepené” hlavičky
Flexbox	`display:flex`, `flex-direction`, `justify-content`, `align-items`, `gap`	Rýchle 1‑rozmerné rozloženie
Grid	`display:grid`, `grid-template-columns`, `grid-template-rows`, `grid-area`, `gap`	Pre 2‑rozmerné rozloženie s presnou kontrolou
Prechody a animácie	`transition`, `animation`, `transform` (`rotate`, `scale`, `translate`)	Používajte `will-change` pre výkon

8. Flexbox – rýchly návod

.container {
    display: flex;                /* alebo inline-flex */
    flex-direction: row;          /* row (default) alebo column */
    justify-content: space-between; /* horizontálne zarovnanie */
    align-items: center;          /* vertikálne zarovnanie */
    gap: 1rem;                    /* medzera medzi položkami */
}
.item {
    flex: 1 1 200px;  /* grow | shrink | basis */
}

Typické úlohy

Úloha	Flex nastavenie
Rovnomerné rozdelenie	`flex: 1;` pre všetky položky
Stredové zarovnanie	`justify-content:center; align-items:center;`
Vertikálny stack	`flex-direction:column;`

9. CSS Grid – rýchly návod

.grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr); /* 12 rovnakých stĺpcov */
    grid-template-rows: auto;
    gap: 20px;
}
.header { grid-column: 1 / -1; }          /* celá šírka */
.sidebar { grid-column: 1 / 4; }          /* 1‑3 */
.main   { grid-column: 4 / -1; }          /* 4‑12 */
.footer { grid-column: 1 / -1; }

Základné pojmy

grid line – číselná (alebo pomenovaná) čiara, ktorou sú definované stĺpce/riadky
grid cell – jedno políčko (priesečník riadka a stĺpca)
grid area – väčšia plocha (napr. grid-column: 2 / 5;)

10. Responsívny dizajn

Media Queries

/* Mobil – max 480px */
@media (max-width: 480px) {
    .nav { flex-direction: column; }
}

/* Tablet – 481‑768px */
@media (min-width: 481px) and (max-width: 768px) {
    .grid { grid-template-columns: repeat(6, 1fr); }
}

/* Desktop – 769px a viac */
@media (min-width: 769px) {
    .grid { grid-template-columns: repeat(12, 1fr); }
}

Mobil‑prvý prístup (mobile‑first)

Štýly pre základné (najmenšie) zariadenia píšte bez media query.
Pre väčšie obrazovky používajte @media (min-width: …) – tak sa načítavajú len keď je to potrebné.

11. Praktické tipy a dobré praktiky

Tip	Prečo
Používajte logické názvy tried (`.btn-primary`, `.card-header`)	Zvyšuje čitateľnosť a údržbu
Rozdeľujte CSS do modulov (`base.css`, `layout.css`, `components/*.css`)	Ľahšie organizácia a caching
Minifikujte a kombinujte (`style.min.css`)	Rýchlejšie načítanie
Vyhnite sa zbytočnému `!important`	Udržateľnosť kódu
Testujte v rôznych prehliadačoch (Chrome, Firefox, Edge, Safari)	Zabezpečíte funkčnosť pre všetkých
Používajte moderné nástroje (PostCSS, SASS/SCSS, Tailwind)	Skracuje písanie a umožňuje pokročilé funkcie
Píšte fallbacky (napr. `background: #ff6600; background: linear-gradient(...);`)	Staršie prehliadače stále fungujú
Kontrolujte prístupnosť (`color-contrast`, `:focus` štýly)	Zlepšuje UX pre všetkých používateľov

12. Mini‑príklad – kompletná HTML + CSS stránka

<!DOCTYPE html>
<html lang="sk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ukážka CSS</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header class="site-header">
        <h1>Moja stránka</h1>
        <nav class="nav">
            <a href="#">Domov</a>
            <a href="#">O nás</a>
            <a href="#">Kontakt</a>
        </nav>
    </header>

    <main class="grid">
        <section class="card">
            <h2>Nadpis</h2>
            <p>Obsah karty.</p>
        </section>
        <section class="card">
            <h2>Ďalšia karta</h2>
            <p>Viac textu.</p>
        </section>
    </main>

    <footer class="site-footer">
        <p>&copy; 2026 Moja firma</p>
    </footer>
</body>
</html>

style.css

/* 1. Reset */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* 2. Základné štýly */
body {
    font-family: system-ui, sans-serif;
    line-height: 1.6;
    background:#f9f9f9;
    color:#333;
}

/* 3. Header */
.site-header {
    background:#2c3e50;
    color:#fff;
    padding:1rem;
}
.site-header h1 { margin-bottom:.5rem; }
.nav a {
    color:#fff;
    margin-right:.8rem;
    text-decoration:none;
}
.nav a:hover { text-decoration:underline; }

/* 4. Grid layout */
.grid {
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap:1.5rem;
    padding:2rem;
}

/* 5. Karty */
.card {
    background:#fff;
    border:1px solid #ddd;
    border-radius:6px;
    padding:1rem;
    box-shadow:0 2px 4px rgba(0,0,0,.1);
}
.card h2 { margin-bottom:.5rem; }

/* 6. Footer */
.site-footer {
    text-align:center;
    padding:1rem;
    background:#2c3e50;
    color:#fff;
}

/* 7. Responsívny – mobilné menu */
@media (max-width: 480px) {
    .nav { display:flex; flex-direction:column; }
    .nav a { margin: .4rem 0; }
}

13. Ďalšie zdroje na prehĺbenie

Typ	Odkaz
Oficiálna dokumentácia	https://developer.mozilla.org/sk/docs/Web/CSS
Interaktívny kurz	https://www.codecademy.com/learn/learn-css
CSS Tricks (blog & príklady)	https://css-tricks.com/
Flexbox Guide	https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Grid Guide	https://css-tricks.com/snippets/css/complete-guide-grid/
W3Schools – CSS Reference	https://www.w3schools.com/css/

Zhrnutie

Selektory – určujú, čo štýlujete.
Kaskáda a špecifickosť – rozhodujú, ktoré pravidlo zvíťazí.
Box model – základ pre rozmery a rozmiestnenie.
Flexbox & Grid – moderné nástroje pre layout.
Responsívny dizajn – media queries a mobil‑prvý prístup.

Autor

Príspevky