Invatare Atomica

HTML/CSS Recapitulare: structura paginii, selectori, box model, layout

Progres lectie:
0%
🎯

Obiectivul lectiei

Vei recapitula tot ce tine o pagina web in picioare inainte sa incepem partea grea a modulului: scheletul unui document HTML, tagurile semantice, cele trei feluri de a lega CSS-ul, selectorii si specificitatea lor, box model-ul si modul in care display aseaza elementele in pagina.

Dupa aceasta lectie vei putea:

  • Sa scrii de la zero scheletul corect al unui document HTML5 (doctype, head, body, meta)
  • Sa folosesti tagurile semantice (header, nav, main, section, article, footer) in locul unui teanc de div-uri
  • Sa legi CSS-ul de pagina in cele trei moduri si sa spui care castiga cand se contrazic
  • Sa scrii selectori CSS de element, clasa, id, descendent, copil direct, grupare si pseudo-clasa
  • Sa calculezi specificitatea a doi selectori si sa prezici care regula se aplica
  • Sa calculezi latimea reala a unei cutii cu box model si sa folosesti box-sizing: border-box
  • Sa alegi intre display: block, inline si inline-block pentru asezarea in pagina

Incearca singur!

Provocare:

Ai un card de problema in pagina clubului de informatica:

<div class="card">
    <h3 class="titlu">Problema: Sortare topologica</h3>
    <p>Dificultate: medie</p>
</div>

Scrie regula CSS care coloreaza doar paragraful din interiorul cardului (nu si titlul, nu si paragrafele din alta parte a paginii) si ii da un spatiu interior de 12px. Apoi raspunde intr-un rand: daca cardul are width: 300px, padding: 20px si border: 5px solid, ce latime ocupa el pe ecran?

💡 Ai nevoie de un indiciu?

Spatiul dintre doi selectori inseamna descendent: A B = orice B aflat undeva in interiorul unui A.

