Języki

Niniejszy dokument jest tłumaczeniem, które może zawierać błędy, lub który mógł się zdeaktualizować w stosunku do wersji angielskiej. Wykonane przez: Emil Sierżęga

Arkusze Kaskadowe Stylów CSS tips & tricks

Zobacz także indeks wszystkich porad.

Wcięcia akapitowe

Eiffel tower

Model Wieży Eiffla w Parc Mini-France

Teraz coś prostego: wcięcia pierwszej linii każdego akapitu. Wiele osób uważa, że wcięcia akapitowe są łatwiejsze do czytania niż odstępy międzyakapitowe (stosowane m.in. w języku angielskim, co przyczyniło się także do domyślnego podziału tekstu dla HTML-a i tagu <P>), szczególnie w dłuższych tekstach. Dodatkowo pozwalają one zarezerwować puste linie dla istotniejszych przerw.

Sztuczka polega na tym, że robimy wcięcie tylko dla akapitów, które następują po innych akapitach. Pierwszy akapit nie musi posiadać wcięcia, nie potrzebuje go także akapit, który występuje zaraz za wykresem, nagłówkiem bądź jakimkolwiek innym elementem, który jest oddzielony od tekstu. Kod jest bardzo prosty:

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

W ten sposób otrzymamy wcięcia wyłącznie dla akapitów, które występują po jakimś innym akapicie. Ukryte są także górne marginesy wszystkich akapitów oraz dolne marginesy wszystkich akapitów z wcięciami. W praktyce okaże się jednak, że istnieją pewne wyjątki.

Dla przykładu, na tej stronie znajdują się elementy P, które są użyte do opisu obrazków (zobacz także przykłady z artykułu “Figury i opisy”). Zostały one wyśrodkowane, ponieważ nie powinny posiadać wcięć. Zadbała o to prosta reguła: 'p.caption {text-indent: 0}'. (W kodzie źródłowym tej strony możesz sprawdzić, że powyższa regułą faktycznie została użyta.)

Możemy teraz używać różnych przerw między akapitami, aby wskazać ważne przerwy w tekście. Zdefiniujmy trzy różne klasy: mot (mały odstęp tematyczny), sot (średni odstęp tematyczny) oraz dot (duży odstęp tematyczny). Ten akapit jest klasy mot, więc łatwo sprawdzić efekt.

p.mot { text-indent: 0; margin-top: 0.83em }
p.sot { text-indent: 0; margin-top: 2.17em }
p.dot { text-indent: 0; margin-top: 3.08em }
Bert Bos, Prowadzący dział CSS
Prawa autorskie © 1994–2017 W3C®

Utworzono 17 Sty 2001;
Ostatnia aktualizacja czw, 9 lis 2017, 04:40:59

Języki

O tłumaczeniach