Scris de Marius Chiriac

Diversele moduri de a introduce CSS in website

CSS poate fi folosit in multe moduri intr-un website: inline (scris direct in fisierul sursa php sau html), extern (se creeaza un fisier extern separat), intern (scrierea codului in sectiunea de <head>), sau prin alte metodete precum crearea codulului CSS intr-un mod dinamic folosind Javascript.

Cel mai popular mod de folosire este de a crea fisiere CSS externe care sunt apoi adaugate in website printr-un link in head-ul de la HTML. Acest link poate fi scris in urmatorul mod:

<link rel=”stylesheet” href=”https://inoveo.ro/styles.css” type=”text/css”>

Acest mod are foarte multe avantaje precum:
1. permite reutilizarea codului fara a fi nevoie ca acesta sa fie rescris pentru fiecare pagina sau element in parte
2. se pot folosi selectori precum before, after, hover, focus sau active
3. este usor de citit
4. poate fi salvat in cache-ul de la browser pentru a fi refolosit

CSS-ul inline este scris direct in elementul html din pagina. Este in general folosit drept o metoda rapida de a adauga styling la un element si este folositor pentru prototyping in timpul dezvoltarii unui website. Dar recomandarea este de a fi eliminat din codul sursa final si codul CSS sa fie introdus ulterior intr-un fisier extern. Acesta poate fi regasit in codul sursa sub forma:

<div style=”font-weight:bold”>HELLO</div>

CSS-ul intern functioneaza similar cu cel inline, dar vine cu cateva din avantajele celui extern. Acesta este refolosibil in pagina respectiva si permite selectori. Ideal este de a fi introdus in <head> pentru a fi incarcat de catre browser imediat, dar nu este limitat in doar acea sectiune a paginii. Uneori nu ai acces decat la <body> si esti fortat sa iti scrii codul acolo. Ca si in cazul inline de mai sus, incearca sa introduci la final codul intr-un fisier extern.

<style>
.clasa{color:#fff}
</style>

Metoda de creare de cod CSS in mod dinamic folosind Javascript este mult mai rara, fiind preferata manipularea claselor CSS ale unui element prin adaugarea sau eliminarea acestora. Dar uneori este nevoie ca un element din pagina sa fie foarte dinamic si exista posibilitatea de creare a claselor necesare, codul fiind influentat de catre input-urile vizitatorilor sau este random.

Sa presupunem ca se primeste intr-o variabila denumita „arg” un argument al unei functii ce contine un integer intre 1 si 5, argument influentat de catre pozitia cursorului pe pagina, atunci in functia respectiva putem aloca acest argument unui element din pagina ce poate indica marimea acestuia (intre 100% si 500%):

document.getElementsByClassName(‘clasa’)[0].style.transform = ‘scale(‘+arg+’)’;

Toate aceste metode de a introduce cod CSS intr-un website ne permit sa cream un frontend frumos, complex, dinamic si usor de modificat bazat pe un design din ce in ce mai complicat.

Mai multe articole

Dochita Zenoveiov a scris

Touchpoints Workshop

Brandingul nu e doar numele si logo-ul. Este si despre touchpointuri. Saptamana trecuta un prospect mi-a dezvaluit ca s-a intalnit cu noi doar pentru ca un fost client de-al nostru a insistat sa ne cunoasca, [...]

Citeste tot articolul from Diversele moduri de a introduce CSS in website

Citeste tot articolul

Dochita Zenoveiov a scris

Nume evocativ

Cum isi construiesc asiaticii strategia de #naming. Cum isi aleg numele. Sa luam exemplul Samsung. E un nume descriptiv, evocativ sau abstract? Lee Byung-chull, fondatorul Samsung, a urmat cursurile Universitatii Waseda din Tokyo, Japonia, dar [...]

Citeste tot articolul from Diversele moduri de a introduce CSS in website

Citeste tot articolul

Dochita Zenoveiov a scris

Customer Journey Workshop

Acesta se refera la toate interactiunile si etapele prin care trece un client in timp ce interactioneaza cu un brand. Customer Journey-ul include toate punctele de contact si canalele prin care un client vine in [...]

Citeste tot articolul from Diversele moduri de a introduce CSS in website

Citeste tot articolul

Dochita Zenoveiov a scris

Customer experience

Saptamana trecuta m-a rugat un partener sa fac un workshop de brand cu echipa sa si cred ca a sosit momentul sa vorbesc despre workshopurile pe care le facem pentru ca sunt diverse, au obiective [...]

Citeste tot articolul from Diversele moduri de a introduce CSS in website

Citeste tot articolul