Raspuns: .card p { color: #3b82f6; padding: 12px; }

Latimea: implicit width masoara doar continutul, deci se aduna si padding-ul, si border-ul, de ambele parti: 300 + 20 + 20 + 5 + 5 = 350px.

1

1. Scheletul unui document HTML

Cea mai mica pagina care functioneaza corect:
<!DOCTYPE html>
<html lang="ro">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Clubul de Informatica</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Clubul de Informatica</h1>
    <p>Ne intalnim marti, in laboratorul 2.</p>
</body>
</html>
Un document HTML are mereu acelasi schelet: o declaratie <!DOCTYPE html> care spune browserului sa foloseasca regulile HTML5, un element radacina <html>, si in el exact doua zone — head (informatii despre pagina, nimic vizibil) si body (tot ce se vede in fereastra).
Ce sta in head si de ce conteaza fiecare linie:
<meta charset="UTF-8">
    Fara ea, diacriticele si caracterele speciale pot aparea stricate.

<meta name="viewport" content="width=device-width, initial-scale=1.0">
    Fara ea, telefonul simuleaza un ecran lat si micsoreaza pagina.

<title>...</title>
    Textul din tab-ul browserului si titlul afisat in rezultatele cautarii.

<link rel="stylesheet" href="style.css">
    Aduce fisierul CSS extern.

lang="ro" pe tag-ul html
    Spune cititoarelor de ecran si traducatoarelor automate in ce limba e textul.
Tagurile semantice descriu rolul unei zone din pagina, nu aspectul ei. In loc de <div class="antet"> scrii <header>: acelasi rezultat pe ecran, dar browserul, motoarele de cautare si cititoarele de ecran inteleg structura.
Structura semantica a paginii clubului:
<body>
  <header>              <!-- antetul paginii: logo, titlu -->
    <h1>Clubul de Informatica</h1>
    <nav>               <!-- meniul de navigare -->
      <a href="index.html">Acasa</a>
      <a href="probleme.html">Probleme</a>
    </nav>
  </header>

  <main>                <!-- continutul principal: O SINGURA DATA in pagina -->
    <section id="anunturi">
      <h2>Anunturi</h2>
      <article>         <!-- o bucata de sine statatoare -->
        <h3>Concurs local, 12 martie</h3>
        <p>Inscrieri pana pe 5 martie.</p>
      </article>
    </section>
    <aside>             <!-- continut secundar, legat de subiect -->
      <p>Resurse utile pentru pregatire.</p>
    </aside>
  </main>

  <footer>              <!-- subsolul: contact, drepturi -->
    <p>Colegiul Tehnic, 2026</p>
  </footer>
</body>
De retinut:

<main> apare o singura data intr-o pagina si nu se pune in interiorul lui header, nav, aside sau footer.

<section> = o zona tematica din pagina, de obicei cu titlul ei. <article> = o bucata care ar avea sens si scoasa din pagina (un anunt, o postare, un card de problema).

<div> ramane util, dar doar cand nu exista niciun tag semantic potrivit: el nu inseamna nimic, e o simpla cutie.

2

2. Continutul: text, liste, legaturi, imagini, tabele

Un fragment real din pagina clubului:
<h2>Algoritmi pentru concursul de martie</h2>
<p>Ordinea de studiu este <strong>obligatorie</strong>: fara sortari
nu se poate intra in cautarea binara.</p>

<ol>
    <li>Sortare prin interclasare</li>
    <li>Cautare binara</li>
    <li>Programare dinamica</li>
</ol>

<p>Enunturile stau pe <a href="probleme.html">pagina de probleme</a>.</p>

<img src="img/schema-arbore.png" alt="Arbore binar de cautare cu 7 noduri">

<table>
    <caption>Rezultate la simularea din februarie</caption>
    <thead>
        <tr><th>Elev</th><th>Punctaj</th></tr>
    </thead>
    <tbody>
        <tr><td>Andrei M.</td><td>87</td></tr>
        <tr><td>Ioana P.</td><td>92</td></tr>
    </tbody>
</table>
Tagurile de continut au fiecare un rol, iar detaliile lor se dau prin atribute scrise in tagul de deschidere, sub forma nume="valoare". Doua atribute sunt obligatorii in practica: href la legaturi si src plus alt la imagini.
Tabel de referinta:
h1 ... h6      titluri, in ordine descrescatoare de importanta
               (un singur h1 pe pagina; nu sari trepte: dupa h2 vine h3)
p              paragraf de text
ul / ol / li   lista neordonata (buline) / ordonata (numere) / element de lista
a              legatura;  href = adresa tinta
                 href="probleme.html"   -> alt fisier din acelasi folder
                 href="#anunturi"       -> o ancora din aceeasi pagina
                 href="https://..."     -> alt site
img            imagine; src = adresa fisierului, alt = descrierea in cuvinte
table          tabel; thead/tbody = antet/corp, tr = rand,
               th = celula de antet, td = celula de date, caption = titlul tabelului
strong / em    important / accentuat (SENS)
b / i          ingrosat / inclinat (doar ASPECT - preferi strong si em)
br / hr        rand nou fortat / linie orizontala de separare
span           bucata de text fara sens propriu, ca sa o poti stiliza
Greseli care se vad imediat la corectare:

Imagine fara alt. Pagina pare in regula pe ecranul tau, dar un utilizator nevazator nu afla nimic despre ea, iar daca fisierul lipseste nu apare nici macar un indiciu.

Titluri alese dupa marime, nu dupa rol. Un h4 pus pentru ca arata mai bine strica structura documentului. Marimea se schimba din CSS, nu prin alegerea altui tag.

Taguri neinchise sau incrucisate. <p><strong>text</p></strong> este gresit: ultimul tag deschis se inchide primul.

3

3. Cum se leaga CSS-ul de HTML si cum arata o regula

Aceeasi culoare, obtinuta in trei feluri:
<!-- 1. EXTERN: fisier separat, adus din head. Recomandat. -->
<head>
    <link rel="stylesheet" href="assets/css/style.css">
</head>
/* in style.css: */
h1 { color: #3b82f6; }

<!-- 2. INTERN: bloc style in head. Doar pentru pagini mici, izolate. -->
<head>
    <style>
        h1 { color: #3b82f6; }
    </style>
</head>

<!-- 3. INLINE: atribut style pe element. De evitat. -->
<h1 style="color: #3b82f6;">Clubul de Informatica</h1>
O regula CSS are doua parti: un selector (pe cine se aplica) si un bloc de declaratii intre acolade (ce se schimba). Fiecare declaratie este o pereche proprietate: valoare;.
Anatomia unei reguli:
.card h3 { color: #f1f5f9; margin-bottom: 8px; }
--------   ------------------------------------
selector             bloc de declaratii

    color: #f1f5f9;
    -----  --------
 proprietate  valoare       ; incheie declaratia

/* Comentariu CSS: se scrie asa si nu apare in pagina. */
Cascada este regula prin care browserul alege ce se aplica atunci cand doua reguli se bat pe acelasi element. Pe scurt, in ordinea in care se decide: intai importanta (!important bate orice), apoi specificitatea selectorului (atomul urmator), si abia la egalitate perfecta ordinea din fisier — ultima regula scrisa castiga.
Cine castiga? (acelasi h1, patru reguli)
/* in style.css */
h1 { color: red; }
h1 { color: green; }        /* castiga fata de red: scrisa mai tarziu */

/* in blocul style din pagina, incarcat DUPA link */
h1 { color: blue; }         /* castiga fata de green: aceeasi specificitate,
                               dar vine mai tarziu in ordinea de incarcare */

<!-- pe element -->
<h1 style="color: orange;">   /* castiga fata de toate: stil inline */

Rezultat afisat: orange.
Daca stergi atributul style, ramane blue.
De ce extern, si nu inline:

Un fisier CSS extern se scrie o data si se foloseste in toate paginile site-ului; browserul il pastreaza in memoria cache, deci a doua pagina se incarca mai repede.

Stilul inline se aplica unui singur element, nu se poate refolosi, nu poate contine pseudo-clase precum :hover si este cel mai greu de suprascris. Il vei intalni totusi in cod generat de JavaScript — vezi lectia 3.

4

4. Selectori si specificitate

Un fragment si selectorii care il tintesc:
<nav class="meniu">
    <a href="index.html" class="activ">Acasa</a>
    <a href="probleme.html">Probleme</a>
</nav>
<section id="anunturi">
    <article class="card">
        <h3>Concurs local</h3>
        <p>Inscrieri pana pe 5 martie.</p>
    </article>
</section>

/* CSS */
a              { color: #94a3b8; }   /* TIP: toate legaturile */
.card          { padding: 16px; }    /* CLASA: orice element cu class="card" */
#anunturi      { margin-top: 24px; } /* ID: unicul element cu id="anunturi" */
.card p        { color: #f1f5f9; }   /* DESCENDENT: p oriunde in .card */
.card > h3     { font-size: 20px; }  /* COPIL DIRECT: h3 fiu imediat al .card */
h2, h3         { font-weight: 700; } /* GRUPARE: si h2, si h3 */
a:hover        { color: #06b6d4; }   /* PSEUDO-CLASA: cand mouse-ul e deasupra */
a.activ        { color: #10b981; }   /* legatura care are SI clasa activ */
a[href$=".html"] { text-decoration: none; }  /* ATRIBUT: href se termina in .html */
Un selector este tiparul dupa care browserul cauta elementele carora le aplica regula. Cele trei tipuri de baza sunt tipul (numele tagului), clasa (punct, se poate repeta oricat in pagina) si id-ul (diez, o singura data in pagina). Din ele se compun selectori mai precisi: descendent (spatiu), copil direct (>), grupare (virgula), pseudo-clasa (doua puncte).
Specificitatea este scorul care decide ce regula se aplica atunci cand doua reguli tintesc acelasi element si nu se poate merge pe ordinea din fisier. Se numara pe trei pozitii: (id-uri, clase, tipuri) — se compara de la stanga la dreapta, ca la un numar.
Calculul, pe exemple:
p                 -> (0, 0, 1)   un tip
.card             -> (0, 1, 0)   o clasa
#anunturi         -> (1, 0, 0)   un id
.card p           -> (0, 1, 1)   o clasa + un tip
a.activ:hover     -> (0, 2, 1)   o clasa + o pseudo-clasa + un tip
#anunturi .card p -> (1, 1, 1)   un id + o clasa + un tip

Comparatie: #anunturi (1,0,0)  BATE  .meniu .card a.activ (0,3,1)
Un singur id invinge oricate clase, pentru ca prima pozitie decide.

Deasupra tuturor:
  stilul inline (atributul style)  ->  bate orice selector din fisier
  !important                       ->  bate inclusiv stilul inline
Amandoua se folosesc rar: fac depanarea foarte grea.
Simptomul pe care il vei intalni la laborator:

Am schimbat culoarea in CSS si nu se intampla nimic. In 9 cazuri din 10 nu e vina fisierului: exista alta regula, cu specificitate mai mare, care castiga.

Solutia buna nu este sa adaugi !important, ci sa tintesti mai precis (adaugi o clasa) sau sa stergi regula prea puternica. In DevTools (F12, tab-ul Elements) regulile invinse apar taiate cu o linie — asa vezi imediat cine a castigat.

5

5. Box model: cat loc ocupa de fapt un element

Acelasi CSS, doua latimi diferite pe ecran:
.card {
    width: 300px;
    padding: 20px;
    border: 5px solid #2d2d44;
    margin: 16px;
}

/* Implicit (box-sizing: content-box): */
latime ocupata = 300 + 20 + 20 + 5 + 5 = 350px
                 continut  padding    border
(marginea de 16px se adauga in AFARA acestor 350px)

/* Cu box-sizing: border-box: */
.card { box-sizing: border-box; width: 300px; padding: 20px; border: 5px solid; }
latime ocupata = 300px exact
continutul se ingusteaza singur: 300 - 40 - 10 = 250px
Fiecare element este o cutie cu patru straturi, dinspre interior spre exterior: continutul, padding (spatiul dintre continut si chenar), border (chenarul) si margin (spatiul gol dintre acest element si vecini). Impreuna formeaza box model-ul.
Cele patru straturi:
+-------------------------------------------+
|                 MARGIN                    |  spatiu spre vecini (transparent)
|   +-----------------------------------+   |
|   |             BORDER                |   |  chenarul desenat
|   |   +---------------------------+   |   |
|   |   |         PADDING           |   |   |  spatiu interior; ia culoarea
|   |   |   +-------------------+   |   |   |  de fundal a elementului
|   |   |   |     CONTINUT      |   |   |   |  textul, imaginea
|   |   |   +-------------------+   |   |   |
|   |   +---------------------------+   |   |
|   +-----------------------------------+   |
+-------------------------------------------+
Scrierea scurta a valorilor (aceeasi regula pentru padding, margin si border-width):
padding: 20px;              toate cele 4 laturi = 20px
padding: 10px 20px;         sus-jos = 10px, stanga-dreapta = 20px
padding: 10px 20px 30px;    sus = 10, stanga-dreapta = 20, jos = 30
padding: 10px 20px 30px 40px;   sus, dreapta, jos, stanga (in sensul acelor de ceas)

margin: 0 auto;             sus-jos = 0; auto = centreaza pe orizontala
                            un element block care are o latime declarata
Doua capcane reale:

1. Cardul care iese din container. Trei carduri de width: 33% cu padding si border nu incap pe un rand de 100%, pentru ca padding-ul si border-ul se adauga peste procent. Fix-ul standard, pus o singura data la inceputul foii de stil:

* { box-sizing: border-box; }

Din acel moment width inseamna latime totala, cu tot cu padding si border, si calculele in procente ies.

2. Marginile verticale care se comaseaza. Daca un paragraf are margin-bottom: 20px si urmatorul are margin-top: 30px, intre ele nu apar 50px, ci 30px: la elementele block asezate normal una peste alta, marginile verticale invecinate se contopesc si ramane cea mai mare. Marginile orizontale nu se comaseaza niciodata.

6

6. Layout: display si fluxul normal al paginii

Acelasi HTML, trei valori pentru display:
<span class="eticheta">C++</span>
<span class="eticheta">Python</span>
<span class="eticheta">Pascal</span>

/* A. implicit pentru span: inline */
.eticheta { width: 120px; height: 60px; background: #1a1a2e; }
   -> cele trei stau pe acelasi rand,
      DAR width si height sunt ignorate: cutia ramane cat textul.

/* B. block */
.eticheta { display: block; width: 120px; height: 60px; }
   -> width si height functioneaza,
      DAR fiecare eticheta trece pe randul ei, una sub alta.

/* C. inline-block */
.eticheta { display: inline-block; width: 120px; height: 60px; }
   -> raman pe acelasi rand SI respecta width si height. Ce voiam.
In fluxul normal, browserul aseaza elementele in ordinea in care le gaseste in HTML, iar felul in care ocupa spatiul depinde de proprietatea display. Elementele block (p, div, h1, section) incep pe un rand nou si iau toata latimea disponibila; elementele inline (span, a, strong, em) stau in randul de text si nu accepta latime sau inaltime.
Tabel de decizie:
display: block         rand nou, toata latimea; width/height functioneaza
                       (implicit la: div, p, h1-h6, ul, li, section, header)

display: inline        ramane in randul de text; width/height IGNORATE;
                       padding stanga-dreapta functioneaza, cel sus-jos
                       se deseneaza dar nu impinge randurile vecine
                       (implicit la: span, a, strong, em, img)

display: inline-block  ramane in rand SI accepta width, height, padding
                       (butoane de meniu, etichete, celule mici)

display: none          elementul dispare complet: nu se deseneaza si nu
                       mai ocupa loc. Altceva decat visibility: hidden,
                       care il face invizibil dar ii pastreaza locul gol.

display: flex          transforma elementul in container flexibil si
                       aseaza copiii pe o axa - subiectul lectiei 2
Meniul clubului, facut din inline-block:
<nav class="meniu">
    <a href="index.html">Acasa</a>
    <a href="probleme.html">Probleme</a>
    <a href="contact.html">Contact</a>
</nav>

.meniu a {
    display: inline-block;   /* raman pe un rand, dar primesc dimensiuni */
    padding: 10px 18px;      /* zona de click devine confortabila */
    min-width: 110px;        /* toate butoanele la fel de late */
    text-align: center;
    text-decoration: none;
    background: #1a1a2e;
    border-radius: 8px;
}
.meniu a:hover { background: #2d2d44; }
Puntea spre lectia urmatoare:

Fluxul normal plus inline-block te duc pana la un meniu si un rand de carduri. De acolo incolo, alinierea pe verticala, spatierea egala si trecerea automata pe randul urmator cer alt instrument: display: flex.

Il vei folosi in lectia 2, impreuna cu media queries, ca sa faci aceeasi pagina sa arate bine si pe telefon. Tot ce ai recapitulat aici — structura semantica, selectorii, box model-ul — ramane baza pe care se aseaza acele reguli.

Exercitii practice

Exercitiul 1 (Nivel minim) — Scheletul paginii

Scrie de la zero fisierul index.html al clubului de informatica: doctype HTML5, limba romana, codificare UTF-8, meta viewport, titlul Clubul de Informatica, legatura catre style.css, iar in body un h1 cu numele clubului si un paragraf cu ziua intalnirii. Deschide-l in browser si verifica in tab titlul paginii.

Vezi rezolvarea

Rezolvare:

<!DOCTYPE html>
<html lang="ro">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Clubul de Informatica</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Clubul de Informatica</h1>
    <p>Ne intalnim marti, de la ora 15, in laboratorul 2.</p>
</body>
</html>

Explicatie pe linii:

  1. <!DOCTYPE html> este prima linie din fisier si activeaza regulile HTML5.
  2. lang="ro" se pune pe tagul html, nu pe body.
  3. meta charset se scrie cat mai sus in head, ca browserul sa stie cum sa citeasca restul fisierului.
  4. title este singurul element din head care se vede — in tab.
  5. link nu are tag de inchidere si trebuie sa fie in head, altfel pagina se afiseaza o clipa nestilizata.

Exercitiul 2 (Nivel standard) — Selectori si box model

Ai acest fragment in pagina:

<section id="probleme">
    <article class="card">
        <h3>Sortare topologica</h3>
        <p>Dificultate: medie</p>
    </article>
</section>

Scrie CSS-ul care: (a) da fiecarui card width: 320px, padding: 20px, border: 2px solid si il face sa ocupe exact 320px pe ecran; (b) coloreaza doar paragrafele din interiorul cardurilor; (c) da titlurilor h3 care sunt copii directi ai cardului o marime de 20px; (d) departeaza sectiunea de restul paginii cu 24px sus si jos. Apoi spune ce latime ar fi avut cardul fara cerinta de la (a).

Vezi rezolvarea

Rezolvare:

.card {
    box-sizing: border-box;   /* (a) width = latime TOTALA */
    width: 320px;
    padding: 20px;
    border: 2px solid #2d2d44;
}
.card p    { color: #f1f5f9; }   /* (b) descendent: p in interiorul .card */
.card > h3 { font-size: 20px; }  /* (c) copil direct */
#probleme  { margin: 24px 0; }   /* (d) 24px sus-jos, 0 stanga-dreapta */

Latimea fara box-sizing: border-box: 320 + 20 + 20 + 2 + 2 = 364px. Implicit (content-box), width masoara doar zona de continut, iar padding-ul si border-ul se adauga de ambele parti.

De ce fiecare selector e cel cerut:

  • .card p are spatiu, deci inseamna orice p aflat undeva in interiorul unui .card. Un p simplu ar fi colorat toate paragrafele din pagina.
  • .card > h3 cere copil direct. Daca mai tarziu bagi un h3 intr-un div din card, acela nu va mai fi afectat — exact ce cere enuntul.
  • #probleme tinteste elementul unic prin id; specificitatea lui este (1,0,0), deci va invinge orice regula pe clasa care ar incerca sa-i schimbe marginea.

Exercitiul 3 (Nivel performanta) — Pagina completa si conflictul de specificitate

Construieste pagina probleme.html a clubului, intr-un singur fisier HTML plus un style.css:

  • structura semantica: header cu titlu si nav, main cu o section ce contine trei article cu clasa card, si footer;
  • meniul din nav facut din legaturi inline-block, cu padding, latime minima egala si efect la :hover;
  • * { box-sizing: border-box; } la inceputul foii de stil, iar cardurile cu width: 30%, padding si border;
  • un tabel cu caption, thead si tbody care arata punctajele la ultima simulare.

Apoi rezolva pe hartie: ai regulile #meniu a { color: gri; } si .meniu a.activ { color: verde; }. Legatura activa ramane gri. Calculeaza specificitatea fiecareia, spune de ce, si propune doua solutii fara !important.

Vezi rezolvarea

Schita de rezolvare (nivel performanta):

1) Structura ceruta — scheletul care trebuie sa se regaseasca in fisier:

<body>
  <header>
    <h1>Probleme propuse</h1>
    <nav id="meniu" class="meniu">
      <a href="index.html">Acasa</a>
      <a href="probleme.html" class="activ">Probleme</a>
      <a href="contact.html">Contact</a>
    </nav>
  </header>
  <main>
    <section>
      <h2>Setul din martie</h2>
      <article class="card"><h3>Sortare topologica</h3><p>Dificultate: medie</p></article>
      <article class="card"><h3>Cautare binara</h3><p>Dificultate: usoara</p></article>
      <article class="card"><h3>Programare dinamica</h3><p>Dificultate: mare</p></article>
    </section>
    <table>
      <caption>Punctaje la simularea din februarie</caption>
      <thead><tr><th>Elev</th><th>Punctaj</th></tr></thead>
      <tbody><tr><td>Andrei M.</td><td>87</td></tr></tbody>
    </table>
  </main>
  <footer><p>Colegiul Tehnic, 2026</p></footer>
</body>

2) CSS-ul cheie:

* { box-sizing: border-box; }

.meniu a { display: inline-block; min-width: 110px; padding: 10px 18px;
           text-align: center; text-decoration: none; }
.meniu a:hover { background: #2d2d44; }

.card { width: 30%; padding: 16px; border: 2px solid #2d2d44;
        display: inline-block; vertical-align: top; margin-right: 2%; }

Fara box-sizing: border-box, trei carduri de 30% plus padding si border ar depasi 100% si al treilea ar cadea pe randul urmator.

3) Conflictul de specificitate:

  • #meniu a = un id + un tip = (1, 0, 1)
  • .meniu a.activ = doua clase + un tip = (0, 2, 1)

Comparatia se face de la stanga la dreapta: pe prima pozitie 1 bate 0, deci #meniu a castiga si legatura ramane gri, indiferent ca a doua regula e scrisa mai jos in fisier. Ordinea din fisier conteaza numai la specificitate egala.

Doua solutii fara !important:

  1. Ridici specificitatea regulii care trebuie sa castige, folosind acelasi id: #meniu a.activ { color: verde; } → (1, 1, 1), care bate (1, 0, 1).
  2. Cobori specificitatea regulii care incurca: inlocuiesti #meniu a cu .meniu a → (0, 1, 1). Atunci .meniu a.activ (0, 2, 1) castiga in mod natural. Aceasta este solutia preferata: id-urile in CSS sunt greu de suprascris tocmai pentru ca sunt prea puternice.

Criterii de evaluare: structura semantica fara div-uri inutile si cu un singur main; tabelul cu caption, thead si tbody; toate imaginile (daca adaugi) cu alt; cele doua perechi de cifre de specificitate calculate corect si explicate prin compararea pozitiilor, nu prin numarul total de selectori.

Ce ai invatat astazi

  • Orice pagina are acelasi schelet: <!DOCTYPE html>, html lang="ro", head (informatii despre pagina) si body (continutul vizibil)
  • Tagurile semantice — header, nav, main, section, article, aside, footer — descriu rolul zonelor; main apare o singura data intr-o pagina
  • Atributele href la legaturi si src plus alt la imagini nu se sar niciodata
  • CSS-ul se leaga in trei feluri: extern (link in head, recomandat), intern (style), inline (atributul style, de evitat)
  • Selectori: tip (p), clasa (.card), id (#anunturi), descendent (.card p), copil direct (.card > h3), grupare (h2, h3), pseudo-clasa (a:hover)
  • Specificitatea se scrie (id-uri, clase, tipuri) si se compara pozitie cu pozitie: un id bate oricate clase; la egalitate perfecta castiga regula scrisa ultima
  • Box model: continut + padding + border + margin. Implicit width masoara doar continutul: 300 + 20 + 20 + 5 + 5 = 350px
  • * { box-sizing: border-box; } face ca width sa insemne latimea totala — asa ies calculele in procente
  • display: block (rand nou, toata latimea), inline (in randul de text, fara width/height), inline-block (in rand, cu dimensiuni), none (dispare cu tot cu locul ocupat)

Vrei mai mult?

Porneste de la pagina clubului de informatica construita in exercitiul 3.

  • Provocare: Deschide pagina in browser, apasa F12 si intra in tab-ul Elements. Selecteaza un card si citeste diagrama box model din panoul din dreapta (Computed): vei vedea cifrele reale pentru content, padding, border si margin. Schimba apoi din DevTools valoarea lui padding si noteaza cum se modifica latimea totala — intai cu box-sizing: content-box, apoi cu border-box. Verifica daca suma pe care ai calculat-o pe hartie coincide cu cifra afisata de browser.
  • De gandit: De ce este considerata proasta practica folosirea id-urilor pentru stilizare, desi functioneaza perfect? Gandeste-te ce se intampla intr-un proiect cu 40 de pagini cand vrei sa suprascrii o regula #meniu a pe o singura pagina: cate reguli noi trebuie sa scrii si cat de urat devin selectorii? Compara cu situatia in care aceeasi regula ar fi fost scrisa .meniu a.
  • Deschidere: Framework-urile CSS moderne de tip utility-first (Tailwind, de exemplu) sunt construite exact pe observatia din acest atom: aproape toate regulile lor au specificitate (0, 1, 0) — o singura clasa — tocmai ca sa nu se bata niciodata intre ele si sa se poata suprascrie prin simpla ordine din fisier. Cand vei intalni clase precum p-4 sau flex, vei sti de ce arata asa.

Urmatoarea lectie

Continua cu design responsive: media queries, unitati relative, Flexbox si strategia Mobile First — aceeasi pagina, afisata bine pe telefon, tableta si desktop.

Continua →