Keď chceme spraviť responzívne obrázky, musíme riešiť 3 veci naraz:
-aby obrázok nepretiekol z kontajnera (mobil vs desktop)
-aby stránka neskákala pri načítaní (rezervovať miesto)
-aby sa obrázky nenačítavali zbytočne (lazy loading + správna veľkosť)
<div class="ukazka"> <img src="https://picsum.photos/id/237/600/400" alt="obrázok čierneho psa" width="600" height="400" loading="lazy" decoding="async" > </div> .ukazka { border: 1px solid #a50000; max-width: 800px; /* len aby bolo vidno, že kontajner môže byť užší */ margin: 2rem auto; } /* 1) ZÁKLAD: obrázok sa prispôsobí šírke kontajnera / .ukazka img { display: block; /* odstráni "medzeru pod obrázkom" (baseline) * / max-width: 100%; /* nikdy nebude širší než rodič * / height: auto; /* zachová pomer strán */ } 1) Prečo obrázky často “rozbijú” mobil? Lebo majú natvrdo šírku (alebo prídu veľké) a kontajner je menší. Riešenie je vždy toto duo: max-width: 100% , height: auto To znamená: keď je kontajner úzky (mobil), obrázok sa zmenší, keď je kontajner široký, obrázok môže byť vo svojej prirodzenej veľkosti, ale nepretečie. 2) “Pripraviť miesto” pre obrázok ešte pred načítaním (aby stránka neskákala) To je presne ten moment, keď sa načíta obrázok a celý text pod ním odskočí. Najjednoduchšie a najlepšie riešenie: dať obrázku width a height atribúty . <img src="..." width="600" height="400"> Prečo to funguje? Prehliadač si vie dopredu vypočítať pomer strán (aspect ratio) , teda si hneď rezervuje správnu výšku miesta a keď sa obrázok načíta, nič sa neposúva. Toto je dnes najpraktickejší spôsob. CSS max-width: 100% stále funguje, len miesto je dopredu rezervované . 3) Lazy loading: nech sa obrázky načítajú až keď treba Keď máš stránku dlhú a pod prvým ekranom sú obrázky, je zbytočné ich sťahovať hneď. Stačí: loading="lazy" Takže: <img src="..." loading="lazy"> Kedy nedávať lazy ? Na hlavný obrázok hore (hero, prvý vizuál na stránke). Ten chceš mať rýchlo, nie “neskôr”. 4) decoding="async" (malý bonus) decoding="async" Hovorí prehliadaču: “dekóduj obrázok mimo hlavnej práce stránky, keď sa dá.” Nie je to zázrak, ale je to čisté a bezpečné nastavenie. 5) Keď chceš rovnaký “výrez” na všetkých zariadeniach (ako banner) Toto je iná situácia: nechceš zachovať celý obrázok, chceš aby vyplnil box. Vtedy robíme toto: .ukazka { border: 1px solid #a50000; aspect-ratio: 3 / 2; /* box má stále rovnaký pomer */ overflow: hidden; /* čo trčí, odrežeme */ } .ukazka img { width: 100%; height: 100%; object-fit: cover; /* vyplní box, oreže okraje */ display: block; } Rozdiel: height: auto = ukáže celý obrázok (len sa zmenší) object-fit: cover = vyplní box, ale časť odreže (ako “crop”) 6) Najčastejšie chyby chýba max-width: 100% → obrázok pretiekne z kontajnera obrázok je inline → “medzera pod obrázkom” (rieši display:block ) bez width/height → stránka môže skákať pri načítaní lazy na prvom (hero) obrázku → paradoxne spomalíš vizuál hore Moderný základ: responsívne zdroje (srcset + sizes) = mobil stiahne menší súbor, desktop väčší moderný formát (WebP/AVIF) + fallback cez <picture> Doteraz sme riešili: aby obrázok nepretiekol (max-width/height auto), aby neskákala stránka (width/height), aby sa neťahalo všetko hneď (lazy). Ale stále môže byť problém: mobil si stále stiahne 600×400 , aj keď ho zobrazuje napr. len 320px široký. A to je tá “neporiadnosť” v praxi (zbytočné dáta). (reálne pre web) – <picture> + srcset + sizes HTML <body> <h1>Obrázky poriadne: responsive + webp + bez skákania</h1> <div class="ukazka"> <picture> <!-- 1) moderný formát --> <source type="image/webp" srcset=" /images/dog-320.webp 320w, /images/dog-600.webp 600w, /images/dog-1000.webp 1000w " sizes="(max-width: 700px) 100vw, 700px" > <!-- 2) fallback (jpg/png) --> <img src="/images/dog-600.jpg" srcset=" /images/dog-320.jpg 320w, /images/dog-600.jpg 600w, /images/dog-1000.jpg 1000w " sizes="(max-width: 700px) 100vw, 700px" alt="obrázok čierneho psa" width="600" height="400" loading="lazy" decoding="async" > </picture> </div> </body> CSS (rovnaký základ) * { margin: 0; padding: 0; box-sizing: border-box; } .ukazka { border: 1px solid #a50000; max-width: 700px; margin: 2rem auto; } .ukazka img { display: block; max-width: 100%; height: auto; } Prečo takto? 1) srcset = viac veľkostí toho istého obrázka Hovoríš prehliadaču: „Tu máš 320/600/1000… vyber si.“ 2) sizes = koľko bude obrázok reálne veľký na stránke Toto je kľúčové. Bez sizes si prehliadač často vyberie väčší súbor “pre istotu”. sizes="(max-width: 700px) 100vw, 700px" znamená: keď je viewport do 700px → obrázok bude približne na celú šírku okna inak bude mať max 700px 3) <picture> = moderný formát + fallback Keď prehliadač vie WebP, zoberie WebP. Keď nevie, spadne na <img> (jpg/png). Keď chceme použiť srcset + sizes , tak najskôr musíme mať viac verzií toho istého obrázka (rôzne šírky). Lebo prehliadač si nemá z čoho vybrať, ak mu dáš len jeden súbor. Čo to znamená v praxi Musíš mať napríklad tieto súbory (ten istý obrázok, len zmenšený): dog-320.jpg (pre mobily) dog-600.jpg (stred) dog-1000.jpg (desktop) a ideálne aj to isté vo WebP: dog-320.webp dog-600.webp dog-1000.webp Až potom má zmysel napísať: < img src = "/images/dog-600.jpg" srcset = "/images/dog-320.jpg 320w, /images/dog-600.jpg 600w, /images/dog-1000.jpg 1000w" sizes = "(max-width: 700px) 100vw, 700px" > Prečo to robíme mobil si stiahne 320w (malý súbor), desktop si stiahne 1000w (kvalita), a ty nepreplácaš dáta tam, kde netreba.
Správanie textu: zalamovanie, riadky, „…“
Zarovnanie textu v <p> : zalamovanie, riadky, „…“ HTML šablóna <body> <div class="ukazka"> <p> "nejaký text" </p> </div> </body> CSS štart .ukazka { border: 1px solid #a50000; padding: 16px; } /* tu budeme skúšať vlastnosti */ .ukazka p { border: 1px solid #4c7460; max-width: 65ch; } 1) Zarovnanie textu (text-align) 1.1 Default (vľavo) text-align: left; .ukazka p { border: 1px solid #4c7460; max-width: 65ch; text-align: left; } Toto je bežné správanie: text začína vľavo a končí tam, kde skončí riadok. 1.2 Stred text-align: center; .ukazka p { border: 1px solid #4c7460; max-width: 65ch; text-align: center; } Text je vycentrovaný. Použiteľné skôr na krátke texty (napr. nadpisy), nie na dlhý odsek. 1.3 Vpravo text-align: right; .ukazka p { border: 1px solid #4c7460; max-width: 65ch; text-align: right; } Skôr výnimočne (napr. podpis, cena, čísla). 1.4 Do bloku (justify) text-align: justify; .ukazka p { border: 1px solid #4c7460; max-width: 65ch; text-align: justify; } Tu sa deje to, že prehliadač „roztiahne medzery“ tak, aby riadok končil pekne zarovno vpravo aj vľavo. Pozor na nevýhodu: niekedy vzniknú divné veľké medzery medzi slovami. Ak chceš, môžeš to trochu „zjemniť“ s hyphens: .ukazka p { border: 1px solid #4c7460; max-width: 65ch; text-align: justify; hyphens: auto; } hyphens: auto; umožní delenie slov (funguje lepšie, keď má dokument správny jazyk, napr. lang="sk" na <html>, ale nie bezchybne ). 2) Zalamovanie textu (wrap) Zalamovanie znamená: „čo sa stane, keď sa text už nezmestí do šírky“. 2.1 Normálne správanie (default) .ukazka p { border: 1px solid #4c7460; max-width: 65ch; white-space: normal; } Text sa láme medzi slovami. 2.2 Keď máš dlhé slovo / URL a nechce sa zalomiť Príklad: veľmi dlhý string bez medzier (link, hash, kód). <body> <div class="ukazka"> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat excepturi, est eligendi incidunt quia error itaque minima voluptatum quas voluptas eos magni magnam repellat architecto possimus at, accusantium delectus accusamus hic modi ipsam molestiae repudiandae praesentium. Facere amet veritatis natus. A teraz dlhé slovo bez medzier: superdlheeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee A teraz URL: https://example.com/nejaka/straaasne/dlha/cesta/bez/medzier/aby/sme/videli/co/sa/stane </p> </div> </body> Najpraktickejšie je toto: .ukazka p { border: 1px solid #4c7460; max-width: 65ch; overflow-wrap: anywhere; } Alebo miernejšia verzia: .ukazka p { border: 1px solid #4c7460; max-width: 65ch; overflow-wrap: break-word; /* často stačí */ } Polopate: anywhere = „ak treba, zlom to hocikde, aj v strede slova“ break-word = „zlom to, keď naozaj musíš“ 3) Koľko riadkov zobraziť (line-clamp) „Ukáž mi len 3 riadky z odseku“, čo chceš napríklad na kartičkách (výpis blogu, produkty, zoznam). 3.1 Ukáž len 3 riadky a zvyšok schovaj .ukazka p { border: 1px solid #4c7460; max-width: 65ch; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } Ako to funguje: povieš: „tento text bude ako krabička s riadkami“ a potom povieš: „dovoľ iba 3 riadky“ a zvyšok „odrež“ ( overflow: hidden ) 4) Ukončenie „…“ (ellipsis) Tu sú 2 situácie: 4.1 „…“ pre 1 riadok Keď chceš, aby bol text len na jednom riadku a potom ... .ukazka p { border: 1px solid #4c7460; max-width: 65ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } Polopate: nowrap = „nezalamuj, drž to v jednom riadku“ overflow: hidden = „čo sa nezmestí, skry“ ellipsis = „na koniec daj tri bodky“ 4.2 „…“ pre viac riadkov (napr. 3 riadky) Tu sa používa práve line-clamp (z bodu 3). Prehliadač spraví „…“ automaticky podľa možností. .ukazka p { border: 1px solid #4c7460; max-width: 65ch; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } 5) Extra: presná výška odseku cez line-height Niekedy chceš mať „pevný layout“: napr. každý card má rovnakú výšku textu. .ukazka p { border: 1px solid #4c7460; max-width: 65ch; line-height: 1.4; max-height: calc(1.4em * 3); overflow: hidden; } Toto je „ručná verzia“: presne povieš „3 riadky“. Nevýhoda: nie je to také pohodlné ako line-clamp .
Ak chceme prvku povedať aký má byť široký, použijeme vlastnosť width
CSS width – čo to je a čo o ňom reálne vieme Čo vlastne width robí Ak chceme prvku povedať aký má byť široký , použijeme vlastnosť width . Inými slovami: „Tento element má zaberať presne toľkoto miesta na šírku.“ Najčastejšie sa používa na: layout (kontajnery, karty, sekcie), obrázky, formuláre, komponenty (card, slider, sidebar…). Základná syntax .ukazka { width: 150px; } Ak chceme urobiť responzívne správanie , zvyčajne nepridávame len width , ale riešime aj maximá a minimá (k tomu sa dostaneme). Najčastejšie hodnoty width px – pevná šírka .ukazka { border: 1px solid #a50000; width: 150px; } Presná hodnota, nezávislá od rodiča, z le reaguje na mobiloch Použitie : ikonky, modaly, fixné UI prvky % – percento z rodiča .ukazka { border: 1px solid #a50000; width: 50%; } Počíta sa z rodičovského elementu, reaguje na zmenu layoutu, časté v grid/layoutoch Percentuálna width sa počíta z najbližšieho rodiča, ktorý má vypočítateľnú šírku – často je to block element, ktorý sám zaberá 100 % rodiča (napr. body ). vw – šírka viewportu .ukazka { border: 1px solid #a50000; width: 100vw; } 100vw = celá šírka obrazovky, často spôsobí horizontálny scroll (kvôli scrollbarom) Používaj opatrne, najmä mimo hero sekcií. auto – nech rozhodne obsah / layout .box { width: auto; } defaultná hodnota Šírka sa riadi layoutom (block element = 100 % rodiča) Často kombinovaná s max-width ch – šírka znaku ch – je jednotka založená na šírke znaku „0“, ktorá sa prakticky používa na obmedzenie dĺžky riadku textu. 1ch je šírka znaku „0“ (nula) v aktuálne použitej font-family, nie počet znakov. Meria sa v pixeloch , ale relatívne k fontu. .p { max-width: 65ch; } -tým negarantuješ presne 65 znakov v riadku , ale „Riadok má byť približne taký široký, ako keby sa doň zmestilo ~65 monospace znakov.“ A to chceme pre čitateľnosť. Dôležitý rozdiel: monospaced vs proporčné písmo Monospaced font (napr. Courier New )- každý znak má rovnakú šírku, 65ch ≈ 65 znakov v riadku Proporčné fonty (Arial, Inter, Roboto…), i je úzky, W je široký, medzery majú vlastnú šírku. Takže, počet znakov v riadku kolíše, ale optická dĺžka riadku je stabilná Responzívna klasika (odporúčaný vzor) .ukazka { border: 1px solid #a50000; width: 100%; max-width: 400px; margin: 0 auto; } význam: na mobile = 100 %, na veľkom monitore = maximálne 400px, centrovanie cez margin: auto Toto je zlatý štandard webov . Menej známe, ale veľmi užitočné hodnoty fit-content .ukazka { border: 1px solid #a50000; width: fit-content; } Šírka sa prispôsobí obsahu. Ideálne pre: badge, štítky, malé tlačidlá Podpora: dobrá , ale stále pozor pri starších browseroch (can i use: OK pre moderný web) min-content a max-content .ukazka { border: 1px solid #a50000; width: min-content; } min-content → zbalí obsah na minimum max-content → roztiahne podľa obsahu bez zalamovania Použitie: tabuľky, labely, špeciálne layouty. Moderné kombinácie (veľmi odporúčané) clamp() – responzívna šírka bez media queries .ukazka { border: 1px solid #a50000; width: clamp(300px, 50%, 800px); } Čítaj takto: minimum: 300px, ideál: 50 %, maximum: 800px Mentálny model (dôležité) Keď riešiš width , vždy si polož otázku: „Od čoho sa táto šírka počíta?“ px → od ničoho (pevná) % → od rodiča vw → od okna auto → od layoutu fit-content → od obsahu Krátke zhrnutie width určuje šírku prvku najčastejšie sa kombinuje s max-width moderný web = percentá + clamp + max-width nové hodnoty ( fit-content , clamp ) sú už bezpečné vw používať opatrne
height - výška prvku
Článok: CSS height – výška prvku bez kúziel a nervov height: auto (predvolené správanie) Ak nič neriešime, prehliadač to urobí za nás. auto znamená: výška = toľko, koľko potrebuje obsah text pribudne → výška sa zväčší text zmizne → výška sa zmenší Toto je default , aj keď height vôbec nenapíšeš. .ukazka { height: auto; } Používaj vždy, keď nechceš nič „lámať“, máš dynamický obsah (texty, CMS, blog) Pevná výška ( px ) Ak chceme presnú výšku, musíme ju natvrdo povedať. .ukazka { height: 100px; } Čo sa stane: prvok má vždy 100px, obsahu je jedno, či sa zmestí Problém: veľa textu → pretečie, málo textu → prázdne miesto Používaj len keď: robíš ikonky, bannery, karty, presne vieš, čo tam bude Percentá ( % ) – častý zdroj zmätku Ak chceme výšku v %, rodič MUSÍ mať výšku. Ak nemá výšku rodič, len toto NEBUDE fungovať : .ukazka { height: 50%; } Prečo? - prehliadač nevie: 50% z čoho? Správny postup: html, body { height: 100%; } .ukazka { height: 50%; } Pravidlo: percentá výšky fungujú len ak rodič má definovanú výšku . min-height a max-height – najpraktickejšie riešenie Ak nechceme prvok „zabiť“, ale len obmedziť. .ukazka { min-height: 100px; } nikdy nebude menší ako 100 px, môže rásť podľa obsahu .ukazka { max-height: 200px; } nikdy nebude vyšší ako 200 px, obsah môže pretekať Často spolu: .ukazka { min-height: 100px; max-height: 300px; } Toto je zdravý kompromis . Viewport jednotky ( vh , svh , lvh , dvh ) Ak chceme výšku podľa okna prehliadača. .ukazka { height: 100vh; } 100vh = celá výška obrazovky (ak sú nejaké prvky pred a za{nad a pod} , tie sa prirátajú k výške, vznikne scrollbar na boku.) Pozor na mobil: adresný riadok mení výšku → skákanie obsahu height: 100% - závisí od rodiča height: 100vh - ignoruje rodiča aj súrodencov Je to absolútna jednotka , nie relatívna k layoutu. Novšie jednotky (mobil-friendly) height: 100svh; /* small viewport */ - Najmenšia možná výška okna height: 100lvh; /* large viewport */ - Najväčšia možná výška okna height: 100dvh; /* dynamic viewport */ - Aktuálna výška okna v danom momente Na mobile sa deje toto: hore máš adresný riadok, keď scrolluješ, schová sa, tým pádom sa zmení výška viditeľnej obrazovky Staré 100vh sa správa takto: raz ráta s adresným riadkom, raz bez neho, výsledok: skákanie layoutu "svh": ráta aj s adresným riadkom, ráta s najhorším scenárom a už to nemení. "lvh": počíta výšku tak, akokeby adresný riadok neexistoval. Ale adresný riadok tam stále je, len výpočet výšky je väčší než aktuálne viditeľná plocha. Preto prvok má väčšiu výšku, časť je schovaná pod adresným riadkom, môže vzniknúť scroll. lvh je určené pre prostredia, kde je viewport trvalo maximálny – typicky PWA alebo fullscreen aplikácie, nie klasické webové stránky. "dvh": znamená „Daj mi výšku okna takú, aká je PRÁVE TERAZ.“ Čo sa deje: scrolluješ → adresný riadok zmizne → výška sa zväčší, scroll hore → adresný riadok sa vráti → výška sa zmenší. Áno: mení sa, prepočítava sa, layout reaguje. Toto je viewport jednotka , ktorá je zámerne dynamická. Podpora (Can I Use): vh → OK všade svh / lvh / dvh → moderné prehliadače (Chrome, Safari, Firefox nové verzie) staré prehliadače → fallback Bezpečný zápis: .ukazka { height: 100vh; height: 100dvh; } (prehliadač si vezme to, čo pozná) viewport ≠ automaticky fullscreen dvh , svh , lvh nie sú príkaz „zaber celú obrazovku“ . Sú to len mierky . Takže: height: 30dvh; znamená iba: „Tento prvok má mať 30 % výšky aktuálneho viewportu.“ Kedy to už zmysel má (aj vo vnútri stránky) Hero / vizuálna sekcia, ale nie fullscreen .hero { min-height: 40dvh; } Nechceš celú obrazovku, chceš konzistentný vizuálny dojem, bez ohľadu na výšku zariadenia. „Okno“ v stránke (mapa, kalendár, preview) .calendar { height: 50dvh; } Má to byť „pol obrazovky“, zvyšok je text, reaguje to na zmenu viewportu. Limity, nie príkazy Veľmi zdravý pattern je: .section { min-height: 30svh; max-height: 60svh; } Čo tým hovoríš: nech nie je smiešne malá, nech nezaberie celú stránku, viewport slúži len ako mierka . Kde je hranica, kedy to začne byť divné Divné to je vtedy, keď: .card { height: 100dvh; } a karta je súčasťou článku, nemá význam „obrazovky“, ignoruje rodiča. Vtedy vzniká pocit: „prečo sa tento prvok tvári ako stránka?“ Nie preto, že je to dvh . Ale preto, že je to 100 . Viewport jednotky nie sú o hierarchii , ale o mierke . % → mierka voči rodičovi vh / dvh / svh → mierka voči obrazovke Použiť ich môžeš na 100 % (layout obrazovky), ale aj na 20–60 % (vizuálne proporcie) height vs line-height (častý omyl) height = výška boxu line-height = výška riadku textu .ukazka { height: 50px; line-height: 50px; } Text bude vertikálne vycentrovaný (1 riadok). Zhrnutie Nechcem riešiť → height: auto Chcem presnú výšku → px Chcem minimálnu / maximálnu → min-height , max-height Chcem podľa obrazovky → vh (+ dvh ) Percentá → iba ak rodič má výšku
Ako dať prvok, napríklad v <div> na stred.
Zarovnanie prvku: ako dať <div> na stred (polopate) Keď začíname s CSS, najväčší zmätok je v tom, že “stred” môže znamenať dve rôzne veci: text vnútri prvku je na stred samotný prvok (box) je na stred stránky A to sú dve úplne iné pravidlá. 1) Základ: <div> je defaultne display: block To znamená: <div> si zoberie celý riadok čiže jeho šírka je (prakticky) 100% rodiča ďalší prvok pôjde automaticky pod neho Spravíme si ukážku s borderom, aby bolo vidieť “box”. HTML <body> <h1>blog</h1> <div class="ukazka">Ukážka</div> </body> CSS * { margin: 0; padding: 0; box-sizing: border-box; } .ukazka { border: 1px solid #a50000; } Výsledok: uvidíš červený rámik, ktorý ide cez celú šírku stránky . To nie je chyba — to je presne to, čo robí block . 2) Keď je prvok cez celú šírku, “centrovať” vieme len jeho obsah Ak má box šírku 100%, tak ho nemá zmysel “posúvať do stredu” — lebo on už je všade. Čo ale vieme spraviť: dať text vnútri na stred. .ukazka { border: 1px solid #a50000; text-align: center; padding: 2rem; } Box stále ide cez celú šírku, ale nápis „Ukážka“ je uprostred. Padding-om (vnútornými okrajmi) sme si len zväčšili prvok. Toto je prvé pravidlo: Keď je prvok block a zaberá celú šírku, centrovanie riešime cez text-align (centruje obsah, nie box). 3) Kedy má zmysel “div dať na stred” ako box? Až vtedy, keď ten box nie je cez celú šírku . Čiže keď ho “zmenšíme”. A prečo ho zmenšovať? Lebo keď chceš mať napríklad “kartičku”, “badge”, “štítok”, “box s obsahom” — nechceš, aby to bolo roztiahnuté cez celú stránku. 4) Zmenšíme box na šírku obsahu Najjednoduchší trik: .ukazka { display: inline-block; border: 1px solid #a50000; padding: 2rem; } Box už nebude 100% široký. Bude “tak veľký, ako potrebuje”. Lenže teraz vzniká ďalšia vec: Inline-block sa centrovať dá cez text-align , ale na rodičovi. 5) Keď je prvok “zmenšený”, musíme povedať “v čom” má byť na strede - a to je kľúčové. Varianta A: dám text-align: center na rodiča - body (rýchle, ale môže centrovať všetko) body { text-align: center; } .ukazka bude v strede, lebo je inline-block . Ale pozor: budeš centrovať aj iné veci v body (texty, linky…). Varianta B: obalíme to wrapperom (obalom, <div class="center">, čisté riešenie) HTML: <body> <h1>blog</h1> <div class="center"> <div class="ukazka">Ukážka</div> </div> </body> CSS: .center { text-align: center; } .ukazka { display: inline-block; border: 1px solid #a50000; padding: 2rem; } Len tento jeden blok bude centrovaný. h1 ostane normálne. Druhé pravidlo: Keď prvok zmenšíš (napr. inline-block), musíš centrovanie riešiť cez rodiča — lebo rodič je tá “plocha”, v ktorej sa to má zarovnať. 6) Alternatíva: zmenším box a vycentrujem ho cez margin: 0 auto Toto je “klasika” pre bloky. Funguje, ak: prvok je block „ margin: 0 auto funguje len keď prvok nie je 100% široký (t.j. má šírku/je zmenšený).“ .ukazka { border: 1px solid #a50000; padding: 2rem; width: fit-content; margin: 0 auto; } Box sa zmenší na šírku obsahu a posunie sa na stred. Mini-zhrnutie (čo si zapamätať) <div> je defaultne block → zaberá celý riadok keď je box 100% široký → centrovať vieš hlavne obsah ( text-align:center ) keď chceš centrovať box , musí byť užší než rodič keď je inline-block → centrovanie riešiš cez text-align na rodičovi keď je block so šírkou → centrovanie riešiš cez margin: 0 auto Centrujem text vnútri → text-align: center na prvok Centrujem box → box musí byť užší a buď: margin: 0 auto (block + šírka) alebo text-align: center na rodiča (inline-block)
Niečo málo o jazyku C# (C sharp)
Čo je C# (a ako to celé začalo) C# (C Sharp) je moderný objektovo orientovaný programovací jazyk od spoločnosti Microsoft. Jeho príbeh sa začal písať okolo roku 2000, kedy ho pod vedením Andersa Hejlsberga vyvinuli ako priamu odpoveď na potrebu moderného jazyka pre éru internetu. Pôvodne sa kódovo označoval ako COOL (C-like Object Oriented Language). Názov "Sharp" je inšpirovaný hudobnou mriežkou (♯), ktorá v hudbe znamená zvýšenie tónu o poltón – čo v prenesenom význame symbolizuje, že ide o "nadstavbu" a vylepšenie jazyka C++. Dnes sa najčastejšie používa v ekosystéme .NET . Prečo sa C# často používa História a stabilita – Za viac ako 20 rokov prešiel obrovským vývojom (od verzie 1.0 až po dnešný multiplatformový .NET 8/9). Čitateľnosť – Kód sa dá písať “ľudsky”, dobre sa udržiava. Bezpečnosť typov – Kompilátor ťa zastaví, keď niečo nesedí (menej chýb za behu). Výkon – .NET je rýchly a dobre optimalizovaný, hlavne pri serverových aplikáciách. Veľký ekosystém – Knižnice, nástroje, Visual Studio, NuGet balíčky. Ako sa na C# dá pozerať (jednoducho) Ak chceme urobiť program, tak najskôr musíme povedať: aké dáta máme (premenné, triedy) a potom čo sa s nimi má robiť (metódy, logika). C# je v tomto “poriadkumilovný” – núti ťa pomenovať veci a držať štruktúru. Mini príklad: premenné a podmienka Premenná je “krabička”, do ktorej si uložíš hodnotu. Napríklad vek: int age = 18; if (age >= 18) { Console.WriteLine("Dospelý"); } else { Console.WriteLine("Mladistvý"); } Mini príklad: trieda a objekt Trieda je šablóna. Objekt je konkrétna “vec” vytvorená podľa tej šablóny. public class Person { public string Name { get; set; } = ""; public int Age { get; set; } public void SayHello() { Console.WriteLine($"Ahoj, volám sa {Name}."); } } // použitie var p = new Person { Name = "Jano", Age = 30 }; p.SayHello(); Kde sa C# typicky používa Web: ASP.NET Core MVC, Razor Pages, Web API Desktop: WPF, WinForms Hry: Unity (v C# je napísaná drvivá väčšina indie aj veľkých mobilných hier) Služby: background worker, Windows service, cloud funkcie Zhrnutie C# je jazyk, ktorý sa vyvinul z ambiciózneho projektu Microsoftu na jeden z najuniverzálnejších nástrojov súčasnosti. Hodí sa na seriózne aplikácie, kde chceš mať poriadok v kóde. A keď to spojíš s .NET, vieš robiť weby, API aj komplexné admin systémy.