CSS este unul dintre cele mai importante limbaje de programare. Acesta se utilizeaza pentru a defini stilurile pentru paginile tale web, inclusiv designul, aspectul si variatiile de afisare pentru diferite dispozitive si dimensiuni de ecran. Astfel, cu ajutorul lui se stabilesc fonturi, alineate, culori si multe alte configuratii pe care site-ul tau trebuie sa le aiba. De ce este atat de important? Deoarece, ajuta utilizatorul sa aiba o experienta placuta in timpul navigarii si simplifica modul in care informatiile sunt prezentate.
Cuprins:
- Ce este CSS ?
- CSS in HTML – ce inseamna stilizarea paginilor HTML
- Limbajul de programare CSS – caracteristici
- Elemente si atribute in CSS
1. Ce este CSS ?
Despre CSS se poate spune ca este un limbaj de programare, care se axeaza pe stilul utilizat in prezentarea unui document scris intr-un limbaj de marcare, cum ar fi HTML. Denumirea CSS provine din expresia Cascading Style Sheets si este o tehnologie de baza a World Wide Web, alaturi de HTML si JavaScript.
El este conceput pentru a permite stilizarea continutului unei pagini web si a prezentarii acesteia, inclusiv a aspectului, fontului si culorilor. Aceasta procedura imbunatateste in mod real accesibilitatea continutului, ofera mai multa flexibilitate si control in ceea ce priveste specificatiile caracteristicilor prezentarii, permite ca mai multe pagini web sa partajeze formatarea si reduce repetarea si complexitatea continutului structurat.
De asemenea, formateaza pagina in asa fel incat sa fie fezabila pe diferite tipuri de ecrane, prin voce, dar si pe dispozitivele tactile Braille. Mai mult, are reguli pentru formatarea alternativa in cazul in care continutul este accesat de pe un dispozitiv mobil si modifica aspectul paginii in asa fel incat sa poate fi vizibil din orice perspectiva.
CSS este unul dintre cele mai utilizate limbaje de stilizare de pe web, din mai multe motive:
- ajuta la economisirea timpului – codul se poate scrie o singura data si apoi se poate reutiliza in mai multe pagini HTML. De asemenea, puteti defini un stil pentru fiecare element HTML si il poti aplica la oricate pagini web ai nevoie.
- paginile se incarca mai rapid – cu cat adaugi mai mult cod unei pagini, cu atat aceasta se va incarca mai greu. CSS iti permite sa utilizezi cat mai putin cod printr-o anumita regula, ce poate fi aplicata la toate etichetele dintr-un document HTML. Astfel, daca ai una sau mai multe pagini de produse care ar trebui sa aiba aceeasi formatare, CSS te va ajuta ca aceasta procedura sa fie realizata doar prin adaugarea unui cod.
- ofera o experienta mai buna a utilizatorului – pe langa faptul ca faciliteaza vizibilitatea unei pagini web din perspectiva utilizatorului, permite si formatarea foarte usoara a acesteia. Atunci cand ai butoane si text bine organizat, amplasate in locuri logice pentru cititor, experienta lui se imbunatateste foarte mult.
- modificari usoare de formatare – oricand ai nevoie sa modifici anumite formate ale paginilor tale web, CSS iti faciliteaza acest lucru, fara a fi nevoie sa remediezi fiecare pagina in parte. Trebuie sa editezi doar foile de stil corespunzatoare si codul va fi aplicat tuturor paginilor care le utilizeaza.
- este compatibil pe toate dispozitivele – nimic nu este mai neplacut decat sa nu poti accesa o pagina anume atunci cand utilizezi un ecran mai mic. Toate paginile ar trebui sa fie vizibile, smart, si foarte usor de navigat, indiferent de dispozitivul care le acceseaza.
- standarde web globale – HTML are aproximativ aceleasi atribute ca si CSS, insa este considerat un limbaj invechit pentru stilizare. De aceea este indicat ca in formatarea site-ului tau sa folosesti CSS, pentru ca pe viitor paginile sa fie compatibile cu toate browserele si sa nu intampini probleme in acest sens.
- este superior HTML-ului – daca iti doresti sa beneficiezi de o gama cat mai larga de atribute, CSS este limbajul de stilizare pe care trebuie sa il folosesti. Te va ajuta sa oferi un aspect mult mai bine structurat si mai usor de parcurs pentru utilizatori decat HTML. In plus, fata de HTML si alte limbaje accepta utilizarea CSS, inclusiv XHTML, XML simplu, SVG și XUL.
Astfel, CSS este un limbaj care transforma un site web intr-o platforma foarte atragatoare, dar simpla in acelasi timp si usor de vizualizat. In timp ce HTML determina in mare masura continutul texului, CSS determina structura vizuala, estetica si aspectul. Un lucru foarte important de care trebuie sa tii cont inainte de a utiliza CSS este cunoasterea limbajului HTML. Acesta este baza de la care trebuie sa pornesti.
2. CSS in HTML – ce inseamna stilizarea paginilor HTML
HTML si CSS sunt limbaje de programare diferite, care utilizeaza coduri diferite, dar reusesc sa se completeze perfect unul cu celalalt. Totusi, o formatare in CSS nu va functiona pentru HTML si invers. De aceea este important ca cele doua sa fie studiate separat, pentru a intelege cat mai bine cum functioneaza.
CSS este un limbaj pentru specificarea modului in care documentele sunt prezentate utilizatorilor – modul în care sunt stilizare, asezate etc. Un document este de obicei un fisier text structurat care foloseste un limbaj de markup – HTML, dar poti intalni si alte limbaje, cum ar fi SVG sau XML.
Prezentarea unui document unui utilizator inseamna transformarea acestuia într-un formular utilizabil de publicul site-ului tau. Browserele sunt concepute pentru a prezenta documente vizual, de exemplu, pe un ecran de computer, tableta, telefon, etc. CSS poate fi folosit pentru stilul textului documentului de baza si se foloseste in schimbarea culorii si dimensiunii titlurilor si a linkurilor. De asemenea, poate fi utilizat chiar si pentru efecte precum animatia.
Pentru a intelege cat mai bine cum functioneaza CSS cu HTML, poti face un exercitiu de imaginatie. De exemplu, HTML este motorul unei masini, iar CSS caroseria acesteia. Masina va functiona fara acestea din urma, dar cu siguranta nu va avea un aspect prea placut. Acelasi lucru se intampla si in cazul site-urilor web. Ele poate fi accesate, insa daca ofera o experienta neplacuta utilizatorului, acesta poate fi considerat un client pierdut. Astfel, CSS face ca partea din fata a unui site sa creeze o placere, atat in ceea ce priveste vizualul, cat si in partea redactata pe care cineva ar trebui sa o citeasca. Fara CSS, site-ul tau va avea un aspect mai putin placut si va fi mult mai greu de navigat.
Practic, utilizarea CSS se imparte in doua categorii principale: prima consta in stabilirea unor fonduri, culori, dimensiuni si stiluri de text, iar ce-a de-a doua in definirea elementelor in cadrul unei pagini. Exista foarte multe programe permit construirea unui site standard, cu elemente predefinite, iar aceasta abordare este potrivita pentru paginile care sunt la inceput de drum si inca se lucreaza la estetica lor. Totusi, ele nu sunt potrivite pentru site-urile web care au un trafic mare de utilizatori si isi doresc sa se dezvolte, prezentand produse multiple si content din ce in ce mai mult. Aici intervine CSS. Cu ajutorul lui iti poti proiecta dupa bunul plac aspectul site-ului tau.
De asemenea, un lucru important de care trebuie sa tii cont pentru a te asigura ca site-ul tau functioneaza la parametrii maximi este gazduirea web. Orice pagina care isi doreste sa aiba un flux constant de vizitatori si content de care acestia ar trebui sa fie constienti se bazeaza pe servicii de hosting de inalta calitate. Mai mult decat atat, folosirea acestora iti va sustine site-ul si se va asigura ca ai partea de o viteza de incarcare superioara, precum si securitate, care este extrem de esentiala.
3. Limbajul de programare CSS – caracteristici
CSS este un limbaj de programare foarte usor de folosit, destinat simplificarii procesului de prezentare a paginilor web. Astfel, daca iti doresti ca utilizatorii tai sa aiba parte de o experienta inedita este indicat sa apelezi la un inginer software care sa lucreze in domeniul dezvoltarii web. Limbajul de codare CSS este interschimbabil. Scopul acestuia de baza este de a aduce o practica mai standardizata pentru dezvoltarea web. Folosind un cod CSS sau vei putea urmari rapid efortul de dezvoltare web, deoarece iti permite sa utilizezi elemente web predefinite.
Stilurile pentru o pagina se pot defini in Head-ul documentului HTML, intr-un fisier css extern sau in partea de Body.
Toate stilurile se defintesc prin taguri (coduri) si se pot folosi pentru:
- culoarea unei pagini (background)
- selectarea unei imagini de fundal a paginii web
- repetarea unei imagini de fundal pe orizontala
- pozitionarea imaginii de fundal
- setarea latimii celor patru frontiere ale paginii (stanga sus, jos/ dreapta sus, jos)
- setarea stilului celor patru frontiere ale paginii (stanga sus, jos/ dreapta sus, jos)
- setarea culorilor
- capitonarea unui element in pagina
- stabilirea unei culori a textului in cadrul diferitelor elemente
- alinierea si decorarea textului
- spatierea dintre caractere
- aliniera unei imagini in interiorul unui text
- setarea fondului, dimensiunii, stilului si culorii unui text
- crearea cutiilor tip link
- adaugarea tabelelor in pagina
- adaugarea conturului unui text sau a unei imagini
- introducerea adreselor URL
- crearea galeriilor de imagini
- transformarea 2D a diferitelor elemente (rotire, micsorare, marire, mutare)
- adaugarea unei animatii intr-un element
- configurarea imaginilor
- adaugarea butoanelor
- paginare
- adaugarea de culoare in cadrul paginii
Astfel, folosirea limbajului CSS este esentiala. Cu el iti poti customiza pagina web dupa bunul tau plac. Pe langa acesta, hostingul si baza de date sunt celelalte elemente de care site-ul tau trebuie sa beneficieze pentru a te asigura ca functioneaza asa cum trebuie.
4. Elemente si atribute in HTML si CSS
Cei mai importanti termeni ai limbajului de programare HTML sunt elementele, tagurile şi atributele:
- elementele – definesc continutul si structura obiectelor care exista intr-o pagina. Cele mai cunoscute elemente sunt antetele (de la h1 pana la h6), paragrafele si care se scriu <p> </p>. Simbolurile de la inceputul numelui elementului („mai mic” si „mai mare” sunt numite taguri sau etichete, care se gasesc mereu in pereche si nu pot exista separat. Linia orizontala de la final ii ofera programului informatia ca respectivul text s-a incheiat. Astfel, tagul de incheiere este „/”. Ceea ce se afla intre cele doua taguri („<” si „>”) reprezinta continutul acelui element. Exemplu:
<p> …text… </p>
- atributele – de cele mai multe ori acestea se folosesc pentru a oferi mai multe informatii despre un element. De exemplu: id (identifica un element unic) class (clasifica un element) src (mentioneaza sursa unui continut) si href (inseamna referinta unui hyperlink catre o resursa. Atributele se plaseaza in cadrul unui tag, chiar la inceputul acestuia, dupa numele elementului. Ele includ o valoare si un nume. De exemplu:
nume, urmat de egal si de valoarea atributului, intre ghilimele
Cei mai importanti termeni ai limbajului de programare CSS sunt selectorii, valorile şi proprietarile:
- selectorii – acest tool identifica carui element din codul HTML i se asociaza stilul (style), precum marime, culoare, pozitie, etc. Acestia pot include o anumita selectie multipla, cum ar fi un singur rand dintr-un paragraf, doar anumite paragrafe sau toate paragrafele. Selectorii sunt urmati de acolade. In interiorul acestora se mentioneaza aspectul pe care vrei ca acel element sa il aiba. Se pot folosi proprietati precum background, height sau width, color, etc. De exemplu:
p {
color: …;
font size: …;
}
- valorile – dupa ce au fost selectate elementele si s-a stabilit aspectul pe care il doresti ca acestea sa il aiba, urmeaza sa se determine proprietatea lor, prin folosirea unei valori. De exemplu, in ceea ce priveste culoare, valoare poate fi „galben”, iar in ceea ce priveste font size-ul valoarea poate sa fie „12”. Ele se amplaseaza intre cele doua puncte si punctul si virgula de la final. Luand exemplul de mai sus, codul se va transforma in :
p {
color: yellow;
font-size: 12px;
}
Prin aceste coduri, textul care apare in pagina ta web se poate modifica dupa bunul plac. CSS si HTML nu sunt limbaje de programare foarte complicate, insa trebuie sa exersezi constant pentru a le putea folosi la un nivel avansat.
Asadar, daca iti doresti ca pagina ta web sa aiba un aspect vizual ingrijit si placut si sa poata fi accesata cat mai eficient, trebuie sa apelezi la un limbaj de programare precum CSS. De asemenea, nu uita de faptul ca orice site cu un flux mare de utilizatori are nevoie de o gazduire web performanta.
