Tekst na stronie www można edytować na wiele sposobów. Można zmieniać m.in. rozmiar, rodzaj, wagę, styl i wiele innych. W poniższych przykładach użyjemy selektora p, ale oczywiście rozmiar czcionki można ustawiać również dla innych elementów, np. dla tytułów h1...h6, dla tabel, które będą uzupełniane treścią.
Rodzaj czcionki
p { font-family: nazwa_czcionki;}
Przy wpisywaniu nazwy czcionki należy pamiętać, aby kilkuwyrazową nazwę wziąć w apostrofy. Warto również wpisywać kilka alternatywnych czcionek. Czasem zdarza się, że użytkownik nie ma czcionki, która jest ustawiona. Jeśli wpiszemy kilka czcionek to przy braku pierwszej, tekst zostanie wyświetlony następną.
Rozmiar czcionki
p { font-size: rozmiar;}
określanie rozmiaru czcionki może się odbywać na kilka sposobów. Można podawać:
1. Jednostki długości:
a) względne:
-em – wysokość aktualnej czcionki
-ex – wysokość małej litery x
-px – piksele ekranowe
b) bezwzględne:
-in – cale
-cm – centymetry
-mm – milimetry
-pt – punkty (1pt=1/72 in)
-pc- pika (1pc=12pt)
2. Wartości absolutne:
-xx-small - najmniejsza
-x-small - mniejsza
-small - mała
-medium - średnia
-large - duża
-x-large - większa
-xx-large - największa
3. Wartości względne:
-smaller - mniejsza od bieżącej
-larger - większa od bieżącej
4. Procentowo – procent wielkości bieżącej czcionki.
Styl czcionki
p { font-style: styl;}
Jako styl możemy wybrać:
-normal – czcionka normalna, podstawowa
-italic – czcionka pochylona (kursywa, osobny krój czcionki)
-oblique – czcionka pochylona (kursywa, generowana przez pochylenie zwykłej czcionki).
Jeśli czcionka italic jest niedostępna, zostanie zastąpiona oblique.
Waga czcionki
p { font-weight: waga;}
Tutaj do wyboru są:
- wartości absolutne: normal, bold (pogrubienie) oraz stopnie wytłuszczenia: 100, 200, 300, 400 (normal), 500, 600, 700 (bold), 800, 900. Niektóre czcionki nie posiadają wszystkich 9 stopni.
- wartości względne: lighter (mniej wytłuszczona) i bolder (bardziej wytłuszczona).
Wariant czcionki
p {font-variant: wariant;}
Warianty mogą być dwa: normal lubsmall-caps (kapitaliki).
Kolor tekstu
p { color: kolor;}
Jako kolor wpisujemy nazwę koloru, kolor zapisany w systemie szesnastkowym lub kolor rgb. Dokładnie o kolorach możesz poczytać w poradzie: Jak ustawić kolory w CSS?
Dekoracja
p {text-decoration: dekoracja;}
Dekorację można wybierać spośród:
- none- bez zmian
- underline – podkreślenie
- line-throught -przekreślenie
- overline – nadkreślenie
- blink – migotanie tekstu.
Powyższe wartości można łączyć. Np. p { text-decoration: underline overline;} – tekst będzie jednocześnie podkreślony i nadkreślony.
Transformacja
p {text-transformation: transformacja;}
Transformację można wybierać spośród:
- none – bez zmian
- capitalize – zamiana pierwszych liter w wyrazach na wielkie
- uppercase – zamiana wszystkich liter na wielkie
- lowercase – zamiana wszystkich liter na małe
Wyrównanie
p {text-align: wyrownanie;}
Wyrównania możliwe do zastosowania:
- left – do lewej strony
- right – do prawej strony
- center – wyśrodkowanie
- justify – justowanie (do obu marginesów równocześnie)
Wcięcie (przydatne przy tworzeniu akapitów)
p {text-indent: wcięcie;}
Jako wcięcie podaje się konkretną wielkość, wyrażoną jednostką długości (podobnie jak przy definiowaniu rozmiaru czcionki). Wpisanie normal przywróci domyślną wartość.
Odstęp między wierszami
p {line-height: odstęp;}
Jako odstęp podaje się konkretną wielkość, wyrażoną jednostką długości (podobnie jak przy definiowaniu rozmiaru czcionki). Wpisanie normal przywróci domyślną wartość.
Odstęp między wyrazami
p {word-spacing: odstęp;}
Jako odstęp podaje się konkretną wielkość, wyrażoną jednostką długości (podobnie jak przy definiowaniu rozmiaru czcionki). Wpisanie normal przywróci domyślną wartość.
Odstęp między literami
p {letter-spacing: odstęp;}
Jako odstęp podaje się konkretną wielkość, wyrażoną jednostką długości (podobnie jak przy definiowaniu rozmiaru czcionki). Wpisanie normal przywróci domyślną wartość.
