Ogólne własności tekstu

Od kiedy przeglądarki IE i Netscape pozwalają na określanie wyglądu tekstu w arkuszach CSS (od wersji 4.x), nie ma potrzeby stosowania nadużywanego wcześniej, a obecnie wycofywanego znacznika font.

Korzyść jest co najmniej podwójna. Po pierwsze znacznie zmniejsza ilość kodu, a po drugie zapewnia spójność i jednolitość formatowania tekstu w całej witrynie, o ile - oczywiście - administratorzy nie udostępnią uzytkownikom dodatkowych możliwości formatowania czcionki, oferowanej w edytorach typu WYSIWYG. Okiełznanie tendencji zwłaszcza przygodnych autorów do ’ozdaniania’ tekstu może być trudne.

CSS pozwala panować nad wszystkimi aspektami wyglądu tekstu - doborem rodziny czcionek, ich wagą, wielkością, postacią (normalna i pochyła) i wariantami (normalna lub kapitaliki), szerokością (zwarte, rozszerzone - właściwość nieobsługiwana przez popularne przeglądarki) wysokości linii. Szczegóły można znaleźć w rozlicznych podręcznikach CSS.

Własności podstawowe globalnie

Podstawowe własności tekstu najlepiej ustalić globalnie, dla wszystkich elementów treści w deklaracji reguł dla elementu body, a następnie modyfikować je w regułach dla konkretnych elementów.

Dobór rodziny czcionek zależy od koncepcji graficznej. Pamiętać wszakże należy, że przeglądarki korzystają z czcionek zainstalowanych w komputerach użytkowników, odmiennych w systemach Windows, MacOS, Unix i Linux. Uwzględniając tę okoliczność, należy określić w arkuszu alternatywne rodziny czcionek i rodzinę ogólną, z której przeglądarka skorzysta w przypadku, gdy żadna z zaplanowanych czcionek będzie niedostępna.

Rozmiar czcionki najlepiej określać w procentach i jednostkach em lub ex. Unikać należy stosowania punktów i pic - jednostki te doskonale sprawdzają się w drukarstwie, ale ponieważ komputery nie potrafią precyzyjnie ustalać rzeczywistej wielkości elementów na ekranie, jednostki te w arkuszach stylów są mało przydatne.

Rozwiązaniem szczególnie wartym polecenia jest zastosowanie w deklaracji dla elementu body rozmiaru czcionki w procentach (76.1%), a dla konkretnych elementów w emach. Takie ustawienie zapewnia, że w dużej grupie przeglądarek uzyskamy zbliżony efekt, o czym można się łatwo przekonać, na podstawie eksperymentów, które przeprowadził swego czasu Owen Briggs, opisanym w artykule Sane CSS Sizes (Sensowne wielkości w CSS). Metoda zalecana przez Briggsa posiada jedną wadę - zakłada ona 16-pikselową domyślną wielkość tekstu w przeglądarkach. Jeśli użytkownik zmieni tę domyślną wielkość, czego przecież wykluczyć nie można, faktyczny rozmiar czcionek będzie inny niż określony w arkuszu stylów. Ale ma też i niebagatelną zaletę. Czcionki z tak określonym rozmiarem będą się skalować we wszystkich przeglądarkach.

Przykład reguł formatujących własności czcionki i teksty w stylu elementu body:

body {
   margin       : 0; /* zeruje marginesy wszystkim elementom */
   padding      : 0; /* zeruje odstępy wszystkim elementom */
   font         : normal 76.1% Arial, Verdana, Helvetica, sans-serif;
   line-height  : 1.2; /* ustala wysokość linii */ 
}

W przykładzie powyżej wszystkim elementom został nadany zerowy margines i zerowe dopełnienie. Pozbywamy się dzięki temu domyślnych ustawień przeglądarek. Ten dość powszechnie stosowany zabieg pozwala uniknąć niespodzianek i kłopotów związanych z domyślnymi wartościami tych własności w różnych przeglądarkach. Wymaga jednak ustawienia w dalszej części arkusza stylów każdemu elementowi marginesów i dopełnień.

Zwróć również uwagę, że dla własności line-height nie została określona jednostka. W takim przypadku podana wartość liczbowa jest współczynnikiem uzależniającym wysokość linii od rozmiaru czcionki. Gdybyśmy zastosowali tutaj konretną jednostkę, co można uczynić, wysokość linii byłaby ustalana bez względu na rozmiar czcionki.

Tekst w elementach div

Globalne określenie podstawowych własności czcionki i tekstu w regułach dla body spowoduje, że teksty objęte znacznikami div, a także teksty nieobjęte żadnymi znacznikami przyjmą cechy ookreślone w regułach dla body.

W efekcie nie musimy tworzyć odrębnego stylu dla tekstów objętych elementami div, zapewniając sobie, że dopóki nie zmodyfikujemy tego ustawienia w regule ustanowionej selektorem klasy lub identyfikatora, tekst będzie wyświetlany zgodnie z ustawieniami dla body.

Styl akapitu

Warto natomiast ustalić styl dla akapitów, szczególnie jedną z własości - odstępy między akapitami. Oczywiście wóczas, gdy zdecydujemy się na ten powszechnie stosowany sposób wyróżniania akapitów:

Przykład reguły dla elementu p:

p {
   margin: .84em 0; /* ustala między akapitami margines dolny i górny */
}

Arkusz stylów może również zawierać style akapitów o specjalnym przeznaczeniu, np. wyróżniajacych uwagi, ciekawostki, ważne informacje. Oto kilka przykładów:

Przykłady reguł dla akapitów o różnych funkcjach:

p.note {
   margin-left:1em;
   color: blue; /* wyróżni uwagi kolorem czcionki  */
}
 
p.warning {
 
   padding: 3em 1em 1.25em 3em;
   background: url(../images/warning.gif) no-repeat top left #fafadd;
   border-bottom: 1px solid #ff0000;
} 
 
p.tip {
   margin-left:1em;
   padding: 3em 1em 1.25em 3em;
   background: url(../images/tip.png) no-repeat top right #fff;
   text-align: justify;
}