CSS – Web dizajn kurs
CSS je jezik za stilizaciju HTML-a koji smo naučili i njegovo puno ime je Cascading Style Sheets, i radi identično kao i HTML, čitamo kod kaskadno idemo od gore ka dole i ako neko pravilo prepravimo negde dalje u kodu, a imamo ga već negde iznad, izvršiće se onda kada ga poslednji put pozovemo. Takve probleme rešavaju naprednije tehnike pisanja CSS-a kso što je SASS koji kako i tvorci kažu CSS-u dodaje super moći.
Ono što sadrži jedno CSS pravilo su 2 vrednosti: svojstvo i vrednost. I zajedno ih nazivamo deklaracija i jedna takva deklaracija se završava sa znakom tačka-zarez (;). Jedno CSS pravilo uglavnom sadrži više deklaracija.
Selektori
Selektori su ključni CSS termin i njih koristimo da pristupimo nekom html elementu i stilizujemo ga. Imamo mnoštvo selektora i načina kako to da uradimo: selektor tipa i to“gađa“ ime elementa, zatim ID selektor (#), zatim selektor klase (.), zatim imamo i pseudo selektore koji nisu fizički prisutni u html kodu, već su ugrađeni u CSS i njih označavamo sa dvotačkom (:). Imamo i kombinatore i to je znak između dva selektora (space jedan, >, +) jedan space na tastaturi između dva elementa znači da je prvi roditeljski elemenata u odnosu na drugi, znak > da selektuje samo direktnu decu, dok + selektuje susednii elemenat. Imamo i selektore pseudo elemanata (pišemo ih sa ::) gde pre ili posle možemo da dodamo ceo jedan html blok i na taj način pišemo veoma kvalitetan CSS kod. Nećemo sad ovde pisati sve selektore i primere oni su zapravo u videu ispod, ovaj tekst je samo mali uvod i ispomoć koja može biti korisna kao uvod.
Gde pišemo CSS
Već u prvoj lekciji smo prošli načine pisanja koda i rekli da možemo da ugrađujemo već u sam html elemenat i taj način se nikako ne preporučuje jer takav kod imam veliku specifičnosti i nećemo moči eksterno da „pregazimo“ ta pravila, a i drugi programeri to ne očekuju i to bolje odmah da „zaboravite“. Inline ili umetnuti stilovi način je u pitanju, kao što smo rekli pisanje pomoću style atributa u samom otvarajućem tagu nekog elementa.
Drugi način zovemo Internal ili ugrađeni stilovi i to je takođe „loš“ način jer takav kod isto ima problem pregladnosti jer ga stavljamo u HEAD tag i ako imamo više koda sve ćemo imati na jednoj stranici, to je potpuno nerentabilno, to je u redu samo u vežbama kao što ćemo raditi u prezentaciji nekih pravila, svakako je jedini pravi način u zasebnom fajlu. Problem ovog načina je sa druge strane jer je taj css vezan samo za stranicu na kojoj se nalazi i ako imamo više stranica to nije pravi način.
A pravi način je u zasebnom fajlu i taj način se naziva External ili spoljni stilovi. Ovo je najbolji način, ali i prv dva imaju neke svoje specifične momente kada ih možemo koristiti, ali generalno ne, pišite u zasebnom fajlu ili više njih CSS. Zapravo industrijski standard je postao SASS i njega treba naučiti u drugoj fazi, kada se nauči osnova i kako radi sam CSS jezik.
Najkorišteniji stilovi
Ovaj blog post neće biti prezentacija svih stilova deklarativno, već više narativno, dok u videu imate „žive“ primere. Ali ćemo nabrojati ono što je veoma važno i često korišteno, a to su za početak fontovi. Sa njima veoma pažljivo, treba koristiti na početku dok ne steknemo znanje i iskustvo jedan font ili najviše 2. Ako koristimo jedan, onda manipulišemo sa različitim deblijinama fonta, dok ako imamo 2 onda je veš lakše možemo uzeti jedan za naslove, drugi za sve ostalo i tu još dodati manipulaciju debljinom fonta.
Zatim boje i stilizacija teksta donose dosta bogatstva u izgledu, kažem kada to naučite onda ste već u mogućnosti da pravitte lepe veb lokacije. Liste takođe pomažu kada imamo nabrajanje i veoma čitljivo možemo da se izrazimo. Zatim dolazi borderi i boksovi koji već omogućuju lakšu segmentaciju sadržaja i odvajanje, podvačenje i senke, kao i samo fizičko odvajanje blokova su od velike pomoći. Pozadine kako boja, ali i kao pozadinske slike i gradijenti takođe pomažu da imamo ubedljiv dizajn koji može da zadovolji vizuelno istančanije posetioce sajta.
Načini izrade izgleda sajta (layouta) su zapravo osnovni pravci razvoja, imamo opcije zasnovane na blokovima i tu je bio dominantan box model, na početku potpomognut Float pravilom, da bi zatim u „modu“ ušao grid (žičani model podele u 12 kolona) koji su iskoristili mnogi CSS frejmvorci kao što je Bootstrap, Tailwind, Ink, Gridism i mnogi drugi….Zapravo to možete napraviti i sami na koji god način želite. Najdominantiniji i trenunto najaktuelniji preistup je Flexbox, jednodimenzioni sistem izrade layouta. Imamo dve ose koje koristimo razdvojeno ili horizontalnu ili vertikalnu, što je donekle ograničavajući faktor. I to je dovelo da Grid-a kao sistema koji je već tu i fali mu još malo podržanosti od starijih browsera.
Sam početak izrade layouta je bio zasnovan na tabelama i dolaskom DIVOVA to je olakšano jer su sajtovi dobijali složenost i tabele nisu bile efikasan način oganizovanja sadržaja i tradiocionalan model okvira bio je tako osmišljen da uz gradivne (div) elemente koji su zapravo elementi koji okupljaju u sebe druge elemente i pomoću Floata pravimo ozbiljnije stranice u odnosu na sistem zasnovan na tabelama. Tradicionalni model okvira je i dalje aktuelan na nekoliko godina starijim satovima i aplikacijama i naša je preprouka da sve št je vezano za CSS treba znati pa i Float kao takav. Flex i Grid kao fleksibilni modeli okvira za izradu sajtova su trenutno dominantni sistem rada i na njega treba da stavite akcenat. Flex je i osnova za naš web dizajn kurs. Sam fleksibilni model omogućuje jednostavnije deljenje prostora na sajtu n posebne celine, redove i kolone, ali i lako i precizno centriranje i određivanje visine elemenata. Doduđe i sam Float sistem je tu dosta pružao uz pomoć pozicioniranja, ali i korišćenje transform translate pravila, ali svakako je Flex nešto što nam je svima mnogo olakšalo posao.
Sve ovo je i bilo diktirano potrebana prilagodljivog responsive koji je dolaskom mobilnih telefona i tableta, kao i različitih veličina lap topova i monitora dodatno „zakuvao“ čorbu veb dizajnerima koji sada moraju mnogo da se potrude da dizajn bude adaptivan i potpuno prilagodljiv.
Zaključak
U ovom dvosatnom uvodu u CSS možete da dođete do dobrog razumevanja osnova i fundamenta u daljem korišćenju ovod fenomanalnog jezika koji vam otvara ozbiljnije vrata veba, jer dolazite do tačke da vaše stranice lepo izgledaju i to je prvi set skilova koji omogućuje zaposlenje. Teško će to ići samo sa HTM i CSS jezicima, ali ako „rasturate“ CSS ja sam ubeđen da možete da se zaposlite gde želite, jer mnogo ljudi zna CSS, ali biti ekspert je nešto drugo. Ako možete da napravite sve što „vidite“ siguran sam da ste veoma poželjni na tržištu rada.
Naša sledeća stanica je Flexbox gde ćemo proći prvo teorijski Flex, a onda i napraviti jedan projekat u kojem ćemo objediniti sve što smo naučili do sada u odeljcima HTML i CSS. Posle toga prelazimo na WordPress i pokazati da bez ovih tehnologija teško možete da pravite dobre WP sajtove. Sami page bilderi su okviri za pisanje CSS-a zapravo dodajete stilove na osnovnu strukturu koju pravite kroz redove i kolone i ovo znanje vam je „zlata“ vredno.
CSS osnovni kurs - Slobodan Mirić
20. mart 2022. @ 17:54
[…] blog postu nećemo pisati o samom CSS-u, ko hoće dodatno o tome da čita može to na inicijalnom tekstu na sajtu Websites […]
23. mart 2022. @ 13:36
Blogovi su vam super 🙂 Baš lijepo i jednostavno… mislim da će mi sada biti lakše pratiti videe
Vrijedni ste jako… svaka čast. Hvala vam na tome
23. mart 2022. @ 13:43
Blogovi su nešto najbolje što je dao veb, to je ona konkretna vrednost koju neka veb lokacija daje, nešto opipljivo. Tako da i mi gledamo da nam blog bude važna stavka.