dexblog.ro
CSS

Învață CSS: proprietăți și stiluri explicate cu exemple

52 de proprietăți 8 categorii

CSS (Cascading Style Sheets) este limbajul care dă viață paginilor web: culori, fonturi, spațieri, alinieri pe rânduri și coloane, animații și adaptarea pe ecrane de telefon.

Dacă HTML reprezintă scheletul și conținutul unei clădiri, CSS reprezintă designul, finisajele, culorile și arhitectura interioară.

Mai jos găsești cele mai folosite proprietăți și tehnici CSS grupate pe categorii: de la modelul de cutie (Box Model) și tipografie, până la Flexbox, CSS Grid, tranziții și design responsiv modern. Apasă pe oricare proprietate pentru explicația completă, valorile acceptate, exemple vizuale și capcanele frecvente de evitat.

Selectori și reguli de bază 5 proprietăți

Modelul de cutie (Box Model) 7 proprietăți

Culori, fundaluri și text 10 proprietăți

Display și Poziționare 7 proprietăți

Flexbox (Layout flexibil) 8 proprietăți

CSS Grid (Layout bidimensional) 5 proprietăți

Tranziții și Animații 5 proprietăți

Design Responsiv și Interfață 5 proprietăți

Toate proprietățile CSS

Lista completă a proprietăților și regulilor CSS explicate în această secțiune, cu sintaxa lor uzuală. Proprietățile cu link au o pagină dedicată, cu explicații, valori și exemple practice.

Selectori și reguli de bază (5)

