10 sfaturi simple pentru a învăța CSS pentru WordPress

Învățarea CSS poate fi copleșitoare, mai ales când nu știi de unde să începi și ce termeni să cauți atunci când rămâi blocat.

Deoarece CSS este un limbaj de stilare și nu un limbaj de programare complet, cum ar fi Javascript sau PHP, este de fapt destul de simplu de învățat, mai ales dacă aveți niște cunoștințe HTML la îndemână (pe care presupun că le aveți în scopul acestei postări).

În sondajul nostru pe blog, un număr covârșitor dintre voi ați menționat că doriți să vă îmbunătățiți jocul și să vă familiarizați mai bine cu CSS și de aceea am publicat recent o listă cu peste 150 de resurse pentru învățarea CSS, care ar trebui să vă ajute să începeți, mai ales în tandem cu acest post.

Astăzi, vă voi arăta fluxul de lucru și sfaturile care m-au ajutat să învăț CSS când am început pentru prima dată acum mulți ani. Începeți cu sfatul unu și mergeți în jos pe listă până la stăpânirea CSS.

Continuați să citiți sau treceți înainte folosind aceste link-uri:

• Construcție de bază
• Exersați cu selectoare și proprietăți simple
• Memorați modelul cutiei
• Învață prin practică
• Aranjați conținutul după lățime și înălțime
• Plutitoare și poziționare
• CSS avansat
• Replicați un site cu CSS
• Preprocesoare
• Cadre

1. Construcție de bază

Primul lucru este primul: pentru a învăța cum să-ți scrii propriul CSS, trebuie să știi cum să-l formatezi corect. Există de fapt două moduri corecte de a face acest lucru, dar una dintre ele vă ajută să vă mențineți mai organizat.

Deoarece este obișnuit ca HTML să fie prima limbă pe care oamenii o învață atunci când doresc să lucreze cu site-uri WordPress, este util să înveți sintaxa CSS scriind-o mai întâi într-un mod similar cu HTML.

Iată structura de bază pe care o ia CSS:

Este destul de simplu atunci când nu există multe stiluri pe care doriți să le implementați pentru un element de pe site-ul dvs., dar când începeți să vă familiarizați mai mult cu CSS, veți avea nevoie de mai mult de un stil pentru un element și de aici o astfel de structură poate deveni dezordonată, rapid.

De aceea, există o modalitate mai eficientă și mai organizată de a vă scrie CSS:

Acum puteți începe să cercetați termenii folosiți în acest exemplu. Fiecare dintre acești termeni sunt blocurile de bază ale CSS: clasă, ID, selector, proprietate și valoare. Proprietățile și valorile formează, de asemenea, ceea ce se numește declarație.

Acesta este un punct de plecare excelent pentru a învăța cum să scrieți propriul dvs. CSS și, odată ce începeți, vă puteți întreba unde ar trebui să scrieți toate acestea în fișierele dvs. WordPress.

În instalarea dvs. WordPress, orice fișier pe care îl vedeți și care se termină în .css este un fișier CSS, așa cum probabil ați ghicit deja. Fișierul principal pe care trebuie să-l căutați este foaia de stil și este etichetat ca style.css . Aici este deținută cea mai mare parte sau tot designul temei în termeni de culori, fonturi, imagini de bază și, eventual, o parte din aspectul temei.

Este posibil să observați, de asemenea, un fișier într-o temă prefabricată numită custom.css și, de obicei, aici ar dori să faceți orice modificări ale temei. Când faceți modificări în acest fișier, ar trebui să suprascrie stilurile existente în foaia de stil a temei.

Dacă adăugați pluginuri la tema dvs., acestea pot veni, de asemenea, cu fișiere CSS în folderul lor și sunt folosite pentru a modela aspectul pluginului.

2. Exersați cu selectoare și proprietăți simple

Următorul este să înveți despre selectoare și proprietăți de bază și despre modul în care acestea funcționează într-o temă. Selectori precum h1 , h2 și h3 pentru anteturi și p pentru textul paragrafului, de exemplu, precum și proprietăți precum font-family și background-color .

Există o modalitate ușoară de a exersa aceste noi abilități și de a vedea efectiv modificările pe care le faci, fără a fi nevoie să-ți pornești propriul blog WordPress. W3Schools are o mulțime de informații despre CSS, precum și exemple live în care le puteți schimba codul și, printr-o apăsare de buton, puteți vedea instantaneu modificările pe care le-ați făcut.

Când vedeți un exemplu, faceți clic pe butonul Încercați singur și se deschide o fereastră în care puteți testa câteva CSS de bază.

