22 KiB

Raw Blame History Unescape Escape

Projekt terarija, 2. dio: Uvod u CSS

Sketchnote autorice Tomomi Imura

Sjećate li se kako je vaš HTML terarij izgledao prilično osnovno? CSS je ono što tu jednostavnu strukturu pretvara u nešto vizualno privlačno.

Ako je HTML poput izgradnje okvira kuće, onda je CSS sve ono što kuću čini domom - boje zidova, raspored namještaja, osvjetljenje i kako se prostorije međusobno povezuju. Zamislite kako je palača Versailles započela kao jednostavna lovačka kuća, ali pažljivim uređenjem i rasporedom postala jedno od najveličanstvenijih građevina na svijetu.

Danas ćemo vaš terarij transformirati iz funkcionalnog u dotjeran. Naučit ćete kako precizno pozicionirati elemente, prilagoditi raspored različitim veličinama ekrana i stvoriti vizualnu privlačnost koja čini web stranice zanimljivima.

Do kraja ovog predavanja vidjet ćete kako strateško stiliziranje pomoću CSS-a može dramatično poboljšati vaš projekt. Dodajmo malo stila vašem terariju.

Kviz prije predavanja

Početak rada s CSS-om

CSS se često smatra samo načinom "uljepšavanja stvari", ali njegova svrha je mnogo šira. CSS je poput redatelja filma - kontrolirate ne samo kako sve izgleda, već i kako se kreće, reagira na interakciju i prilagođava različitim situacijama.

Moderni CSS je izuzetno sposoban. Možete pisati kod koji automatski prilagođava raspored za telefone, tablete i stolna računala. Možete stvoriti glatke animacije koje usmjeravaju pažnju korisnika gdje je potrebno. Rezultati mogu biti prilično impresivni kada sve funkcionira zajedno.

💡 Savjet profesionalca: CSS se stalno razvija s novim značajkama i mogućnostima. Uvijek provjerite CanIUse.com kako biste provjerili podršku preglednika za novije CSS značajke prije nego ih upotrijebite u produkcijskim projektima.

Evo što ćemo postići u ovom predavanju:

Stvoriti kompletan vizualni dizajn za vaš terarij koristeći moderne CSS tehnike
Istražiti osnovne koncepte poput kaskade, nasljeđivanja i CSS selektora
Implementirati strategije za responzivno pozicioniranje i raspored
Izgraditi spremnik terarija koristeći CSS oblike i stiliziranje

Preduvjet

Trebali biste završiti HTML strukturu za vaš terarij iz prethodnog predavanja i imati je spremnu za stiliziranje.

📺 Video resurs: Pogledajte ovaj koristan video vodič

Postavljanje vaše CSS datoteke

Prije nego što počnemo sa stiliziranjem, moramo povezati CSS s našim HTML-om. Ova poveznica govori pregledniku gdje pronaći upute za stiliziranje našeg terarija.

U mapi vašeg terarija, stvorite novu datoteku pod nazivom style.css, a zatim je povežite u odjeljku <head> vašeg HTML dokumenta:

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

Evo što ovaj kod radi:

Stvara vezu između vaših HTML i CSS datoteka
Govori pregledniku da učita i primijeni stilove iz style.css
Koristi atribut rel="stylesheet" kako bi naznačio da je ovo CSS datoteka
Referencira putanju datoteke s href="./style.css"

Razumijevanje CSS kaskade

Jeste li se ikada pitali zašto se CSS naziva "kaskadni" stilovi? Stilovi se spuštaju poput vodopada, a ponekad dolazi do sukoba među njima.

Razmislite o tome kako funkcioniraju vojne zapovjedne strukture - opća naredba može reći "svi vojnici nose zelenu uniformu", ali specifična naredba za vašu jedinicu može reći "nosite plave svečane uniforme za ceremoniju". Specifičnija uputa ima prednost. CSS slijedi sličnu logiku, a razumijevanje ove hijerarhije čini otklanjanje grešaka mnogo lakšim.

Eksperimentiranje s prioritetom kaskade

Pogledajmo kaskadu u praksi stvaranjem sukoba u stilovima. Prvo dodajte inline stil svom <h1> tagu:

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

