INAPOI
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

INOVEO a scris

Importanta designului sustenabil in branding

Daca toata lumea vorbeste despre sustenabilitate, nu putem sa nu vorbim si noi, din perspectiva brandingului. Constientizarea ecologica a fost dintotdeauna o tendinta in crestere. Acum, mai mult ca niciodata, brandurile se afla sub presiunea [...]

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

Citeste tot articolul

INOVEO a scris

Fonturile sans serif „ciudate”: Trendul anului 2024

Evolutia si schimbarile tendintelor de la un sezon la altul sunt cele mai pregnante atunci cand vine vorba de design. In ceea de priveste designul grafic, printre altele, anul acesta ne aduce in prim-plan o [...]

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

Citeste tot articolul

INOVEO a scris

Cat de complex trebuie sa fie website-ul tau?

Este clar ca website-urile devin din ce in ce mai mari si complexe si de vina sunt atat programatorii, cat si clientii. Programatorii vor sa arate ca pot face lucuri complicate, iar clientii vor website-uri [...]

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

Citeste tot articolul

INOVEO a scris

INOVEO raspunde intrebarilor Anuarului ZF Branduri Romanesti 2024

Care e reteta pentru crearea unui brand? De cat timp ai nevoie ca sa il construiesti? Cat costa? De unde incepi si unde termini? Care sunt ingredientele-cheie? De ce te poti lipsi, de ce nu? [...]

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

Citeste tot articolul