10 jednostavnih saveta da naučite CSS za WordPress


10 jednostavnih saveta da naučite CSS za WordPress

Kada krećete da učite programiranje, uvek je najteže pronaći neku osnovu. U veb programiranju (eng. web development) vam je bar lako – sve kreće od HTML-a i CSS-a. Kada hoćete da pravite sajtove koristeći WordPress platformu, za početak vam je potrebno osnovno znanje/poznavanje pojmova iz HTML-a, što ćemo uzeti kao podrazumevano da poznajete. Dalje, kako biste stilizovali vaš WP sajt, potrebno je da naučite osnove CSS stilova, a to su sledeće stvari.


1. Osnovna konstrukcija

Formatiranje je prva stvar koju treba da naučite kada krećete u vode CSS-a, i postoje dva načina.

Kada je HTML prvi jezik koji se nauči, pri izradi WordPress sajtova, obično je najlakše da se sintaksa CSS-a nauči slično kao u HTML-u. Osnovna CSS struktura izgleda ovako:

css1

Ovakva struktura je dovoljna kada ne primenjujete previše stilova na elemente na sajtu, ali kada se malo bolje upoznate sa CSS-om, sigurno će se stvari malo zakomplikovati kada se javi potreba za više elemenata.

Upravo iz tog razloga, biće vam lakše da stvari organizujete ovako:

css2

Primer sa slike sastoji se od osnovnih gradivnih elemenata CSS-a: klasa (class), ID, selektor (selector), svojstvo (property) i vrednost (value). Svojstva i vrednosti zajedno čine deklaraciju (declaration). Verovatno ste se dosad zapitali gde treba da ispišete sve ove stvari u WP datotekama.

Naime, kada instalirate WordPress, treba vam svaka datoteka koji se završava na .css. Među njima, glavna je style.css, i u njoj se pravi većina izmena boja, fontova, osnovnih slika, kao i rasporeda elemenata unutar teme.

Kada pravite izmene u datoteci pod nazivom custom.css, one se obično primenjuju na čitavu temu i promene njene postojeće stilove.

Kada instalirate dodatke na temu (eng. plugin), pojaviće vam se i njihove CSS datoteke koje takođe možete stilizovati i prilagođavati.


2. Prosti selektori i svojstva

w3css

Osnovni selektori su npr. h1, h2, h3 za naslove i podnaslove, p je za tekst nekog pasusa, a svojstva su npr. font-family i background-color.

Sve promene koje napravite možete videti i bez pravljenja sopstvenog WP bloga. Npr. na sajtu w3schools možete isprobati sve promene u kôdu, ali i naći pregršt informacija o CSS-u kao i korisnih primera – samo pritisnite dugme Try it yourself i testirajte u novoj kartici koja se otvori.

Obavezno sačuvajte stranice o HTML i CSS bojama. Biće vam korisne.

 


3. Zapamtite „model kutije“ (the box model)

Iako u današnje vreme sve možete vrlo lako izguglati, pamćenje ovog modela biće vam vrlo korisno. Osnovni raspored elemenata u CSS-u prikazan je u tzv. modelu kutije (the box model), u kome su prikazani sledeći elementi: sadržaj (content), ispuna (padding), graničnik (border) i margina (margin).

model kutije


4. Učenje iz iskustva

Pošto je učenje kroz iskustvo najbolji način da nešto utvrdite i dobro zapamtite, ne bi bilo loše da probate da modifikujete neke osnovne teme, poput White Spektrum, Simpler, Founder ili Elucidate, koje su sve besplatne i mogu se preuzeti preko WP sajta. Preko njih ćete naučiti upravo kako se neke sitne izmene mogu odraziti na čitavu temu, i ponekad imati neželjene posledice.


5. Sredite širinu i visinu sadržaja

Kada instalirate neku od gorenavedenih tema, možete početi da se igrate sa rasporedom – tako što ćete menjati širinu i dužinu prostora u koji smeštate sadržaj ili selektorâ. Ovo nas, zapravo, vodi do sledećeg koraka: pozicioniranja zona i menjanje njihovog rasporeda u temama.


6. Pozicioniranje

Sada kada smo utvrdili lakše stvari, moramo malo zakomplikovati. Pozicioniranje i svojstvo float samo su neke od stvari koje morate naučiti ako želite da napravite dobar raspored elemenata.

Definišite gde šta treba da se nalazi (header, footer, sidebar, main content area) uz pomoć CSS grid sistema.


7. Napredni CSS

Dalje, za naprednije poznavanje CSS-a, potrebno je da naučite sledeće stvari:

  • šta su pseudo klase
  • složeni selektori
  • CSS3 animacije
  • responzivni dizajn (CSS3 media queries)
  • transformacije
  • at-rules
  • gradijenti

Uz pomoć svih tih elemenata, tema koju oblikujete konačno će početi da dobija željeni izgled, na kome ćete moći još da vežbate novonaučene veštine.


8. Iskopirajte neki sajt

Još jedna vežba koja vam može biti od velike koristi je kopiranje. Ne bukvalno kopiraj+nalepi, nego kodiranje od nule koristeći CSS stilove. Koristeći gorenavedene teme, probajte da iskodirate neki sajt koji vam se dopada (nemojte nešto previše komplikovano, ipak ste početnik).

Možete probati i sa temama BlankSlate, HTML5Blank i Underscores, ili probajte sa HTML Reset WordPress Theme na sajtu GitHub.


9. Preprocesori

Korišćenje preprocesora poput Sass i Less omogućava vam da bolje organizujete CSS stilove i pravite izmene u njima na mnogo lakši način. Prepocesori služe za prečišćavanje CSS-a i lakše praćenje, a najkorišćeniji je upravo Sass (eng. Syntactically Awesome Style Sheets), koji je „pravi skriptni jezik sa izrazima, funkcijama, varijablama, uslovnom logikom i petljama.“


10. Okruženja (frameworks)

I na kraju, kako biste stvarali dinamične vebsajtove koji su brzi i funkcionalni, biće vam potrebno znanje o korišćenju okruženja (eng. framework). Npr. Tviterov Butstrep (Bootstrap) jedan je od najpopularnijih primera dobrih okruženja (responzivno je i koristi Sass i Less sintaksu, te će vam biti lak za korišćenje).


A kako ste vi počeli da učite CSS? Slobodno podelite svoje iskustvo sa nama u komentarima ispod ovog teksta!


Vidi još:

Vesna Savić

Community Manager at PopArt Studio
Dedicates her time to learning about better means of communication, translating knowledge into practice, and is a passionate reader.

Latest posts by Vesna Savić (see all)

facebook
twitter
google
pinterest