Što ovaj kod radi:

Primjenjuje crvenu boju izravno na <h1> element koristeći inline stiliziranje
Koristi atribut style za ugrađivanje CSS-a izravno u HTML
Stvara pravilo stila najvišeg prioriteta za ovaj specifični element

Zatim dodajte ovo pravilo u svoju style.css datoteku:

h1 {
  color: blue;
}

U gore navedenom, mi smo:

Definirali CSS pravilo koje cilja sve <h1> elemente
Postavili boju teksta na plavu koristeći vanjsku stilsku datoteku
Stvorili pravilo nižeg prioriteta u usporedbi s inline stilovima

✅ Provjera znanja: Koja boja se prikazuje u vašoj web aplikaciji? Zašto ta boja pobjeđuje? Možete li zamisliti scenarije u kojima biste željeli nadjačati stilove?

💡 Redoslijed prioriteta CSS-a (od najvišeg do najnižeg):

Inline stilovi (atribut style)

ID-ovi (#myId)

Klase (.myClass) i atributi

Selektori elemenata (h1, div, p)

Zadane postavke preglednika

CSS nasljeđivanje u praksi

CSS nasljeđivanje funkcionira poput genetike - elementi nasljeđuju određena svojstva od svojih roditeljskih elemenata. Ako postavite obitelj fontova na elementu body, sav tekst unutar njega automatski koristi isti font. To je slično tome kako se prepoznatljiva čeljust obitelji Habsburg pojavila kroz generacije bez da je bila specificirana za svakog pojedinca.

Međutim, ne nasljeđuje se sve. Tekstualni stilovi poput fontova i boja se nasljeđuju, ali svojstva rasporeda poput margina i obruba ne. Kao što djeca mogu naslijediti fizičke osobine, ali ne i modni ukus svojih roditelja.

Promatranje nasljeđivanja fonta

Pogledajmo nasljeđivanje u praksi postavljanjem obitelji fontova na elementu <body>:

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

Razlaganje onoga što se ovdje događa:

Postavlja obitelj fontova za cijelu stranicu ciljanjem elementa <body>
Koristi font stack s rezervnim opcijama za bolju kompatibilnost preglednika
Primjenjuje moderne sistemske fontove koji izgledaju odlično na različitim operativnim sustavima
Osigurava da svi podređeni elementi nasljeđuju ovaj font osim ako nije posebno nadjačan

Otvorite alate za razvoj preglednika (F12), idite na karticu Elements i pregledajte svoj <h1> element. Vidjet ćete da nasljeđuje obitelj fontova od body elementa:

✅ Vrijeme za eksperimentiranje: Pokušajte postaviti druga nasljedna svojstva na <body> poput color, line-height ili text-align. Što se događa s vašim naslovom i ostalim elementima?

📝 Nasljedna svojstva uključuju: color, font-family, font-size, line-height, text-align, visibility

Svojstva koja se ne nasljeđuju uključuju: margin, padding, border, width, height, position

Ovladavanje CSS selektorima

CSS selektori su vaš način ciljanog stiliziranja specifičnih elemenata. Oni funkcioniraju poput davanja preciznih uputa - umjesto da kažete "kuća", možete reći "plava kuća s crvenim vratima na ulici Maple".

CSS pruža različite načine za precizno ciljanje, a odabir pravog selektora je poput odabira odgovarajućeg alata za zadatak. Ponekad trebate stilizirati svaka vrata u susjedstvu, a ponekad samo jedna specifična vrata.

Selektori elemenata (tagovi)

Selektori elemenata ciljaju HTML elemente prema njihovom nazivu taga. Savršeni su za postavljanje osnovnih stilova koji se široko primjenjuju na vašoj stranici:

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;
}

Razumijevanje ovih stilova:

Postavlja dosljednu tipografiju na cijeloj stranici pomoću selektora body
Uklanja zadane margine i padding preglednika za bolju kontrolu
Stilizira sve elemente naslova bojom, poravnanjem i razmakom
Koristi rem jedinice za skalabilno, pristupačno određivanje veličine fonta

