Formatowanie treści

Przygotowaliśmy pojemniki, w których znajdują się poszczególne elementy budowanej przez nas strony. Musimy stronę wypełnić "jakąś" treścią. Tekst na na ogół umieszczamy w:

Nagłówek

Każda podstrona powinna mieć tytuł (nagłówek) określający jej zawartość. Przy stronach rozbudowanych może zaistnieć potrzeba wstawiania podtytułów. Twórcy języka html przewidzieli 6 poziomów nagłówków. Oczywiście, jeśli używamy jednego tytułu stosujemy poziom najwyższy h1 (ważne z punktu widzenia wyszukiwarek). Do oznaczenia kolejnych poziomów służą kolejno: h2, h3, h4, h5, h6. Wstawmy sobie zatem tytuł pierwszej strony — Tradycje okresu Bożego Narodzenia. W naszym kodzie strony będzie to wyglądało tak:

18. <div id="tresc">19. <h1>Tradycje okresu Bożego Narodzenia</h1>20. </div>

Później sobie ten nagłówek przyozdobimy, a na razie w arkuszu stylów określmy dla niego marginesy i wyśrodkujmy go.

51. h1 {
52.  text-align: center; /* wyśrodkowanie */
53.  margin: 10px 10px 40px 10px; /* marginesy, największy z dołu */
54. }

Akapit

Oczywiście największa ilość tekstu znajduje się w akapitach. Słowo akapit, to po angielsku paragraph. Stąd też znacznik, to tylko litera p. Napiszmy sobie krótki tekst: Tu jest tekst akapitu. W połączeniu z nagłówkiem będzie to wyglądało tak:

18. <div id="tresc">19. <h1>Tradycje okresu Bożego Narodzenia</h1>20. <p>Tu jest tekst akapitu.</p>21. </div>

I zanim umieścimy tu więcej tekstu, określmy jego styl. Na naszej stronie dla akapit określamy następujące właściwości akapitu: wyrównanie tekstu - justowanie, wcięcie w pierwszym wierszu akapitu i marginesy. Czcionkę i wysokość linii określiliśmy w stylu body głównie z myślą o akapitach.

56. p {
57.  text-align: justify; /* justowanie */
58.  text-indent: 26px; /* wcięcie w pierwszym wierszu */
59.  margin: 10px 20px; /* marginesy */
60. }

Uwagi:

Wyrównanie tekstu (text-align) może przyjmować cztery wartości: left, right, center i justify (wyrównanie do lewej i prawej). Jeśli w elemencie nadrzędnym (rodzicu) nie określono innej wartości niż left, a chcesz mieć wyrównanie do lewej, to możesz tę właściwość pominąć.

Jeśli chodzi o wcięcie w pierwszym wierszu akapitu (text-indent) to tujaj w px określasz wielkość tego wcięcia. Przeglądarka domyślnie nie stosuje wcięcia.

Pseudoelement first-letter

Na stronie zastosujemy wyróżnienie pierwszej litery akapitu. Do tego zdefiniujemy tzw. pseudoelement. Można by to zrobić na dwa sposoby. Ręcznie - wstawić znacznik span z określonym wyglądem pierwszej litery. Musielibyśmy pilnować, aby nie pominąć żadnego akapitu. Automatycznie - możemy to zlecić przeglądarce definiując odpowiednią regułę. Jak już wiesz, każda reguła w CSS (selektor + deklaracja) ma tak samo zbudowaną deklarację. Nazwa (odpowiednik selektora) pseudo-elementu ma postać:

p:first-letter

Przeglądarka odnajdzie wszystkie pierwsze litery akapitów i je sformatuje zgodnie z poniższą regułą.

62. p:first-letter {
63.  font-family: "Times new roman";
64.  font-weight: bold;
65.  font-size: 20px;
66.  color: #E4420C;
67. }

Rodzaj czcionki, który wybieramy, będzie się ładniej prezentował, jeśli będzie to tzw. czcionka szeryfowa (ozdobna z zaciosami). Ponieważ nazwa czcionki jest wielowyrazowa, to musimy ją wpisywać w apostrofach bądź cudzysłowach. Na ogół taką czcionkę pogrubiamy (bold), stosujemy rozmiar większy niż rozmiar czcionki akapitu i wyróżniamy ją innym kolorem.