Cum puteți utiliza CSS – Sfaturi și trucuri pentru design web pentru începători

Chiar și tu poți învăța cum să folosești CSS pentru a-ți stila paginile web cu aceste sfaturi CSS pentru începători.

Nu trebuie să știți nimic despre codul computerului. Tot ce trebuie să știți este cum să copiați și să lipiți.

Dar mai întâi, ce este CSS?

Cascading Style Sheets (CSS) este un cod de limbaj pentru foaia de stil pe care dezvoltatorii de teme îl folosesc pentru a descrie și a schimba prezentarea sau aspectul unui document HTML.

Ce face CSS?

În termeni simpli, fișierul CSS face ca paginile HTML să arate frumos.

Indiferent de platforma de blogging pe care o utilizați, vă puteți schimba proprietățile CSS pentru a face blogul să arate și mai bine.

Nu contează ce platformă de blogging folosești.

Veți avea o opțiune în setările temei pentru CSS personalizat sau CSS suplimentar .

S-ar putea să nu te fi uitat niciodată la această opțiune.

Sau, dacă aveți, s-ar putea să credeți că este prea dificil să învățați cum să codificați.

Dar este super ușor.

Nu știu nimic despre dezvoltarea web sau sintaxa CSS, dar pot schimba un atribut de stil în câteva secunde.

Tot ce trebuie să faceți este să utilizați instrumentele pentru dezvoltatori browser-ul dvs. Chrome sau Firefox și să aflați câteva trucuri și sfaturi simple CSS.

Să vedem cât de ușor este.

De ce ai vrea să înveți cum să editezi CSS-ul blogului tău?

Probabil că aveți o mulțime de setări în tema blogului dvs.

Dar există multe elemente mai mici care ar putea lipsi.

Chiar și în temele premium pentru WordPress, unele opțiuni nu sunt disponibile în opțiunile standard.

Acesta este motivul pentru care vă puteți ajuta CSS-ul să funcționeze mai bine făcând propriile editări și modificări.

Schimbând o foaie de stil externă, poate face referire la toate paginile dvs. HTML.

Dacă modificați titlurile HTML pe o singură pagină, aceasta va schimba eticheta HTML pe toate paginile dvs.

Referința se numește pseudo-element.

Înseamnă că dacă schimbați aspectul titlului dvs. H2, se vor schimba toate titlurile H2 de pe site-ul dvs.

Dar nu trebuie să înveți totul despre aceste complicații.

Tot ce trebuie să știți este că funcționează și că vă puteți modela blogul exact așa cum doriți să arate, fără să știți absolut nimic despre codificare.

Să începem cu câteva sfaturi CSS simple pentru începători.

Cum să vă schimbați cu ușurință CSS-ul inline

Primul pas este să vă deschideți blogul în Firefox, Chrome sau Microsoft Edge.

În exemplele de mai jos, am folosit Firefox. Mi se pare un pic mai prietenos de utilizat decât Chrome.

Dar ambele funcționează în mod similar.

Deschide-ți blogul într-o filă sau fereastră nouă. Puteți naviga la pagina pe care doriți să o modificați.

Acum deschideți Instrumente pentru dezvoltatori, Inspector, din meniul Instrumente din Firefox sau din meniul Vizualizare din Chrome.

Faceți clic pe Inspector pentru a deschide panoul de instrumente.

Puteți selecta orice element de stil inline de pe pagina dvs. utilizând săgeata de selectare din partea stângă sus a panoului de instrumente.

Mutați cursorul pe pagină pentru a selecta un element. Sau puteți face clic pe elemente individuale din listă.

Veți vedea fiecare element pe care îl selectați evidențiat cu albastru în vizualizarea browserului dvs. a paginii dvs. web.

Acum sunteți gata să faceți modificări la modul în care arată pagina dvs.

Folosind selectorul CSS

În exemplul meu, voi schimba aspectul elementului de titlu H2.

Puteți alege să schimbați elementul H1, textul corpului sau legenda unei imagini.

Vreau să încep prin a schimba dimensiunea fontului. Tot ce trebuie să faceți este să faceți clic pe dimensiunea fontului etichetei de stil și să schimbați numărul.

Am schimbat dimensiunea de la 33px la 56px. Puteți vedea că dimensiunea titlului este acum mai mare.