Iako selektori elemenata dobro funkcioniraju za opće stiliziranje, trebat će vam specifičniji selektori za stiliziranje pojedinačnih komponenti poput biljaka u vašem terariju.

ID selektori za jedinstvene elemente

ID selektori koriste simbol # i ciljaju elemente s određenim atributima id. Budući da ID-ovi moraju biti jedinstveni na stranici, savršeni su za stiliziranje pojedinačnih, posebnih elemenata poput naših lijevih i desnih spremnika za biljke.

Napravimo stilizaciju za bočne spremnike našeg terarija gdje će biljke biti smještene:

#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;
}

Evo što ovaj kod postiže:

Pozicionira spremnike na krajnje lijeve i desne rubove koristeći absolute pozicioniranje
Koristi jedinice vh (visina prikaznog prozora) za responzivnu visinu koja se prilagođava veličini ekrana
Primjenjuje box-sizing: border-box kako bi padding bio uključen u ukupnu širinu
Uklanja nepotrebne px jedinice iz vrijednosti nula za čišći kod
Postavlja suptilnu boju pozadine koja je ugodnija za oči od oštro sive

✅ Izazov kvalitete koda: Primijetite kako ovaj CSS krši princip DRY (Don't Repeat Yourself). Možete li ga preoblikovati koristeći i ID i klasu?

Poboljšani pristup:

<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;
}

Selektori klasa za višekratne stilove

Selektori klasa koriste simbol . i savršeni su kada želite primijeniti iste stilove na više elemenata. Za razliku od ID-ova, klase se mogu ponovno koristiti u cijelom vašem HTML-u, što ih čini idealnim za dosljedne stilizacijske uzorke.

U našem terariju, svaka biljka treba sličnu stilizaciju, ali i individualno pozicioniranje. Koristit ćemo kombinaciju klasa za zajedničke stilove i ID-ova za jedinstveno pozicioniranje.

Evo strukture HTML-a za svaku biljku:

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

Ključni elementi objašnjeni:

Koristi class="plant-holder" za dosljednu stilizaciju spremnika za sve biljke
Primjenjuje class="plant" za zajedničko stiliziranje i ponašanje slike
Uključuje jedinstveni id="plant1" za individualno pozicioniranje i interakciju putem JavaScripta
Pruža opisni alt tekst za pristupačnost čitačima ekrana

Sada dodajte ove stilove u svoju style.css datoteku:

.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);
}

Razlaganje ovih stilova:

Stvara relativno pozicioniranje za spremnik biljke kako bi se uspostavio kontekst pozicioniranja
Postavlja svaki spremnik biljke na visinu od 13%, osiguravajući da sve biljke stanu vertikalno bez pomicanja
Pomjera spremnike malo ulijevo kako bi bolje centrirali biljke unutar njihovih spremnika
Omogućuje biljkama da se responzivno skaliraju pomoću svojstava max-width i max-height
Koristi z-index za slojevitost biljaka iznad drugih elemenata u terariju
Dodaje suptilan efekt prelaska mišem s CSS prijelazima za bolju interakciju korisnika

✅ Kritičko razmišljanje: Zašto su nam potrebni i .plant-holder i .plant selektori? Što bi se dogodilo da pokušamo koristiti samo jedan?

💡 Dizajnerski obrazac: Spremnik (.plant-holder) kontrolira raspored i pozicioniranje, dok sadržaj (.plant) kontrolira izgled i skaliranje. Ova podjela čini kod lakšim za održavanje i fleksibilnijim.

Razumijevanje CSS pozicioniranja

CSS pozicioniranje je poput režiranja predstave - vi određujete gdje svaki glumac stoji i kako se kreće po pozornici. Neki glumci slijede standardni raspored, dok drugi trebaju specifično pozicioniranje za dramatičan učinak.

Jednom kada razumijete pozicioniranje, mnogi izazovi u rasporedu postaju upravljivi. Trebate navigacijsku traku koja ostaje na vrhu dok korisnici skrolaju? Pozicioniranje to omogućuje. Želite skočni prozor koji se pojavljuje na određenom mjestu? To je također pozicioniranje.

