MP Web Studio
CSS100 din 100 disponibile
100 / 100

LECȚIA 100 DIN 100

Construiește o componentă cu tokenuri

Combină tokenuri, proprietăți logice și dimensionare previzibilă într-un card.

Sursă oficialăW3C CSS Logical Properties — component spacing and bordersRevizuit: 2026-08-26
PASUL 1 · ÎNVAȚĂ

Cum funcționează

Un token descrie o decizie reutilizabilă, proprietatea logică adaptează componenta direcției de scriere, iar border-box păstrează dimensiunile controlabile. Combinația produce o componentă configurabilă, nu o regulă rigidă.

Exemplu corect
:root { --card-space: 24px; --card-accent: #2563eb; } .card { padding: var(--card-space); border-inline-start: 4px solid var(--card-accent); box-sizing: border-box; } .card-title { color: var(--card-accent); }

Spațiul și accentul sunt centralizate, iar bordura urmărește începutul axei inline.

Greșeală frecventă
.card { padding: 24px; border-left: 4px solid #2563eb; } .card-title { color: #2563eb; }

Valorile duplicate și bordura fizică funcționează doar ca rezultat punctual, fără configurarea și adaptarea cerute.

PASUL 2 · APLICĂ

Exercițiul tău

Definește tokenurile 24px și #2563eb; folosește-le pentru padding, bordura inline de 4px, border-box și culoarea titlului.

PASUL 3 · CONSTRUIEȘTE

Scrie și vezi rezultatul

index.htmlCSS
Rezultat sigurizolat
Ciorna se păstrează doar în acest browser.HTML și CSS permise · scripturile și rețeaua sunt blocate
PASUL 4 · VERIFICĂ

Ce trebuie să treacă

0%neverificat
  • Tokenul de spațiere este 24px.
  • Tokenul de accent este #2563eb.
  • Padding-ul citește tokenul de spațiere.
  • Bordura logică citește tokenul de accent.
  • Cardul folosește border-box.
  • Titlul citește același accent.
  • Elementul țintă este prezent în pagină.
Explică-mi logica rezolvării

Două tokenuri alimentează trei declarații vizuale, iar proprietatea logică evită fixarea accentului pe stânga.