21 KiB

Raw Blame History Unescape Escape

Projekt Terrárium, časť 2: Úvod do CSS

Sketchnote od Tomomi Imura

Pamätáte si, ako vaše HTML terrárium vyzeralo dosť jednoducho? CSS je to, čo premení túto jednoduchú štruktúru na niečo vizuálne príťažlivé.

Ak je HTML ako stavba rámu domu, potom CSS je všetko, čo mu dodáva pocit domova - farby stien, usporiadanie nábytku, osvetlenie a ako miestnosti spolu ladia. Predstavte si, ako sa palác vo Versailles zmenil zo skromného loveckého zámočku na jeden z najkrajších palácov sveta vďaka starostlivej pozornosti venovanej dekorácii a usporiadaniu.

Dnes premeníme vaše terrárium z funkčného na elegantné. Naučíte sa presne umiestňovať prvky, vytvárať rozloženia, ktoré reagujú na rôzne veľkosti obrazovky, a vytvárať vizuálnu príťažlivosť, ktorá robí webové stránky pútavými.

Na konci tejto lekcie uvidíte, ako strategické štýlovanie pomocou CSS môže dramaticky zlepšiť váš projekt. Poďme pridať štýl vášmu terráriu.

Kvíz pred prednáškou

Začíname s CSS

CSS sa často považuje len za "skrášľovanie vecí", ale má oveľa širší účel. CSS je ako režisér filmu - kontrolujete nielen to, ako všetko vyzerá, ale aj ako sa pohybuje, reaguje na interakciu a prispôsobuje sa rôznym situáciám.

Moderné CSS je mimoriadne schopné. Môžete písať kód, ktorý automaticky upravuje rozloženia pre telefóny, tablety a stolné počítače. Môžete vytvárať plynulé animácie, ktoré vedú pozornosť používateľov tam, kde je to potrebné. Výsledky môžu byť veľmi pôsobivé, keď všetko spolu funguje.

💡 Tip od profesionála: CSS sa neustále vyvíja s novými funkciami a schopnosťami. Vždy si overte podporu prehliadačov pre novšie funkcie CSS na stránke CanIUse.com pred ich použitím v produkčných projektoch.

Čo dosiahneme v tejto lekcii:

Vytvoríme kompletný vizuálny dizajn pre vaše terrárium pomocou moderných techník CSS
Preskúmame základné koncepty ako kaskáda, dedičnosť a selektory CSS
Implementujeme stratégie responzívneho umiestnenia a rozloženia
Postavíme kontajner terrária pomocou tvarov a štýlov CSS

Predpoklady

Mali by ste mať dokončenú HTML štruktúru vášho terrária z predchádzajúcej lekcie a pripravenú na štýlovanie.

📺 Video zdroj: Pozrite si tento užitočný video návod

Nastavenie vášho CSS súboru

Predtým, než začneme so štýlovaním, musíme pripojiť CSS k nášmu HTML. Toto spojenie povie prehliadaču, kde nájde pokyny na štýlovanie pre naše terrárium.

V priečinku terrária vytvorte nový súbor s názvom style.css a potom ho prepojte v sekcii <head> vášho HTML dokumentu:

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

Čo tento kód robí:

Vytvára spojenie medzi vaším HTML a CSS súbormi
Hovorí prehliadaču, aby načítal a aplikoval štýly zo súboru style.css
Používa atribút rel="stylesheet" na určenie, že ide o CSS súbor
Odkazuje na cestu k súboru pomocou href="./style.css"

Pochopenie kaskády CSS

Premýšľali ste niekedy, prečo sa CSS nazýva "kaskádové" štýly? Štýly kaskádujú ako vodopád a niekedy si navzájom konkurujú.

Predstavte si, ako fungujú vojenské príkazy - generálny príkaz môže povedať "všetci vojaci nosia zelené", ale konkrétny príkaz pre vašu jednotku môže povedať "na ceremóniu noste modré uniformy". Konkrétnejší príkaz má prednosť. CSS sa riadi podobnou logikou a pochopenie tejto hierarchie robí ladenie oveľa zvládnuteľnejším.

Experimentovanie s prioritou kaskády

Pozrime sa na kaskádu v praxi tým, že vytvoríme konflikt štýlov. Najprv pridajte inline štýl do vášho <h1> tagu:

<h1 style="color: red">My Terrarium</h1>

Čo tento kód robí:

