Învățarea CSS poate fi dureroasă, mai ales când nu știi de unde să începi.

CSS este un limbaj de stil și nu un limbaj de programare precum Javascript sau PHP, este de fapt destul de ușor de învățat, mai ales dacă aveți cunoștințe de HTML.

Astăzi vă voi oferi câteva sfaturi care vă pot ajuta să învățați CSS.

1. Construcția de bază

Ce trebuie să știi mai întâi: To invata sa scrii propriul dvs. CSS, trebuie să știți cum să îl formatați corect. Există, de fapt, două moduri corecte de a face acest lucru, dar una dintre ele te ține organizat.

Deoarece este obișnuit ca HTML să fie primul limbaj pe care îl învață oamenii atunci când vor să lucreze cu site-uri WordPress, ajută la învățarea sintaxei CSS scriind-o mai întâi într-un mod similar cu HTML.

Iată structura de bază a CSS:

.class selector {proprietate: valoare;} #id selector {proprietate: valoare;}

Este destul de simplu atunci când nu există o mulțime de stiluri pe care doriți să le implementați pentru un element de pe site-ul dvs., dar când începeți să vă simțiți confortabil cu CSS, veți avea nevoie de mai mult de un stil. pentru un element, care va face o astfel de structură nepotrivită.

De aceea există un mod mai eficient și mai organizat de a scrie CSS:

.class selector {proprietate: valoare; Proprietatea 2: valoarea 2; Proprietatea 3: valoarea 3; } #id selector {proprietate: valoare; Proprietatea 2: valoarea 2; Proprietatea 3: valoarea 3; }

Acum puteți începe să examinați termenii utilizați în acest exemplu. Fiecare dintre acești termeni reprezintă elementele de bază ale CSS: clasă, ID, selector, proprietate și valoare. Proprietățile și valorile sunt, de asemenea, numite declarație.

Acesta este un excelent punct de plecare pentru invata sa scrii propriul dvs. CSS și odată ce începeți, vă puteți întreba unde ar trebui să scrieți toate acestea la sfârșitul fișierelor WordPress.

În instalarea dvs. WordPress, orice fișier cu o extensie .css este un fișier CSS, așa cum probabil ați ghicit până acum. Fișierul principal pe care ar trebui să îl căutați este foaia dvs. de stil care poartă numele „ style.css". În acest fișier veți găsi în general tot stilul temei.

2. Convenabil cu selectoare simple

Apoi, trebuie să învățați selectoarele și proprietățile de bază, dar mai important, modul în care funcționează într-o temă. Selectoare precum h1, h2 et h3 pentru anteturi și p de exemplu textul paragrafului, precum și proprietăți precum font-family și „background-color” pentru culoarea de fundal.

Există o modalitate ușoară de a exersa aceste noi abilități și de a vedea efectiv schimbările pe care le faci, fără a fi nevoie să le începi pe ale tale. WordPress blog. W3Schools are o mulțime de informații despre CSS, precum și exemple în care le puteți modifica codul pentru a le practica rapid. Puteți citi și acest lucru În timpul Mathier Nebra pe OpenClassrooms.

3. Memorizează modelul Box

Puteți găsi cu ușurință selectoare și proprietăți despre care nu știți în cel mai scurt timp. Tot ce trebuie să faceți este să faceți o căutare simplă pe Google sau Bing. 

model de cutie

Acesta poate fi cazul cu multe (sau mai) lucrurile din viață, dar modelul cutiei trebuie să fie o excepție.

În esență, acestea sunt elementele de bază ale machetei CSS pe care trebuie să le stăpânești pentru a înțelege o mulțime de proprietăți. Aspectul casetei include, de asemenea, multe elemente pe care le puteți personaliza.

Din fericire, nu este greu de învățat și, cu toată sinceritatea, dacă pot să-l memorez, nu ar trebui să aveți o problemă. În esență, șablonul de casetă include o zonă de conținut, marginile interioare sau căptușeala, marginile sau chenarul și marginea externă sau marginea.

4. Învățarea prin

Odată ce ați început să vă familiarizați cu CSS, este o idee minunată să practicați alegerea unei teme care are un design complet de bază, pe care să faceți modificările.

Este important să înțelegem cât de simple schimbări pot afecta o temă drastic uneori și alteori nu atât de mult. În cele din urmă, practicarea cât poți, ar trebui să te ajute să vezi vizual modificările pe care le faci.

În proiectul lucrurilor, odată ce puteți conecta punctele, nu numai că puteți scrie CSS rapid, dar trebuie să fiți capabil să depanați probleme în viitor, ceea ce devine o sarcină critică pentru dvs. proiectare și dezvoltare web.

5. Au conținuturi în funcție de lățimea și înălțimea

După ce ați instalat o temă simplă la care puteți lucra, puteți începe imediat să schimbați aspectul specificând diferite lungimi și lățimi pentru zonele de conținut.

Acest lucru vă va permite să vă familiarizați cu aspectul Teme WordPress

6. flotoare și poziționare

Aici CSS tinde să devină puțin dificil, deoarece puteți crea un aspect numai cu CSS și mai ales cu flotante și poziționare. Problema este că aceste proprietăți nu sunt concepute pentru a crea prezentări întregi.

În acest moment, atât de mulți oameni afișează un aspect complet corect. explorează codul temei pe care ai ales să o lucrezi.

7. CSS avansat

În acest moment, veți începe să rămâneți cu CSS, dar mai sunt multe de descoperit:

  • Nickname clase  - Folosit pentru a seta o stare specifică a unui element, cum ar fi cursorul mouse-ului și poziționarea imaginii.
  • Selectoare complexe  - vă puteți regla fin stilul cu selectoare mai avansate.
  • animații CSS3  - Crearea unei animații de estompare sau a altor tranziții.
  • Răspundeți la interogările media CSS3  - vă va permite să creați teme receptive în cel mai scurt timp.
  • transformatele  - Controlați dimensiunea și forma zonelor de conținut selectate.
  • La-norme  - utilizat pentru importul unor lucruri precum fonturi și foi de stil în tema dvs.
  • gradienți  - Adăugarea unui gradient la tema dvs. fără a fi nevoie să utilizați o imagine.

Acestea sunt multe elemente în care puteți începe cu adevărat să învățați pentru a da mai mult stil temei voastre.

Asta e tot ce a fost pentru a învăța CSS pentru dvs WordPress blog. Simțiți-vă liber să împărtășiți acest tutorial cu prietenii dvs. de pe rețelele de socializare preferate.