Proprietate Ce face
Selectori de bază (element, clasă, id) Mecanismul prin care CSS identifică elementele din HTML cărora le aplică stilurile.
p { color: red; } /* element */
Combinatori CSS (descendent, copil >, frate +, ~) Exprimă relația structurală dintre două elemente: descendență, copil direct sau elemente surori în DOM.
nav a { ... } /* descendent (la orice adâncime) */
Pseudo-clase (:hover, :focus, :active, :nth-child) Stilizează un element în funcție de starea sa (interacțiune cu mouse-ul, tastatura) sau poziția structurală în listă.
a:hover { text-decoration: underline; }
Pseudo-elemente (::before, ::after, ::placeholder) Creează elemente decorative virtuale în pagină fără HTML suplimentar sau stilizează părți specifice ale unui element.
.badge::before { content: "★ "; }
Variabile CSS (Custom Properties: var(--nume)) Stochează valori refolosibile (culori, spațieri, fonturi) care pot fi actualizate într-un singur loc pe tot site-ul.
:root {

Modelul de cutie (Box Model) (7)

Proprietate Ce face
box-sizing Stabilește dacă lățimea (width) și înălțimea (height) includ și spațierea interioară (padding) plus bordura (border).
box-sizing: border-box;
margin Creează spațiu gol în exteriorul bordurii unui element, distanțându-l de elementele vecine.
margin: 20px; /* toate cele 4 laturi */
padding Creează spațiu interior între conținutul elementului și bordura sa, preluând culoarea de fundal a elementului.
padding: 16px; /* toate 4 laturile */
width și height (min/max) Controlează dimensiunile orizontale și verticale ale unui element, inclusiv limitele minime și maxime permise.
width: 100%;
border Desenează o linie de contur în jurul conținutului și padding-ului unui element (grosime, stil, culoare).
border: 1px solid #e2e8f0;
border-radius Rotunjește colțurile bordurii și ale fundalului unui element, transformând dreptunghiurile în căsuțe rotunjite sau cercuri.
border-radius: 8px; /* toate colțurile */
box-shadow Aplică una sau mai multe umbre sub cutia unui element, adăugând adâncime și senzație de plutire (elevație).
/* offset-x | offset-y | blur | spread | color */

Culori, fundaluri și text (10)

Proprietate Ce face
color Setează culoarea textului și a elementelor decorative asociate (sublinieri, borduri implicite).
color: #2563eb; /* hexazecimal */
background-color Setează culoarea solidă sau semi-transparentă a fundalului unui element.
background-color: #f8fafc;
background-image (gradient liniar și radial) Aplică una sau mai multe imagini sau degradeuri de culoare (gradiente) pe fundalul unui element.
background-image: url("model.png");
background-size, position și repeat Controlează redimensionarea, centrarea și repetarea imaginilor de fundal.
background-size: cover; /* umple tot spațiul fără deformare */
font-family Stabilește familia de fonturi folosită pentru afișarea textului, cu variante de rezervă (fallback).
font-family: system-ui, -apple-system, sans-serif;
font-size (rem, em, px, clamp) Stabilește dimensiunea textului; se recomandă unități rem pentru respectarea preferințelor utilizatorului.
font-size: 16px; /* pixeli ficși */
font-weight Stabilește grosimea caracterelor de text (de la subțire la ultra-îngroșat).
font-weight: normal; /* 400 */
text-align Aliniază textul și elementele inline din interiorul unui bloc (la stânga, centrat, la dreapta sau justificat).
text-align: left;
line-height Stabilește distanța verticală dintre rândurile de text dintr-un paragraf, asigurând o citire confortabilă.
line-height: 1.5; /* număr fără unitate (recomandat!) */
text-decoration Controlează liniile decorative aplicate textului: subliniere, tăiere cu o linie orizontală sau ondulare colorată.
text-decoration: none; /* elimină sublinierea linkurilor */

Display și Poziționare (7)

Proprietate Ce face
display (block, inline, inline-block, none) Stabilește tipul de cutie al elementului în fluxul paginii sau îl ascunde complet din document.
display: block;
position (relative, absolute, fixed, sticky) Definește metoda de poziționare a elementului pe ecran, permițând mutarea lui cu top, right, bottom, left.
position: static; /* implicit, în fluxul normal */
top, right, bottom, left și inset Stabilesc distanțele de deplasare pentru elementele care au position setat pe relative, absolute, fixed sau sticky.
top: 0;
z-index Stabilește ordinea de suprapunere a elementelor pe axa adâncimii Z (care element stă deasupra cui).
z-index: 10;
overflow (hidden, scroll, auto) Stabilește ce se întâmplă când conținutul unui element este prea mare pentru a încăpea în dimensiunile sale.
overflow: hidden; /* taie conținutul care depășește cutia */
opacity Setează gradul de transparență al unui element întreg, inclusiv al tuturor copiilor săi.
opacity: 1; /* complet opac (vizibil) */
visibility Ascunde un element din vedere, păstrând însă golul fizic pe care acesta îl ocupă în pagină.
visibility: visible; /* implicit */

Flexbox (Layout flexibil) (8)

Proprietate Ce face
display: flex Transformă elementul într-un container flexibil; toți copiii direcți devin elemente flex așezate automat în linie.
display: flex;
flex-direction Stabilește axa principală pe care sunt așezate elementele: pe rând (orizontal) sau pe coloană (vertical).
flex-direction: row; /* implicit: orizontal, de la stânga la dreapta */
justify-content Distribuie elementele și spațiul liber de-a lungul axei principale (orizontal când flex-direction este row).
justify-content: flex-start; /* la început */
align-items Aliniază elementele de-a lungul axei secundare / transversale (vertical când flex-direction este row).
align-items: stretch; /* implicit: se întind la aceeași înălțime */
flex-wrap Controlează dacă elementele flex sunt forțate să stea pe o singură linie sau au voie să treacă pe rânduri noi.
flex-wrap: nowrap; /* implicit: toate pe un rând, se înghesuie sau ies din ecran */
gap (row-gap, column-gap) Setează distanța dintre elementele copil dintr-un container Flexbox sau Grid, fără a adăuga spațiu la margini.
gap: 16px; /* spațiu egal între linii și coloane */
flex (grow, shrink, basis) Scurtătură aplicată pe un element copil flex pentru a controla creșterea (grow), micșorarea (shrink) și mărimea de bază (basis).
flex: 1; /* crește și ocupă tot spațiul rămas (flex: 1 1 0%) */
align-self Suprascrie alinierea verticală (align-items) a containerului pentru un singur element copil individual.
align-self: auto; /* moștenește valoarea align-items de pe părinte */

CSS Grid (Layout bidimensional) (5)

Proprietate Ce face
display: grid Transformă elementul într-un container grilă bidimensional, capabil să controleze simultan atât rândurile, cât și coloanele.
display: grid;
grid-template-columns și rows (unitatea fr, repeat, minmax) Definește numărul și lățimea coloanelor, respectiv înălțimea rândurilor dintr-un container grilă.
grid-template-columns: 200px 1fr 2fr;
grid-column și grid-row (span) Stabilește poziția și întinderea unui element copil peste una sau mai multe coloane sau rânduri ale grilei.
grid-column: 1 / 3; /* începe la linia 1, se termină la linia 3 */
grid-template-areas și grid-area Creează un layout vizual intuitiv prin denumirea cu cuvinte a zonelor din grilă (header, sidebar, footer).
grid-template-areas:
Grilă responsivă automată (repeat, auto-fit, minmax) Cea mai populară rețetă CSS modernă: creează o grilă de carduri 100% responsivă fără a scrie niciun media query.
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

Tranziții și Animații (5)

Proprietate Ce face
transition Animă fluid schimbarea valorilor CSS între două stări (de exemplu la :hover sau la adăugarea unei clase).
/* proprietate | durată | timing-function | întârziere */
transform (translate, rotate, scale, skew) Modifică forma, poziția și unghiul unui element în spațiul 2D sau 3D, fără a deranja elementele vecine.
transform: translateY(-5px); /* ridicare în sus pe axa Y */
animation și @keyframes Creează animații complexe și autonome pe baza unor cadre cheie (@keyframes), fără a necesita JavaScript.
@keyframes pulsatie {
filter (blur, grayscale, brightness, drop-shadow) Aplică efecte vizuale de post-procesare grafică (estompare, alb-negru, contrast, luminozitate) asupra unui element.
filter: blur(5px);
backdrop-filter (efect de sticlă mată / frosted glass) Aplică filtre grafice (precum blur) asupra conținutului aflat direct în spatele elementului.
backdrop-filter: blur(12px);

Design Responsiv și Interfață (5)

Proprietate Ce face
@media (Media Queries) Aplică blocuri de stiluri CSS condiționat, în funcție de lățimea ecranului sau setările de sistem ale utilizatorului.
/* Puncte de întrerupere (breakpoints) */
@container (Container Queries) Cea mai mare inovație CSS recentă: adaptează o componentă în funcție de mărimea părintelui său, nu de mărimea întregului ecran.
.parinte {
cursor Stabilește forma cursorului mouse-ului când acesta plutește deasupra unui element, oferind indicii clare de utilizare.
cursor: pointer; /* deget arătător pentru elemente clicabile */
user-select Controlează dacă utilizatorul poate selecta textul dintr-un element prin tragere cu cursorul mouse-ului.
user-select: none; /* textul nu poate fi selectat accidental cu mouse-ul */
accent-color Personalizează instantaneu culoarea controalelor native de formular (checkbox, radio, range, progress) dintr-o singură linie.
accent-color: #2563eb;