Aplikuje červenú farbu priamo na <h1> element pomocou inline štýlovania
Používa atribút style na vloženie CSS priamo do HTML
Vytvára najvyššiu prioritu štýlového pravidla pre tento konkrétny element

Potom pridajte toto pravidlo do vášho súboru style.css:

h1 {
  color: blue;
}

V uvedenom sme:

Definovali pravidlo CSS, ktoré cieli na všetky <h1> elementy
Nastavili farbu textu na modrú pomocou externého štýlového súboru
Vytvorili pravidlo s nižšou prioritou v porovnaní s inline štýlmi

✅ Kontrola vedomostí: Aká farba sa zobrazí vo vašej webovej aplikácii? Prečo táto farba vyhráva? Dokážete si predstaviť scenáre, kde by ste chceli prepísať štýly?

💡 Poradie priorít CSS (od najvyššej po najnižšiu):

Inline štýly (atribút style)

ID (#myId)

Triedy (.myClass) a atribúty

Selektory elementov (h1, div, p)

Predvolené nastavenia prehliadača

CSS dedičnosť v praxi

CSS dedičnosť funguje ako genetika - elementy dedia určité vlastnosti od svojich rodičovských elementov. Ak nastavíte rodinu písma na elemente body, všetok text vo vnútri automaticky použije rovnaké písmo. Je to podobné ako charakteristická čeľusť rodiny Habsburgovcov, ktorá sa objavovala naprieč generáciami bez toho, aby bola špecifikovaná pre každého jednotlivca.

Nie všetko sa však dedí. Štýly textu ako písma a farby sa dedia, ale vlastnosti rozloženia ako okraje a orámovania nie. Rovnako ako deti môžu zdediť fyzické črty, ale nie módne voľby svojich rodičov.

Pozorovanie dedičnosti písma

Pozrime sa na dedičnosť v praxi nastavením rodiny písma na elemente <body>:

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

Rozbor toho, čo sa tu deje:

Nastavuje rodinu písma pre celú stránku cielením na element <body>
Používa zásobník písiem s alternatívnymi možnosťami pre lepšiu kompatibilitu prehliadačov
Aplikuje moderné systémové písma, ktoré vyzerajú skvele na rôznych operačných systémoch
Zabezpečuje, že všetky podriadené elementy zdedia toto písmo, pokiaľ nie je špecificky prepísané

Otvorte nástroje pre vývojárov vo vašom prehliadači (F12), prejdite na kartu Elements a skontrolujte váš <h1> element. Uvidíte, že dedí rodinu písma z body:

✅ Čas na experimentovanie: Skúste nastaviť ďalšie dediteľné vlastnosti na <body> ako color, line-height alebo text-align. Čo sa stane s vaším nadpisom a ostatnými elementmi?

📝 Dediteľné vlastnosti zahŕňajú: color, font-family, font-size, line-height, text-align, visibility

Nedediteľné vlastnosti zahŕňajú: margin, padding, border, width, height, position

Ovládnutie selektorov CSS

Selektory CSS sú vaším spôsobom, ako cieliť na konkrétne elementy pre štýlovanie. Fungujú ako presné pokyny - namiesto toho, aby ste povedali "dom", môžete povedať "modrý dom s červenými dverami na ulici Maple".

CSS poskytuje rôzne spôsoby, ako byť konkrétny, a výber správneho selektora je ako výber vhodného nástroja pre danú úlohu. Niekedy potrebujete štýlovať každé dvere v susedstve, a niekedy len jedny konkrétne dvere.

Selektory elementov (tagy)

Selektory elementov cielia na HTML elementy podľa ich názvu tagu. Sú ideálne na nastavenie základných štýlov, ktoré sa aplikujú na celú stránku:

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin: 0;
  padding: 0;
}

h1 {
  color: #3a241d;
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

Pochopenie týchto štýlov:

Nastavuje konzistentnú typografiu na celej stránke pomocou selektora body
Odstraňuje predvolené okraje a výplne prehliadača pre lepšiu kontrolu
Štýluje všetky nadpisové elementy farbou, zarovnaním a rozstupom
Používa jednotky rem pre škálovateľné, prístupné veľkosti písma

Hoci selektory elementov fungujú dobre pre všeobecné štýlovanie, budete potrebovať konkrétnejšie selektory na štýlovanie jednotlivých komponentov, ako sú rastliny vo vašom terráriu.

Selektory ID pre jedinečné elementy

Selektory ID používajú symbol # a cielia na elementy s konkrétnymi atribútmi id. Keďže ID musia byť na stránke jedinečné, sú ideálne na štýlovanie jednotlivých, špeciálnych elementov, ako sú naše kontajnery na rastliny na ľavej a pravej strane.

Vytvorme štýlovanie pre bočné kontajnery nášho terrária, kde budú umiestnené rastliny:

#left-container {
  background-color: #f5f5f5;
  width: 15%;
  left: 0;
  top: 0;
  position: absolute;
  height: 100vh;
  padding: 1rem;
  box-sizing: border-box;
}