Pet vrijednosti pozicioniranja

Vrijednost pozicioniranja	Ponašanje	Primjena
`static`	Zadani tok, ignorira top/left/right/bottom	Normalni raspored dokumenta
`relative`	Pozicionirano u odnosu na svoju normalnu poziciju	Male prilagodbe, stvaranje konteksta pozicioniranja
`absolute`	Pozicionirano u odnosu na najbližeg pozicioniranog pretka	Precizno postavljanje, preklapanja
`fixed`	Pozicionirano u odnosu na prikazni prozor	Navigacijske trake, plutajući elementi
`sticky`	Prebacuje se između relativnog i fiksnog ovisno o skrolanju	Zaglavlja koja se lijepe pri skrolanju

Pozicioniranje u našem terariju

Naš terarij koristi stratešku kombinaciju tipova pozicioniranja za stvaranje željenog rasporeda:

/* 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 ... */
}

Razumijevanje strategije pozicioniranja:

Apsolutni spremnici su uklonjeni iz normalnog toka dokumenta i pričvršćeni na rubove ekrana
Relativni spremnici biljaka stvaraju kontekst pozicioniranja dok ostaju u toku dokumenta
Apsolutne biljke mogu se precizno pozicionirati unutar svojih relativnih spremnika
Ova kombinacija omogućuje biljkama da se vertikalno slažu dok su pojedinačno pozicionirane

🎯 Zašto je ovo važno: Elementi plant trebaju apsolutno pozicioniranje kako bi postali povlačivi u sljedećem predavanju. Apsolutno pozicioniranje ih uklanja iz normalnog toka rasporeda, čineći interakcije povlačenja i ispuštanja mogućima.

✅ Vrijeme za eksperimentiranje: Pokušajte promijeniti vrijednosti pozicioniranja i promatrajte rezultate:

Što se događa ako promijenite .container iz absolute u relative?
Kako se mijenja raspored ako .plant-holder koristi absolute umjesto relative?
Što se događa kada promijenite .plant u relative pozicioniranje?

Izgradnja terarija pomoću CSS-a

Sada ćemo izgraditi staklenu posudu koristeći samo CSS - bez slika ili grafičkog softvera.

Stvaranje realističnog izgleda stakla, sjena i efekata dubine pomoću pozicioniranja i transparentnosti pokazuje vizualne mogućnosti CSS-a. Ova tehnika odražava kako su arhitekti pokreta Bauhaus koristili jednostavne geometrijske oblike za stvaranje složenih, lijepih struktura. Jednom kada razumijete ove principe, prepoznat ćete CSS tehnike iza Idemo izgraditi terarij staklenku dio po dio. Svaki dio koristi apsolutno pozicioniranje i dimenzioniranje temeljeno na postotcima za responzivni 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;
}

Razumijevanje konstrukcije terarija:

Koristi dimenzije temeljene na postotcima za responzivno skaliranje na svim veličinama ekrana
Pozicionira elemente apsolutno kako bi ih precizno složio i poravnao
Primjenjuje različite vrijednosti opaciteta za stvaranje efekta prozirnosti stakla
Implementira slojeve pomoću z-index kako bi biljke izgledale kao da su unutar staklenke
Dodaje suptilne sjene i profinjeni zaobljeni rub za realističniji izgled

Responzivni dizajn s postotcima

Primijetite kako sve dimenzije koriste postotke umjesto fiksnih vrijednosti u pikselima:

Zašto je to važno:

Osigurava da se terarij proporcionalno skalira na bilo kojoj veličini ekrana
Održava vizualne odnose između komponenti staklenke
Pruža dosljedno iskustvo od mobilnih telefona do velikih monitora
Omogućuje dizajnu da se prilagodi bez narušavanja vizualnog izgleda

CSS jedinice u praksi

Koristimo rem jedinice za zaobljene rubove, koje se skaliraju u odnosu na osnovnu veličinu fonta. Ovo omogućuje pristupačniji dizajn koji poštuje korisničke preferencije za veličinu fonta. Saznajte više o relativnim CSS jedinicama u službenoj specifikaciji.

