article { … }.• Tipuri de selecții CSS: element, clasă, id, context (div span)
Selector de element
Selector de clasă
Text normal și text cu clasă .accent.
Selector de id
Această casetă folosește #highlight.
Selecție pe context
Acesta e .parent .child (descendent).
• span vs div (mod afișare) + diferite alinieri ale textului
Span inline
Span centrat (inline-block)
Div bloc — se rupe pe rând nou.
Acest paragraf este aliniat la dreapta.
• Diverse tipuri de fonturi (minim 3) + schimbarea mărimii textului prin ambele metode
Text cu font serif (Times New Roman) — mărit prin clasă.
Text monospațiat (Courier New) — mărit prin stil inline.
Font global (Arial/Segoe UI) — setat în style.css.
• Culori, fundal imagine, chenar, umbre
Culoare text: roșu, verde, albastru.
Acesta este un bloc cu fundal imagine (pattern din img/bg-pattern.png), cu chenar și umbră.
• Tabele stilizate (fundal, chenar, aliniere, dimensiuni celule)
| Selector | Exemplu | Utilizare |
|---|---|---|
| element | p { … } | Stilizează toate paragrafele |
| clasă | .accent { … } | Se aplică elementelor cu clasa dată |
| id | #highlight { … } | Unic pe pagină |
| context | div span { … } | Doar span în interiorul div |
• Efecte hover și buton cu imagine (Button image)
Resurse
• Imagine fixă ce rămâne la scroll (position: fixed)
Derulează puțin — în colțul stânga-jos vei vedea o notă fixă.
Element fix: vizibil la scroll
• Comentarii în cod + structură semantică