Tutoriale Web Development | CSS pentru incepatori si avansati Curs CSS

CSS - Scurta introducere

Ce este CSS?

CSS este acronimul de la Cascading Style Sheet. Acest curs este o introducere in limbajul de stilizare CSS si pentru a urma acest curs este necesar sa cunoasteti limbajul de marcare HTML. CSS este folosit pentru a crea designul paginilor web - de exemplu, pentru a modifica fontul, culoarea, dimensiunea si spatierea continutului, pentru animatii si alte caracteristici decorative de prezentare.

Cum functioneaza CSS?

Cind un browser afiseaza un document, acesta trebuie sa combine continutul documentului cu informatiile sale de stil. Procesarea documentului are loc in doua etape:

1. Browserul transforma HTML si CSS in DOM(Document Object Model), respectiv CSSOM(CSS Object Model) si apoi combina cele doua structuri aflate in memoria computerului.
2. Browserul afiseaza continutul DOM.

DOM are o structura asemanatoare unui arbore. Fiecare element, atribut si secventa de text din limbajul de marcare devine un nod in DOM, respectiv in structura arborelui. Nodurile sunt definite prin relatia lor cu alte noduri DOM. Unele elemente sunt elemente parinte, altele sunt binenteles elemente copil iar elementele copil au frati. Intelegerea DOM va ajuta sa proiectati, sa depanati si sa mentineti CSS, pentru ca DOM-ul este locul in care CSS si continutul documentului se intilnesc si lucreaza impreuna.

Sa vedem in exemplul urmator cum HTML si CSS lucreaza impreuna:

<p>
 Sa utilizam:
 <span>Foi</span>
 <span>Stil</span>
 <span>Cascada</span>
</p>

In acest mic DOM elementul p este un parinte. Copiii sai sunt un nod text "Sa utilizam:" si nodurile corespunzatoare elementelor span. Nodurile span care sunt frati, sunt de asemenea si parinti la rindul lor, pentru textul pe care in contin.

 P
 ├─ "Sa utilizam:"
 ├─ SPAN
 |  └─ "Foi"
 ├─ SPAN
 |  └─ "Stil"
 └─ SPAN
    └─ "Cascada"

Vedeti rezultatul mai jos:

Sa vedem ce se intimpla dupa ce adaugam putin CSS in documentul nostru, pentru a modifica aspectul. Si adaugam:

span {
 border: 1px solid black;
 background-color: orange;
}

Browserul va analiza codul HTML si va crea un DOM, apoi va analiza CSS si va crea un CSSOM, combina cele doua structuri intr-un DOM final ce va fi "pictat" de browser pe ecran. Pentru ca exista o singura regula aplicata unui singur selector(span), vom avea trei intervale de culoare, cite unul pentru fiecare text continut de fiecare element span din DOM.

Vedeti rezultatul mai jos:

Inserare CSS in document HTML

Exista trei moduri diferite de a aplica CSS la un document HTML:

• Extern - Atunci cind codul CSS este scris intr-un fisier extern cu extensia .css, care este incarcat in sectiunea head a documentului cu ajutorul etichetei <link>. Aceasta metoda este probabil cea mai buna, deoarece puteti utiliza o singura foaie de stil pentru mai multe documente, iar modificarile ulterioare se vor face intr-un singur fisier CSS.

<link rel="stylesheet" href="style.css">

• Intern - Atunci cind codul CSS este plasat direct in interiorul documentului, folosind eticheta <style>, in sectiunea head. Aceasta modalitate poate fi utila in anumite situatii, dar nu este la fel de eficienta ca metoda de mai sus, pentru ca modificarea ulterioara a codului va trebui efectuata in fiecare pagina in parte. Sa ne imaginam un site cu 44 de pagini, al carui design dorim sa-l modificam. Trebuie sa vizitam fizic fiecare pagina in parte pentru a aduce modificarile dorite.

<style>
span {
 border: 1px solid black;
 background-color: orange;
}
</style>

• In linie - Atunci cind declaratiile CSS afecteaza un singur element. Imediat dupa un element se insereaza atributul style, urmat de declaratiile CSS, astfel:

 <p style="color: blue; background-color: yellow; border: 1px solid black;>Exemplu CSS inline</p>

Utilizarea metodei de inserare CSS in linie, trebuie evitata, cu exceptia situatiilor in care nu exista alta solutie, pentru ca informatiile structurale vor fi amestecate cu informatii de prezentare, ceea ce va face ca documentul HTML sa fie foarte greu de citit si intretinut.

Puteti utiliza aceasta metoda doar atunci cind nu aveti acces la fisierul CSS extern.

Mai jos puteti vedea cele trei metode de inserare CSS in document. Indepartati comentariile pentru a vedea exact ce se intimpla.

🧠 Quiz - CSS Introducere