Style CSS w praktyce

<P class=wyr> - lead tekstu, wyróżniony pierwszy akapit. Jest to tekst akapitu, który powinien obejmować więcej niż jeden wiersz. Nie powinien być jednak nadmiernie długi, ponieważ ma charakter wstępu, wprowadzenia do tekstu.

Tag <P>. Na stronach www lepiej posługiwać się arkuszami stylów CSS, niż wpisywać szczegółowo informacje o formatowaniu w każdy fragment tekstu. Podstawą tekstu jest zwykły akapit. Stanowi on większość treści każdego dokumentu. Nie posiada zdefiniowanej klasy CSS. Może się w nim pojawić przypis.¹. Według specyfikacji HTML tekst akapitu powinien być opatrzony tagiem <P>, a nie <DIV>.

P class=mysl Niektóre teksty wymagają zamieszczenia krótkiej myśli, cytatu biblijnego lub motto, zazwyczaj u góry tekstu, czasem w środku (np. cytat biblijny). Pojawia się zwłaszcza w tekstach papieskich, np. tu: https://opoka.org.pl/biblioteka/W/WP/franciszek_i/przemowienia/sdm2020-lev_11022020.html (u samej góry).

P class=noindent Krótki akapit zawierający zazwyczaj pozdrowienie takie, jak "Drodzy biskupi" - który chcemy zaznaczyć brakiem wcięcia akapitowego oraz pierwszą literą w kolorze czerwonym.

Drodzy biskupi,

P class=pytanie. Tak może wyglądać pytanie - pytanie w wywiadzie lub dialogu. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

P class=odpowiedz. Tak może być prezentowana odpowiedź w wywiadzie lub dialogu. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

P class=koment Tak wygląda akapit z dodatkowymi informacjami (np. informacje na temat książki, komentarz redakcyjny, krótki wstęp). Jest potrzebny, aby odróżnić informacje podawane przez redakcję od zasadniczej treści. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Dalej kontynuowany jest tekst w akapicie. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

P class=cytat. To jest akapit z cytatem blokowym. Potrzebne jest wcięcie z lewej i inny krój czcionki. Niewskazane jest używanie dodatkowych znaków graficznych lub oddzielających linii. Taki cytat może obejmować wiele wierszy tekstu. Przykład użycia (wielokrotnego, uzmysławiającego dlaczego nie są wskazane dodatkowe elementy graficzne). Należy go odróżnić od bardzo krótkiego cytatu, który chcemy wyróżnić z tekstu (i dlatego stosujemy większą czcionkę lub inne elementy graficzne).

Dobrze ustrukturyzowany tekst wymaga nieraz stosowania nagłówków lub śródtytułów. Zgodnie ze specyfikacją HTML służą temu tagi H1, H2, H3, H4, H5 oraz H6. Przykłady śródtytułów różnego poziomu, spis treści i przypisy znajdziemy np. w encyklice Laudato Si'. Poziomy H1 oraz H2 zarezerwowane są dla elementów strukturalnych portalu (np. autor tekstu, tytuł główny), pozostałe poziomy mogą pojawić się wewnątrz dokumentu.

To jest przykład śródtytułu (poziom 3)

Zazwyczaj stosujemy go w dokumentach typu encyklika lub adhortacja, dla oznaczenia rozdziału. Pod śródtytułem następuje dalszy ciąg tekstu pisanego w akapicie

To jest przykład śródtytułu (poziom 4)

Jest to najczęściej stosowany śródtytuł. Pod śródtytułem następuje dalszy ciąg tekstu pisanego w akapicie

To jest przykład śródtytułu (poziom 5)

Pod śródtytułem następuje dalszy ciąg tekstu pisanego w akapicie

To jest przykład śródtytułu (poziom 6)

W praktyce rzadko stosuje się tak głęboki poziom śródtytułów, ale niektóre teksty, w szczególności prawne, mogą zawierać tak wiele poziomów.

Nieraz w dokumentach posługujemy się również listami różnego rodzaju. Może to być lista numerowana <OL> lub nienumerowana <UL>

1. Element pierwszy
2. Element drugi
3. Element trzeci

• Element pierwszy
• Element drugi

class=autor Tak wygląda akapit z notką o autorze. Znajduje się zazwyczaj u dołu tekstu. Zazwyczaj jest to więcej niż jeden wiersz tekstu. Przykład u dołu artykułu.

P class=rubr lub SPAN class=rubr - W niektórych tekstach, zwłaszcza liturgicznych pojawia się potrzeba wyróżnienia fragmentu tekstu pogrubioną czerwoną czcionką.

W praktyce może to wyglądać tak:

Kapłan: Pan z wami

Wszyscy: I z duchem twoim

W niektórych dokumentach pojawia się potrzeba wstawienia spisu treści, służącego łatwiejszej nawigacji. Stosujemy wtedy tabelę z klasą "spistresci". Przykład wykorzystania. Ostatnia komórka tabeli może zawierać numer strony, wtedy stosujemy w niej klasę "numb". Przykład wykorzystania

Czasem istnieje potrzeba zamieszczenia tabeli z wyróżnionym nagłówkiem. Stosujemy wtedy klasę "nagl". Nagłówek jest wtedy w odwróconej kolorystyce (jasny tekst na ciemnym tle)

Jeśli chcemy oddzielić fragment tekstu, możemy to zrobić na dwa sposoby, stosując tag "<HR>" lub klasę "gwiazdki".

Na tym akapitem znajduje się linia, oddzielająca go od poprzedniej treści (tag <HR>)

* * *

Ten akapit został oddzielony wycentrowanymi gwiazdkami (class=gwiazdki)

* * *

Zazwyczaj u dołu strony podajemy dodatkowe informacje, pozwalające zidentyfikować redaktora opracowującego tekst oraz wymagane informacje dotyczące praw autorskich

P class=redactor - styl używany u dołu dokumentu przy opisie, kto go zredagował (np. "opr mg/mg")

DIV.copyright, P.copy - style używane w sekcji "Copyright" u dołu każdego dokumentu. Graficznie mogą być np. zaprezentowane mniejszą czcionką w bardziej szarym odcieniu.

1. class=przypisy - służący formatowaniu tekstu przypisu znajdującego się pod tekstem. Akapit jest odsunięty od lewego marginesu mniej więcej o 1em. Może być też przedstawiony nieco mniejszą czcionką (np. 90%) lub innym krojem czcionki.