#right-container {
  background-color: #f5f5f5;
  width: 15%;
  right: 0;
  top: 0;
  position: absolute;
  height: 100vh;
  padding: 1rem;
  box-sizing: border-box;
}

Čo tento kód dosahuje:

Umiestňuje kontajnery na krajnú ľavú a pravú stranu pomocou absolute pozicionovania
Používa jednotky vh (výška zobrazenia) pre responzívnu výšku, ktorá sa prispôsobuje veľkosti obrazovky
Aplikuje box-sizing: border-box, aby sa výplne zahrnuli do celkovej šírky
Odstraňuje nepotrebné jednotky px z nulových hodnôt pre čistejší kód
Nastavuje jemnú farbu pozadia, ktorá je príjemnejšia pre oči ako ostrá šedá

✅ Výzva na kvalitu kódu: Všimnite si, ako tento CSS porušuje princíp DRY (Don't Repeat Yourself). Dokážete ho prepracovať pomocou ID aj triedy?

Vylepšený prístup:

<div id="left-container" class="container"></div>
<div id="right-container" class="container"></div>

.container {
  background-color: #f5f5f5;
  width: 15%;
  top: 0;
  position: absolute;
  height: 100vh;
  padding: 1rem;
  box-sizing: border-box;
}

#left-container {
  left: 0;
}

#right-container {
  right: 0;
}

Selektory tried pre opakovateľné štýly

Selektory tried používajú symbol . a sú ideálne, keď chcete aplikovať rovnaké štýly na viaceré elementy. Na rozdiel od ID môžu byť triedy opakovane použité v celom HTML, čo ich robí ideálnymi pre konzistentné štýlové vzory.

V našom terráriu potrebuje každá rastlina podobné štýlovanie, ale aj individuálne umiestnenie. Použijeme kombináciu tried pre spoločné štýly a ID pre jedinečné umiestnenie.

Tu je HTML štruktúra pre každú rastlinu:

<div class="plant-holder">
  <img class="plant" alt="Decorative plant for terrarium" id="plant1" src="../../../../translated_images/plant1.d18b18ffe73da18f8b1ac7aba73b4050af52f4a0c9174aeac464b85123fc2850.sk.png" />
</div>

Kľúčové prvky vysvetlené:

Používa class="plant-holder" pre konzistentné štýlovanie kontajnerov pre všetky rastliny
Aplikuje class="plant" pre spoločné štýlovanie a správanie obrázkov
Zahŕňa jedinečné id="plant1" pre individuálne umiestnenie a interakciu s JavaScriptom
Poskytuje popisný alt text pre prístupnosť čítačiek obrazovky

Teraz pridajte tieto štýly do vášho súboru style.css:

.plant-holder {
  position: relative;
  height: 13%;
  left: -0.6rem;
}

.plant {
  position: absolute;
  max-width: 150%;
  max-height: 150%;
  z-index: 2;
  transition: transform 0.3s ease;
}

.plant:hover {
  transform: scale(1.05);
}

Rozbor týchto štýlov:

Vytvára relatívne pozicionovanie pre držiak rastlín na vytvorenie kontextu pozicionovania
Nastavuje výšku každého držiaka rastlín na 13%, čím zabezpečuje, že všetky rastliny sa zmestia vertikálne bez posúvania
Posúva držiaky mierne doľava, aby lepšie centrovali rastliny v ich kontajneroch
Umožňuje rastlinám škálovať responzívne pomocou vlastností max-width a max-height
Používa z-index na vrstvenie rastlín nad ostatnými elementmi v terráriu
Pridáva jemný efekt pri prechode myšou pomocou CSS pre lepšiu interakciu s používateľom

✅ Kritické myslenie: Prečo potrebujeme selektory .plant-holder aj .plant? Čo by sa stalo, keby sme sa pokúsili použiť iba jeden?