3. Memorați modelul cutiei

Sunt un susținător pentru referirea la cele mai comune informații, mai degrabă decât să le memorez pe toate. Poate pentru că găsesc că memoria îmi lipsește o mare parte din timp, dar aș spune mai degrabă că este pentru că există atât de multe referințe minunate online.

Puteți căuta cu ușurință selectoare și proprietăți pe care nu le cunoașteți într-o clipă. Este nevoie doar de o simplă interogare către motorul dvs. de căutare preferat, cum ar fi Google sau Bing, iar toate informațiile de care aveți nevoie sunt la doar un clic distanță de acolo.

Din fericire, nu este greu de învățat și, cu toată sinceritatea, dacă pot să-l memorez, nici tu n-ar trebui să ai nicio problemă cu el. În esență, include o zonă de conținut, umplutură, chenar și marjă.

4. Învață făcând

Odată ce începeți să vă familiarizați cu CSS, este o idee grozavă să o puneți în practică, alegând o temă care are un design complet de bază și schimbându-i stilul prin editarea foii de stil.

Este important să înțelegeți cât de simple modificări pot afecta drastic o temă uneori și alteori nu atât de mult. În cele din urmă, exersând cât de mult poți să te ajute să vezi vizual modificările pe care le faci și să conectezi acțiunile tale de scriere a codului la rezultatul final.

În schema mai mare a lucrurilor, odată ce reușiți să conectați punctele, nu numai că puteți scrie CSS rapid, dar ar trebui să puteți depana problemele în viitor, ceea ce devine o sarcină critică pentru proiectarea și dezvoltarea web.

Iată câteva teme excelente pe care să le exersați pe care le puteți instala gratuit pe site-ul dvs. WordPress. Nu toate sunt reprezentări perfecte ale modului în care ar trebui să arate și să funcționeze neapărat o temă, dar toate sunt puncte de plecare grozave pentru a afla cum poți schimba o temă cu CSS simplu.

Spektrum alb

Tema White Spektrum este o temă simplă, cu un aspect comun, care include zona principală de conținut, bara laterală, antetul și subsolul.

În afară de un strop de culoare când vine vorba de fonturi și link-uri, este o temă simplă și simplă cu care să lucrezi.

Fondator

Odată ce începeți să înțelegeți cu adevărat CSS, tema Fondatorului este minunată să aruncați o privire sub capotă și să aruncați o privire la foaia de stil, deoarece este puțin mai complexă decât celelalte teme enumerate până acum. Este receptivă, accesibilă și gata de traducere, include o pictograma hamburger pentru ecranele mobile, precum și multe alte detalii de design CSS care sunt grozave de studiat.

Chiar și cu aceste teme minimaliste de mai sus, s-ar putea să vă simțiți puțin copleșiți de câte lucruri nu le recunoașteți încă și este în regulă. Pe măsură ce bifați fiecare secțiune a acestei postări, ar trebui să înceapă să se adună mai mult.

5. Aranjați conținutul după lățime și înălțime

După ce ați instalat una dintre aceste teme, puteți începe, de asemenea, să schimbați aspectul introducând diferite lungimi și lățimi ale zonelor de conținut și ale selectoarelor.

Este un precursor al următorului pas și vă familiarizează cu diferitele zone de aspect dintr-o temă WordPress.

6. Plutitoare și poziționare

Aici CSS tinde să devină puțin complicat, deoarece puteți crea un aspect exclusiv cu CSS și, în special, flotanți și poziționare. Problema este că aceste proprietăți nu sunt concepute pentru a crea machete întregi și există o schiță pentru a actualiza machetele CSS.

Deocamdată, acesta este un mod obișnuit pentru mulți oameni care își fac aspectul corect . Este o idee grozavă să observați temele care există deja, inclusiv lista de mai sus, și să vedeți cum diferă în ceea ce privește utilizarea plutitoarelor și a pozițiilor.

7. CSS avansat

În acest moment, începi cu adevărat să te pricepi la CSS, dar mai sunt multe de descoperit:

• Pseudoclase – Folosit pentru a defini o stare specifică a unui element, cum ar fi trecerea mouse-ului și poziționarea imaginilor într-un anumit loc relevant pentru alte elemente.
• Selectoare complexe – Puteți deveni și mai specific cu stilul folosind selectoare mai avansate.
• Animații CSS3 – Crearea unui fade, pop sau alte tranziții atunci când treceți cu mouse-ul peste imagini și butoane.
• Capacitatea de reacție cu interogări media CSS3 – Una dintre cele mai ușoare moduri prin care puteți crea o temă receptivă este utilizarea interogărilor media.
• Transformări – Controlează dimensiunea și forma zonelor de conținut selectate.
• At-rules – Folosit pentru a importa lucruri precum fonturi și foi de stil în tema ta.
• Gradiente – Adăugarea unui gradient la tema dvs. fără a fi nevoie să utilizați o imagine.

