Formatowanie tekstu na stylach CSS

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...

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.

CSS nie ogranicza się jedynie do wyboru czcionek. Dzięki stylom jesteśmy w stanie określić bardzo dużo właściwości tekstu, zaczynając od wcięć w akapicie a kończąc na odległości między literami (kerningu).

Teraz zajmiemy się kolejnym elementem CSS odpowiadającym bezpośrednio za wygląd tekstu

Element TEXT

WŁAŚCIWOŚCI	WARTOŚCI
TEXT - ALIGN (wyrównanie tekstu)	Right Left Center Justify
TEXT - TRANSFORM (wielkość liter)	None Capitalize Uppercase Lowercase
TEXT - DECORATION (dekorowanie tekstu)	Underline Overline Line-through Blink None
TEXT - INDENT (wcinanie tekstu)	Długość określona w px, pt i procentach

Teraz najlepiej będzie jeżeli stworzysz dowolną stronę html z dużą ilością tekstu i zaczniesz się bawić poznanymi elementami. Przypisuj tekstowi różne właściwości, w ten sposób lepiej poznasz poszczególne możliwości, np. 

.tekst {
        color:red;
        font-family:verdana;
        font-size:10pt;
        text-decoration:underline;
        text-align:center;
        font-weight:bold;
} 

Sporo tego, prawda? :)))

Oczywiście zostało jeszcze kilka elementów o których należy wspomnieć. Przedstawiam już ostatnią tabelę z pozostałymi elementami których nie można było zamieścić wcześniej:

WŁAŚCIWOŚCI	WARTOŚCI
LINE-HEIGHT (odstęp między wierszami)	Normal Dowolna wielkość wyrażona w procentach lub liczbie
VERTICAL-ALIGN (wyrównanie tekstu w pionie)	Baseline Sub Super Top Text-top Middle Bottom Text-bottom Wielkość wyrażona w procentach
WHITE-SPACE	Normal Pre Nowrap
LETTER-SPACING (odstęp między literami)	Normal Dowolna długość
WORD-SPACING (odstęp między wyrazami)	Normal Dowolna długość