Style tekstu CSS
Zauważ, że w przeciwieństwie do wielu pozostałych właściwości ta nie ma przedrostka font-
, ani text-
Ustala kolor tekstu w danym elemencie. Właściwość color
ustala także domyślny kolor dla podkreślenia i obramowania elementu.
Mówimy o kroju pisma i fontach, ponieważ termin czcionki w rzeczywistości oznacza małe metalowe bloczki z wyrzeźbioną literą w danym kroju i o danym rozmiarze. Szczegóły w artykule Czy fontami można strzelać z procy?
Wybór kroju pisma. Jest to lista krojów ułożona wg kolejności od najbardziej pożądanej. Jeśli przeglądarka nie może użyć pierwszego kroju z listy, użyje jednego z kolejnych.
Ostatni na liście musi być typ kroju:
- sans-serif
- krój bezszeryfowy, np. Helvetica, Arial
- serif
- krój szeryfowy, np. Garamond, Times
Uwaga: w wielu przeglądarkach domyślna wielkość pisma dla rodziny monospace
jest mniejsza, niż dla tekstu proporcjonalnego.
- monospace
- krój o stałej szerokości znaków, np. Courier
- fantasy
- krój fantazyjny
- cursive
- krój imitujący pismo odręczne (np. Zapfino)
Np.
font-family: "Avant Garde Gothic Medium", Verdana, Helvetica, sans-serif;
Jeśli nazwa kroju zawiera spacje, umieść nazwę w cudzysłowie
Należy zawsze pamiętać o umieszczeniu na końcu kroju domyślnego. Przeglądarka renderując tekst na stronie próbuje dobrać najbardziej właściwy font wg listy. Zatem w przypadku zadeklarowania Verdana, Helvetica, sans-serif
, wpierw spróbuje użyć Verdany, jeśli jej nie znajdzie użyje Helvetici, a jeśli i tego fontu nie ma w systemie, skorzysta z domyślnego fontu bezszeryfowego.
Warto mieć także na uwadze to, że niektóre fonty są dostępne tylko na niektórych systemach operacyjnych (przykładowo, Trebuchet rozprowadzany jest z systemem Windows). O tym, jakie fonty są dostępne na poszczególnych platformach systemowych można przeczytać na stronie Code Style; o bezpiecznych kombinacjach fontów można również poczytać na stronie Jeffa Crofta.
Jeśli wykorzystasz kaskadę i dziedziczenie, to wystarczy, że ustawisz krój pisma dla <body>
i nie będziesz musiał powtarzać tej deklaracji w każdej klasie.
Umożliwia określenie bezwzględnej lub względnej, procentowej lub wyrażonej za pomocą słów kluczowych wielkości pisma.
Dopuszczalne są pozostałe jednostki CSS, a także absolutne wartości xx-small
, x-small
, small
, medium
, large
, x-lagre
, xx-large
i względne smaller
, larger
, choć ich użycie jest niepraktyczne.
Dobrą praktyką jest definiowanie wielkości pisma w elemencie <body>
i używanie względnych wielkości pisma (za pomocą em
lub procentów) wszędzie indziej, aby ewentualne późniejsze zmiany wielkości pisma w dokumencie nie były mozolne.
Domyślna wielkość pisma w przeglądarkach jest trochę za duża. Można ją pomniejszyć o 10-15%.
Unikaj małych rozmiarów pisma, szczególnie na stronach, które mają dużo tekstu. Wielu użytkowników męczy czytanie tekstu na ekranie komputera, a sprawę może pogarszać np. nieostry monitor i/lub ustawiona wysoka rozdzielczość ekranu, przez co tekst staje się mniejszy.
body {font-size: 0.9em;}
Jednostki em
i ex
mogą być używane także w innych właściwościach CSS i przydatne są do dopasowywania wielkości elementów strony do jej pisma
p {margin: 1em 0;}
- normal
- zwykła
- bold
- to pogrubiona
p.informacja {font-weight:bold;}
Istnieje także możliwość określania „grubości” tekstu za pomocą wartości takich jak 100
, 200
, 300
, 400
, 500
, 600
, 700
, 900
oraz lighter
, bolder
. Jest to przydatne tylko w DTP, jako, że przeglądarki upraszczają pogrubienie do pojęcia „z pogrubieniem” oraz „bez pogrubienia”.
normal
- normalna
- italic
- kursywa
Istnieje wartość oblique
, która daje tylko pochylenie normalnego kroju, w przeciwieństwie do kursywy, która może być również specjalnie przygotowanym fontem (np. kursywa Times ma pozawijane szeryfy). W większości przypadków nie ma widocznej różnicy między italic
, a oblique
.
To chyba kiepska nazwa
A może by dać „modyfikacja tekstu”?
- small-caps
- kapitaliki (litery małe zamieniane są na litery wielkie, ale z zachowaniem wysokości liter małych. Np.: BROWSER)
letter-spacing
ustawiony na 0 oznacza normalny odstęp. Wartości ujemne ściskają litery do siebie, a dodatnie — rozszerzają. Najlepiej do tego używać jednostki ex
.
Zmiana odstępów między literami przydatna jest do nagłówków i innych dużych napisów. W tekście pisanym mniejszymi literami nawet minimalny 1-pikselowy odstęp może znacznie obniżać jego czytelność.
h1 {letter-spacing: 0.1ex;}
Zmienia odległość między słowami (szerokość spacji). Dozwolone są wartości ujemne.
line-height jest jedynym sposobem ustalania wysokości elementów typu inline
Ustala wysokość linii, czyli tym samym odstęp między wierszami. line-height
jest wyjątkową właściwością CSS, bo jako jedna może przyjmować wartości bez jednostki, które oznaczają krotność wysokości linii tekstu.
line-height: 1.25
Wysokość linii będzie 1¼ wysokości tekstu.
line-height
dopuszcza też użycie wysokości (podanych z jednostką). Do tekstu najlepiej używać krotności. Do nadawania wysokości elementom inline, wygodniej użyć konkretnych wysokości.
Wszystkie powyższe właściwości można połączyć razem wg schematu:
font: styl wariant grubość wielkość/wysokość-linii krój-pisma, krój-pisma
Z czego można pominąć każdy element z wyjątkiem wielkości.
font: bold 80% sans-serif
font
ma też specjalne zastosowanie. Jedną z wartości: caption
, icon
, menu
, message-box
, small-caption
, status-bar
można imitować odpowiednie style pisma używane przez system operacyjny użytkownika.
Ciekawsze efekty podkreślenia można nadać za pomocą border-bottom
Umożliwia określenie dekoracji (ozdobników) tekstu. Właściwość nie jest dziedziczona, co oznacza, że dziecko nie może usunąć ozdobnika nadanego przez rodzica (np. jeśli paragraf ma ustawione podkreślenie, to nie można usunąć podkreślenia dla pojedynczych słów w nim).
- none
- zwyczajny
- blink
- migający tekst. Należy używać ostrożnie.
- line-through
- przekreślony tekst
- overline
- nadkreślenie
- underline
- podkreślenie. Najlepiej ograniczyć jego użycie tylko do odnośników.
#menu a {text-decoration:none;}
#menu a:hover {text-decoration:underline;}
Reguły dziedziczenia tej właściwości zmieniały się w kolejnych wersjach specyfikacji. Nie da się (we wszystkich przeglądarkach) usunąć podkreślenia z elementów, których przodek ma ustawione podkreślenie (np. jeśli odnośnik ma podkreślenie, to podkreślenie będą miały też wszystkie elementy w nim, niezależnie od ich text-decoration
).
text-align
wpływa wyłącznie na tekst. Nie wyrównuje całych elementów. Zobacz margin:auto
i float
.
- left
- wyrównanie do lewej
- right
- do prawej
- center
- wyśrodkowany
- justify
- rozciągnięcie tekstu do obu krawędzi. Zbyt rozciągnięty tekst traci czytelność, dlatego należy tą wartość stosować tylko na szerokich kolumnach tekstu lub gdy używa się dzielenia wyrazów.
p.uwaga {text-align:center;}
vertical-align
wpływa wyłącznie na linie tekstu i zawartość komórek tabel. Nie wyrównuje całych elementów. Zobacz pozycjonowanie
.
W przypadku elementów liniowych (inline) wyrównuje zawartość danego względem linii elementu nadrzędnego (np. <strong>
względem linii w <p>
).
Dokładne działanie tej właściwości jest dość skomplikowane i pełne niuansów związanych z wyliczaniem wysokości linii w CSS. Tu zamieszczony opis jest uproszczony. Pełny znajdziesz w specyfikacji.
baseline
- wyrównuje linie bazowe, dzięki czemu zachowuje równą linię pisma, nawet gdy tekst ma mieszaną wysokość.
middle
- wyśrodkowuje element w pionie (tylko w obrębie linii)
sub
isuper
- pozycja subskryptu i superskryptu (ale nie zmienia wielkości pisma). Zobacz
<sub>
%
lub długość- o ile (procent wysokości linii) ma być przesunięty element. Wartości dodatnie podnoszą, ujemne obniżają.
0%
daje efekt identyczny zbaseline
.
Jeśli działanie vertical-align
nie jest widoczne, to spróbuj zwiększyć line-height
.
Pierwsza linia bloku (np. <p>
) może mieć wcięcie o szerokości nadanej przez text-indent
.
text-indent
może być też ujemny i w połączeniu z padding
pozwala zrobić pierwszą linię wysuniętą bardziej na lewo względem pozostałych.
p {text-indent: 1em;}
Ta właściwość ma być używana, gdy ze względów dekoracyjnych pożądana jest inna wielkość liter, niż obecna w dokumencie — np. nagłówki mogą być pisane samymi dużymi literami jednocześnie zachowując poprawną pisownię w HTML.
- none
- wyświetla litery tak jak zostały wpisane
- capitalize
- każdy wyraz zaczyna się od wielkiej litery
- uppercase
- wyświetlanie wielkimi literami
- lowercase
- wyświetlanie małymi literami
h1,h2 {text-transform: uppercase;}