Formatowanie tekstu
Witam w drugiej części kursu poświęconego CSS. Mam nadzieję, że opanowałeś poprzednią lekcję
. Tym razem zajmiemy się formatowaniem tekstu w stylach. Jednak oszczędzę Wam wielu niepotrzebnych przykładów. W zamian za to, przedstawię podstawowe elementy i ich właściwości. Wszystko po to, żebyście od razu po przeczytaniu tego kursu, mogli stworzyć własne niepowtarzalne style.
Jak wiadomo, większość internautów wchodzi do sieci w poszukiwaniu informacji. Na nic nam piękna, grafika skoro nie posiadamy nic wartościowego na stronie. Jednak samo posiadanie ciekawych materiałów nie oznacza sukcesu. Najważniejszy jest sposób przedstawienia tekstu na stronie.
HTML posiadał bardzo skąpe możliwości pod tym względem. Tekst mogliśmy wyrównać do prawej, lewej lub środka, powiększyć lub pomniejszyć go. Jednak od czego mamy CSS. Style pozwalają nam w znacznym stopniu na sposób przedstawienia tekstu. Nie chodzi tu tylko o wybór czcionki, koloru czy wielkości. Mamy do dyspozycji bardzo dużo możliwości, jak odstęp między literami, wyrazami czy dekorowanie tekstu itd. Zresztą zobacz sam...
Czcionki
Wydawałoby się, że to taka prosta sprawa z tymi czcionkami, jednak nie. Na początku trzeba wspomnieć o tym, że niektóre czcionki wyglądają dobrze po wydrukowaniu a inne na stronach WWW. Domyślną czcionką wyświetlaną przez przeglądarkę jest Times New Roman. Jednak Times jest czcionką szeryfową (z daszkami) i na ekranie fatalnie się ją czyta (w małych rozmiarach jest w ogólnie nie czytelna). Czcionkami, które najlepiej prezentują się na stronie, są Tahoma, Arial lub Verdana, która została stworzona specjalnie na potrzeby WWW. Ja osobiście polecam właśnie Verdane, najlepiej wielkość od 8 - 10pt [Verdana ma tą ważną cechę, że w przeciwieństwie do Ariala i Timesa jest czytelna nawet dla 7pt - przyp. red.]
Elementem odpowiadającym za właściwości tekstu jest FONT. Poniżej przedstawiam tabelę w właściwościami i rodzajami FONT.
WŁAŚCIWOŚCI |
WARTOŚCI |
FONT-FAMILY
(określa rodzaj czcionki) |
Jako wartość podajemy nazwę dowolnej czcionki np. Tahoma. Uwaga wielowyrazowe nazwy czcionek należy ująć w cudzysłów, np. "Times New Roman" |
FONT-SIZE
(określa wielkość czcionki) |
wartośći względne:
xx-small
x-small
small
medium
large
x-large
xx-large
larger
smaller
wartośći bezwzględne:
dowolna liczba/ wartość procentowa |
FONT-WEIGHT
(określa grubość czcionki) |
wartośći względne:
normal
bold
bolder
lighter
wartośći bezwzględne liczbowe:
100-900 |
FONT-VARIANT
(czcionka normalna lub kapitaliki) |
normal
small-caps |
FONT-STYLE
(czcionka normalna lub pochyła) |
normal
italic
oblique |
Teraz wystarczy, że zbudujemy formułę stylu, według schematu który przedstawiłem w poprzedniej części kursu. Przy pomocy powyższej tabeli możesz bez problemu określić dowolną właściwość tekstu. Dla przykładu sformatujemy tekst dla akapitu:
P {
font-family:verdana,"Times New Roman";
font-size:10pt;
font-weight:bold;
font-style: italic;
}
Dzięki takiemu zapisowi tekst będzie pisany verdaną o rozmiarze 10pt , będzie pogrubiony oraz pochyły. Prawda, że łatwe 
Zapewne zastanawiacie się dlaczego rozmiar określiłem w punktach. Jest to dobra metoda aby Netscape wyświetlił tekst tak samo jak IE. Oczywiście istnieją inne możliwości określania wielkości czcionki np. procenty lub piksele. Jednak pozostanie przy punktach zaoszczędzi Ci wielu nieprzyjemności.