💡 Dizajnový vzor: Kontajner (.plant-holder) kontroluje rozloženie a pozicionovanie, zatiaľ čo obsah (.plant) kontroluje vzhľad a škálovanie. Tento oddelený prístup robí kód udržateľnejším a flexibilnejším.

Pochopenie pozicionovania v CSS

Pozicionovanie v CSS je ako byť režisérom divadelnej hry - určujete, kde každý herec stojí a ako sa pohybuje po javisku. Niektorí herci nasledujú štandardné usporiadanie, zatiaľ čo iní potrebujú špecifické pozicionovanie pre dramatický efekt.

Keď pochopíte pozicionovanie, mnohé výzvy v rozložení sa stanú zvládnuteľnými. Potrebujete navigačný panel, ktorý zostane na vrchu, keď používateľ posúva stránku? Pozicionovanie to vyrieši. Chcete, aby sa tooltip objavil na konkrétnom mieste? To je tiež pozicionovanie.

Päť hodnôt pozicionovania

Hodnota pozicionovania	Správanie	Použitie
`static`	Predvolený tok, ignoruje top/left/right/bottom	Normálne rozloženie dokumentu
`relative`	Umiestnené relatívne k svojej normálnej pozícii	Malé úpravy, vytvorenie kontextu pozicionovania
`absolute`	Umiestnené relatívne k najbližšiemu pozicionovanému predkovi	Presné umiestnenie, prekrytia
`fixed`	Umiestnené relatívne k zobrazeniu	Navigačné panely, plávajúce elementy
`sticky`	Prepína medzi relatívnym a fixným podľa posúvania	Hlavičky, ktoré sa držia pri posúvaní

Pozicionovanie v našom terráriu

Naše terrárium používa strategickú kombináciu typov pozicionovania na vytvorenie požadovaného rozloženia:

/* Container positioning */
.container {
  position: absolute; /* Removes from normal flow */
  /* ... other styles ... */
}

/* Plant holder positioning */
.plant-holder {
  position: relative; /* Creates positioning context */
  /* ... other styles ... */
}

/* Plant positioning */
.plant {
  position: absolute; /* Allows precise placement within holder */
  /* ... other styles ... */
}

Pochopenie stratégie pozicionovania:

Absolútne kontajnery sú odstránené z normálneho toku dokumentu a pripnuté na okraje obrazovky
Relatívne držiaky rastlín vytvárajú kontext pozicionovania, pričom zostávajú v toku dokumentu
Absolútne rastliny môžu byť presne umiestnené v rámci svoj Poďme postaviť terárium krok za krokom. Každá časť používa absolútne pozicionovanie a veľkosti založené na percentách pre responzívny dizajn:

.jar-walls {
  height: 80%;
  width: 60%;
  background: #d1e1df;
  border-radius: 1rem;
  position: absolute;
  bottom: 0.5%;
  left: 20%;
  opacity: 0.5;
  z-index: 1;
  box-shadow: inset 0 0 2rem rgba(0, 0, 0, 0.1);
}

.jar-top {
  width: 50%;
  height: 5%;
  background: #d1e1df;
  position: absolute;
  bottom: 80.5%;
  left: 25%;
  opacity: 0.7;
  z-index: 1;
  border-radius: 0.5rem 0.5rem 0 0;
}

.jar-bottom {
  width: 50%;
  height: 1%;
  background: #d1e1df;
  position: absolute;
  bottom: 0;
  left: 25%;
  opacity: 0.7;
  border-radius: 0 0 0.5rem 0.5rem;
}

.dirt {
  width: 60%;
  height: 5%;
  background: #3a241d;
  position: absolute;
  border-radius: 0 0 1rem 1rem;
  bottom: 1%;
  left: 20%;
  opacity: 0.7;
  z-index: -1;
}

Porozumenie konštrukcii terária:

Používa rozmery založené na percentách pre responzívne škálovanie na všetkých veľkostiach obrazovky
Pozicionuje prvky absolútne, aby ich presne naskladal a zarovnal
Aplikuje rôzne hodnoty opacity na vytvorenie efektu priehľadnosti skla
Implementuje vrstvenie pomocou z-index, aby rastliny vyzerali, že sú vo vnútri nádoby
Pridáva jemný box-shadow a upravený border-radius pre realistickejší vzhľad

Responzívny dizajn s percentami

Všimnite si, ako všetky rozmery používajú percentá namiesto pevných pixelových hodnôt:

Prečo je to dôležité:

Zabezpečuje, že terárium sa proporčne prispôsobí na akúkoľvek veľkosť obrazovky
Udržuje vizuálne vzťahy medzi komponentmi nádoby
Poskytuje konzistentný zážitok od mobilných telefónov po veľké stolné monitory
Umožňuje, aby sa dizajn prispôsobil bez narušenia vizuálneho rozloženia

Použitie jednotiek CSS

Používame jednotky rem pre border-radius, ktoré sa škálujú relatívne k veľkosti koreňového písma. To vytvára prístupnejšie návrhy, ktoré rešpektujú preferencie používateľov ohľadom veľkosti písma. Viac sa dozviete o relatívnych jednotkách CSS v oficiálnej špecifikácii.

✅ Vizuálne experimentovanie: Skúste upraviť tieto hodnoty a pozorujte účinky:

Zmeňte opacitu nádoby z 0.5 na 0.8 – ako to ovplyvní vzhľad skla?
Upravte farbu pôdy z #3a241d na #8B4513 – aký vizuálny dopad to má?
Zmeňte z-index pôdy na 2 – čo sa stane s vrstvením?

Výzva GitHub Copilot Agent 🚀

Použite režim Agent na splnenie nasledujúcej výzvy:

Popis: Vytvorte CSS animáciu, ktorá spôsobí, že rastliny v teráriu sa jemne kývajú zo strany na stranu, simulujúc efekt prirodzeného vánku. Pomôže vám to precvičiť si CSS animácie, transformácie a keyframes, pričom zvýšite vizuálnu atraktivitu vášho terária.

Úloha: Pridajte CSS animácie pomocou keyframes, aby rastliny v teráriu jemne kývali zo strany na stranu. Vytvorte animáciu kývania, ktorá mierne otáča každú rastlinu (o 2-3 stupne) doľava a doprava s trvaním 3-4 sekundy, a aplikujte ju na triedu .plant. Uistite sa, že animácia sa opakuje donekonečna a má funkciu easing pre prirodzený pohyb.

Viac sa dozviete o režime agent tu.

🚀 Výzva: Pridanie odrazov na skle

Pripravení vylepšiť vaše terárium realistickými odrazmi na skle? Táto technika pridá hĺbku a realizmus do dizajnu.

Vytvoríte jemné zvýraznenia, ktoré simulujú, ako svetlo odráža od sklenených povrchov. Tento prístup je podobný tomu, ako renesanční maliari ako Jan van Eyck používali svetlo a odrazy na vytvorenie trojrozmerného vzhľadu maľovaného skla. Tu je váš cieľ:

Vaša úloha:

Vytvorte jemné biele alebo svetlé oválne tvary pre odrazy na skle
Pozicionujte ich strategicky na ľavej strane nádoby
Aplikujte vhodné efekty opacity a rozmazania pre realistický odraz svetla
Použite border-radius na vytvorenie organických, bublinkových tvarov
Experimentujte s gradientmi alebo box-shadow pre lepší realizmus

Kvíz po prednáške

Rozšírte svoje znalosti o CSS

CSS sa môže na začiatku zdať zložité, ale pochopenie týchto základných konceptov poskytuje pevný základ pre pokročilejšie techniky.

Vaše ďalšie oblasti učenia sa CSS:

Flexbox - zjednodušuje zarovnávanie a rozloženie prvkov
CSS Grid - poskytuje silné nástroje na vytváranie komplexných rozložení
CSS premenné - znižujú opakovanie a zlepšujú udržiavateľnosť
Responzívny dizajn - zabezpečuje, že stránky fungujú dobre na rôznych veľkostiach obrazovky

Interaktívne vzdelávacie zdroje

Precvičte si tieto koncepty pomocou týchto zábavných, praktických hier:

🐸 Flexbox Froggy - Ovládnite Flexbox prostredníctvom zábavných výziev
🌱 Grid Garden - Naučte sa CSS Grid pestovaním virtuálnych mrkiev
🎯 CSS Battle - Otestujte svoje CSS zručnosti pomocou kódovacích výziev

Ďalšie vzdelávanie

Pre komplexné základy CSS dokončite tento modul na Microsoft Learn: Štylizujte svoju HTML aplikáciu pomocou CSS

Zadanie

Refaktoring CSS

Zrieknutie sa zodpovednosti:
Tento dokument bol preložený pomocou služby AI prekladu Co-op Translator. Hoci sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho rodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nenesieme zodpovednosť za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.

21 KiB Raw Blame History Unescape Escape