Foi de Stil Web
Indrumari si Trucuri CSS

Paragrafe Indentate

Iata ceva simplu: indentarea primei linii a fiecarui paragraf. Multi oameni gasesc aceasta mai usor de citit decat linii goale intre paragrafe, in special pentru texte lungi, si deasemenea permite rezervarea liniilor goale pentru intreruperi mai importante.

Trucul aici este sa se indenteze numai paragrafele care urmeaza altor paragrafe. Primul paragraf al unei pagini nu are nevoie de indentare si nici paragrafele care urmeaza unei diagrame, unui titlu sau a altceva care este decalat de text. Regulile sunt in fapt foarte simple:

p {
  margin-bottom: 0 }
p + p {
  text-indent: 1.5em;
  margin-top: 0 }

Aceasta indenteaza prima linie a numai acelor apragrafe care urmeaza unui alt paragraf. Deasemenea elimina spatiu de sub toate paragrafele si de deasupra tuturor paragrafelor indentate. Dar in practica veti constata ca aveti nevoie de exceptii.

In aceastsa pagina, de exemplu, exista elemente P care sunt utilizate drept subtitluri pentru imagini (vedeti exemplul “Figuri & subtitluri”). Le-am centrat, si prin urmare ele nu ar trebui indentate. O regula simpla 'p.caption {text-indent: 0}' rezolva aceasta. Puteti vedea ca am utilizat cu adevarat acea regula in acest exemplu.

Acum putem utiliza cantitati variate de spatii albe intre paragrafe pentru a indica intreruperi importante in text. Sa definim trei clase diferite: stb (small thematic break=intrerupere tematica mica), mtb (medium thematic break=intrerupere tematica medie) si ltb (large thematic break=intrerupere tematica mare). I-am dat acestui paragraf o clasa stb, asa ca puteti vedea acest efect.

p.stb { text-indent: 0; margin-top: 0.83em }
p.mtb { text-indent: 0; margin-top: 2.17em }
p.ltb { text-indent: 0; margin-top: 3.08em }