✅ Vizualni eksperiment: Pokušajte promijeniti ove vrijednosti i promatrajte učinke:

Promijenite opacitet staklenke s 0.5 na 0.8 – kako to utječe na izgled stakla?
Prilagodite boju zemlje s #3a241d na #8B4513 – kakav vizualni utjecaj to ima?
Promijenite z-index zemlje na 2 – što se događa sa slojevima?

Izazov GitHub Copilot Agent 🚀

Koristite Agent način rada za dovršavanje sljedećeg izazova:

Opis: Napravite CSS animaciju koja će učiniti da biljke u terariju nježno lelujaju, simulirajući efekt prirodnog povjetarca. Ovo će vam pomoći da vježbate CSS animacije, transformacije i ključne okvire, dok istovremeno poboljšavate vizualni izgled vašeg terarija.

Zadatak: Dodajte CSS animacije ključnih okvira kako bi biljke u terariju nježno lelujale s jedne strane na drugu. Napravite animaciju ljuljanja koja lagano rotira svaku biljku (2-3 stupnja) lijevo i desno s trajanjem od 3-4 sekunde, i primijenite je na .plant klasu. Pobrinite se da animacija bude beskonačna i da ima funkciju ublažavanja za prirodnije kretanje.

Saznajte više o agent načinu rada ovdje.

🚀 Izazov: Dodavanje refleksija na staklu

Spremni za poboljšanje vašeg terarija s realističnim refleksijama na staklu? Ova tehnika će dodati dubinu i realizam dizajnu.

Stvorit ćete suptilne naglaske koji simuliraju kako svjetlost reflektira na staklenim površinama. Ovaj pristup je sličan načinu na koji su renesansni slikari poput Jana van Eycka koristili svjetlost i refleksiju kako bi naslikano staklo izgledalo trodimenzionalno. Evo što trebate postići:

Vaš zadatak:

Stvorite suptilne bijele ili svijetle ovalne oblike za refleksije na staklu
Pozicionirajte ih strateški na lijevoj strani staklenke
Primijenite odgovarajuće opacitete i efekte zamućenja za realističan odsjaj svjetlosti
Koristite border-radius za stvaranje organskih, mjehurićastih oblika
Eksperimentirajte s gradijentima ili sjenama za poboljšani realizam

Kviz nakon predavanja

Proširite svoje znanje o CSS-u

CSS može u početku djelovati složeno, ali razumijevanje ovih osnovnih koncepata pruža čvrstu osnovu za naprednije tehnike.

Vaša sljedeća područja učenja CSS-a:

Flexbox - pojednostavljuje poravnanje i raspodjelu elemenata
CSS Grid - pruža moćne alate za stvaranje složenih rasporeda
CSS varijable - smanjuju ponavljanje i poboljšavaju održivost
Responzivni dizajn - osigurava da stranice dobro funkcioniraju na različitim veličinama ekrana

Interaktivni resursi za učenje

Vježbajte ove koncepte uz ove zanimljive, praktične igre:

🐸 Flexbox Froggy - Savladajte Flexbox kroz zabavne izazove
🌱 Grid Garden - Naučite CSS Grid uz uzgoj virtualne mrkve
🎯 CSS Battle - Testirajte svoje CSS vještine kroz izazove kodiranja

Dodatno učenje

Za sveobuhvatne osnove CSS-a, dovršite ovaj modul na Microsoft Learn platformi: Stilizirajte svoju HTML aplikaciju pomoću CSS-a

Zadatak

Refaktoriranje CSS-a

Izjava o odricanju odgovornosti:
Ovaj dokument je preveden pomoću AI usluge za prevođenje Co-op Translator. Iako nastojimo osigurati točnost, imajte na umu da automatski prijevodi mogu sadržavati pogreške ili netočnosti. Izvorni dokument na izvornom jeziku treba smatrati autoritativnim izvorom. Za ključne informacije preporučuje se profesionalni prijevod od strane ljudskog prevoditelja. Ne preuzimamo odgovornost za nesporazume ili pogrešne interpretacije nastale korištenjem ovog prijevoda.

22 KiB Raw Blame History Unescape Escape