Nu vă faceți griji. Nu ți-ai schimbat pagina de blog live. Ceea ce vedeți în panoul browserului este doar o previzualizare a modificărilor dvs.

Vă puteți juca cât de mult doriți cu orice element HTML.

Tot ceea ce vedeți în panoul browserului este doar o previzualizare a modului în care vor arăta modificările dvs. la o regulă CSS.

Acum vreau să schimb culoarea textului.

Dacă faceți clic pe punctul de culoare dintre eticheta de culoare și număr, deschideți selectorul de culori.

Acum pur și simplu alegeți culoarea pe care doriți să o utilizați.

Este simplu să schimbați culoarea atributului HTML. Aici am trecut de la negru la albastru.

Arată bine, dar înălțimea liniei ar putea fi mai bună. O voi schimba.

Setarea curentă este 1,2, ceea ce este prea mult spațiu între linii. Vreau liniile mai apropiate.

Deci, o voi schimba la 1.0.

Asta arată mult mai bine.

Am făcut trei modificări la modul în care arată titlul meu H2 în modul de previzualizare. Am schimbat dimensiunea fontului, culoarea și spațierea între linii.

Acum este timpul să adaug aceste modificări pe site-ul meu live.

Cum să obțineți codul pentru site-ul dvs

Trebuie să copiați liniile de cod pe care le-ați modificat.

Selectați și copiați tot codul. Asigurați-vă că copiați toate liniile, inclusiv ultima paranteză.

Acum lipiți-l într-un editor de text. Puteți folosi Notepad pe un PC sau Text Editor pe un Mac.

Cealaltă schimbare pe care am făcut-o a fost la culoare. Trebuie să copiem și această linie.

Trebuie doar să copiați linia pentru culoare.

Puteți vedea că elementul H2 este îngroșat în imaginea de mai sus. Înseamnă că este același pseudo-element ca primul nostru cod. Deci le puteți folosi împreună.

Copiați linia.

Acum adăugați linia în editorul dvs. de text.

Poate fi necesar să adăugați sau să ștergeți câteva spații, astfel încât linia dvs. de culoare să fie indentată la fel.

Acum sunteți gata să adăugați aceste trei modificări pe site-ul dvs. live.

Adăugați codul pe site-ul dvs

Accesați opțiunile temei și selectați opțiunile CSS.

În temele WordPress, se află în Theme Customizer și se numește CSS suplimentar sau CSS personalizat.

Se va numi ceva similar pe alte platforme de blogging.

Acum copiați tot codul din editorul de text și inserați-l în fila Personalizator.

De îndată ce lipiți codul, previzualizatorul vă va arăta modificările pe care le-ați făcut.

Faceți clic pe Publicare și ați făcut-o.

Iată o comparație între modificările mele înainte și după.

Poți face mult mai mult

Sfaturile mele CSS pentru începători Introducerea pas cu pas în editarea stilului dvs. HTML CSS este doar începutul.

Puteți face mult mai mult dacă doriți să experimentați și să încercați să schimbați alte elemente.

Este ușor să adăugați chenare sau umbre imaginilor, să mutați textul la stânga sau la dreapta sau să redimensionați lățimea corpului textului.

Puteți muta marginile sau puteți reduce sau crește umplutura și puteți modifica alinierea.

Există sute de opțiuni pe care le puteți alege să le editați.

Amintiți-vă că atunci când lucrați în Instrumente pentru dezvoltatori, nu veți afecta site-ul dvs.

Orice modificări pe care le faceți sunt o previzualizare și sunt doar vizuale în acea fereastră de browser.

Nu contează ce încerci sau dacă funcționează sau nu.

Gândiți-vă la el ca un loc de joacă pentru a afla cât mai multe puteți face pentru a vă stila site-ul sau blogul.

Fii curios și te vei distra învățând această nouă abilitate cu aceste sfaturi despre CSS pentru începători.

Un mare sfat bonus cu Instrumentele pentru dezvoltatori

Acum că aveți deschis cadrul Instrumentelor pentru dezvoltatori, există un lucru foarte frumos pe care îl puteți face.

Puteți testa viteza site-ului dvs.

Tot ce trebuie să faceți este să faceți clic pe fila Rețea.

Apoi faceți clic pe CTRL + R.

Veți vedea timpul de viteză a paginii complet încărcate în roșu pe linia din partea de jos marcată cu săgeata.