Acestea sunt multe dintre elementele în care poți începe cu adevărat să vezi că designul temei tale ia cu adevărat contur. Este momentul perfect pentru a începe să-ți testezi abilitățile.

8. Replicați un site cu CSS

Cu toate aceste cunoștințe pe centură, s-ar putea să aveți nevoie să obțineți o centură mai robustă, dar, mai important, vă puteți pune în practică abilitățile, folosind o shell de bază a unei teme și adăugând propriile stiluri CSS de la zero.

Unul dintre cele mai utile lucruri pe care le puteți face pentru a vă progresa învățarea este să vă exersați cunoștințele în aplicațiile din lumea reală. Vă recomand să încercați să găsiți un site care vă place, apoi să-l replicați cât mai bine puteți pur cu CSS pe o temă WordPress goală.

Sigur, probabil că nu veți putea obține totul perfect și probabil că există o mulțime de elemente pe care nu le veți putea replica doar cu CSS, dar este o modalitate excelentă de a vă simți confortabil cu CSS.

Iată câteva teme de pornire excelente și gratuite pe care le puteți folosi:

• Fara antecedente

  

  Aceasta este oasele goale. Există doar HTML5 în această temă, așa că sunteți liber să adăugați CSS-ul dvs. fără să vă faceți griji cu privire la conflictele dintre stiluri. Cu toate acestea, vine cu tot ce aveți nevoie pentru a începe să vă stilați tema.

• HTML5 gol

  

  HTML5 Blank este o temă WordPress standard care include unele stiluri, deși nu prea. Este un început grozav dacă nu ești prea dornic să-ți pornești CSS de la zero.

• Subliniere

  

  Dacă sunteți puțin aventuros și doriți să încercați o temă de pornire mai avansată, Underscores este o opțiune excelentă, totuși, nu pentru cei slabi de inimă, deoarece vine cu două stiluri de eșantion de teme preîncărcate. Include, de asemenea, câteva tehnici avansate și codare care îl fac un instrument excelent de învățare.

Există și tema HTML5 Reset WordPress pe GitHub. Include funcții care sunt puțin mai avansate, dar asta este, în cele din urmă, ceea ce o face o temă de pornire valoroasă.

9. Preprocesoare

Odată ce cunoașteți dezavantajele CSS, este o idee grozavă să aflați despre preprocesoare și, în special, SASS și LESS. Ambele vă ajută să vă organizați CSS-ul, astfel încât să fie mult mai ușor de scris și mai accesibil pentru editările viitoare.

Preprocesoarele vă fac CSS curat și ușor de urmărit și a devenit rapid o abilitate esențială în rândul dezvoltatorilor web. Deși există o dezbatere în desfășurare cu privire la care este cel mai bun, SASS tinde să fie preprocesorul cel mai folosit până în prezent.

Dacă doriți să încercați mâna la SASS în contextul WordPress, consultați tema Bones. Este compus în principal din HTML5, astfel încât să puteți încerca stilarea cu bitul încorporat de SASS care este deja inclus.

10. Cadre

În dezvoltarea web, cadrele sunt o structură pentru crearea de site-uri web dinamice. În cele din urmă, scopul unui cadru este de a face site-urile mai rapide, fără a pierde din funcționalitate.

Odată ce aveți CSS jos pat, puteți accelera dezvoltarea temei utilizând un cadru.

Unul dintre cele mai populare cadre este Twitter Bootstrap. Este creat pentru a răspunde imediat din cutie și utilizează atât SASS, cât și LESS, precum și multe componente CSS personalizate.

Încheierea

Înarmat cu o programă de învățare și cu sfaturi care să te ajute pe parcurs, CSS nu ar trebui să fie prea copleșitor pentru ca tu să te descurci. În plus, ar trebui să fiți gata acum să vă încercați să vă stilați propria temă WordPress.

Pentru mai multe resurse despre învățarea CSS și WordPress, consultați câteva dintre celelalte postări ale noastre: A Mega Guide to Learn and Referencing CSS for WordPress: 150+ Resources and From WordPress Beginner to Pro: 200+ Career-Boosting Resources.

• CSS