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

Avantajele si dezavantajele unui website de tipul One Page

Site-urile sunt o esentiale pentru orice afacere sau proiect personal. Site-urile de tipul „one page” (o pagina), au devenit foarte populara in ultimii ani. Dar care sunt avantajele si dezavantajele unui astfel de site? Sa [...]

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

Citeste tot articolul

INOVEO a scris

Beneficiile de a avea un blog pe website-ul tau

In era digitala in care traim, un website bine dezvoltat nu mai este suficient pentru a atrage si retine atentia publicului. Un blog pe website-ul unei companii poate aduce numeroase beneficii, de la cresterea prezentei [...]

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

Citeste tot articolul

INOVEO a scris

De ce culorile alese arata diferit in print fata de online

Culorile joaca un rol crucial in definirea identitatii vizuale a unui brand. De la celebrul rosu al Coca-Cola la albastrul vibrant al Facebook, culorile au puterea de a evoca emotii, de a crea recunoastere a [...]

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

Citeste tot articolul

INOVEO a scris

Optimizarea portofoliului de branduri

Optimizarea unui portofoliu de brand implica gestionarea si organizarea strategica a ofertei de produse ale unei companii pentru a maximiza valoarea globala a marcii si cota de piata. Pentru a optimiza portofoliul de marci pentru [...]

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

Citeste tot articolul