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 continutului de calitate pe un website

Un website bine conceput si functional este esential in era digitala, dar continutul de calitate este ceea ce il transforma intr-un instrument eficient de comunicare si interactiune cu publicul. Indiferent de tipul de website pe [...]

Read More... from Diversele moduri de a introduce CSS in website

Citeste tot articolul

INOVEO a scris

Extindere brand in HORECA

Ai un business in segmentul premium de food delivery. Vrei sa iti dezvolti afacerea spre furnizarea de mancare buna la un pret corect? Exista cateva motive cheie pentru care ai lansa un brand mainstream in [...]

Read More... from Diversele moduri de a introduce CSS in website

Citeste tot articolul

INOVEO a scris

Branding energie solara

Iata cinci motive importante pentru branding intr-un business de productie si distributie de energie solara: Diferentierea de concurenta: Industria energiei solare este in plina crestere, iar concurenta este acerba. Prin branding, poti crea o identitate [...]

Read More... from Diversele moduri de a introduce CSS in website

Citeste tot articolul

INOVEO a scris

Decision making models

Exista numeroase teorii si modele de luare a deciziilor dezvoltate de diferiti cercetatori si teoreticieni. Printre cele mai cunoscute modele se numara: Modelul Rational-Economic: Acest model se bazeaza pe ideea ca deciziile sunt luate intr-un [...]

Read More... from Diversele moduri de a introduce CSS in website

Citeste tot articolul