Style tekstu

Kolor: color

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.

Pismo

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?

Krój pisma: font-family

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

Wielkość pisma: font-size

Umożliwia określenie bezwzględnej lub względnej, procentowej lub wyrażonej za pomocą słów kluczowych wielkości pisma.

Jednostki:

%
Wielkość relatywna do wielkości pisma rodzica (np. font-size: 200% dwukrotnie powiększa pismo w danym elemencie)
ex
Wielkość proporcjonalna do wysokości litery x pisma rodzica
px
Piksele. Przydatne, gdy trzeba dopasować wielkość tekstu do wielkości obrazków. Bug w IE6
pt
Punkty. Wielkości w punktach są dobre do druku, ale nie nadają się do wyświetlania na ekranie komputera. Użytkownicy prawie nigdy nie mają ustawionego prawdziwego, prawidłowego DPI w systemie operacyjnym, przez co wielkość tekstu będzie jeszcze bardziej nieprzewidywalna, niż w przypadku pikseli lub rozmiarów względnych.

Dopuszczalne są pozostałe jednostki CSS, a także absolutne wartości xx-small, x-small, small, medium, large, x-lagre, xx-large (co odpowiada odpowiednio: 9, 10, 13, 16, 18, 24, 32 piksela (zamiast nazw polecam używać właśnie tych liczb)) i względne smaller, larger, choć ich użycie jest niepraktyczne.

Dobrą praktyką jest definiowanie wielkości pisma w elemencie <html> i używanie względnych wielkości pisma (za pomocą 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.

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: 100% 0;}

Grubość pisma: font-weight

100
zwykła
700
to pogrubiona

Uważaj, żeby nie zrobić literówki w weight! 


 p.informacja {font-weight:700;}

Pochylenie: font-style Bug w IE

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.

Transformacja tekstu: text-transform

Wartośći:

normal
zwykły
uppercase
duże litery
lowercase
małe litery
capitalize
zmiana tylko pierwszych liter w słowach na wielkie

Odstęp między literami: letter-spacing

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;}

Łebdwazerowy -3px

Klasyczny 3px

Odstęp między słowami: word-spacing

Zmienia odległość między słowami (szerokość spacji). Dozwolone są wartości ujemne. 

 p {word-spacing: 100%;}

Wysokość linii: line-height

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

Skrócony zapis: font

Wszystkie powyższe właściwości można połączyć razem wg schematu: 

 font: styl wariant grubość wielkość/wysokość-linii krój-pisma

Z czego można pominąć każdy element z wyjątkiem wielkości. 

 font: 700 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.

Tekst

Dekoracja tekstu: text-decoration

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

Położenie tekstu wewnątrz elementu blokowego: text-align

text-align wpływa wyłącznie na tekst. Nie wyrównuje całych elementów. Zobacz margin:auto.

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. 
 .uwaga {text-align:center;}

Położenie tekstu w linii tekstu: vertical-align

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 elementu 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. Zamieszczony tutaj opis jest uproszczony. Pełny znajdziesz w specyfikacji.

0%
wyrównuje linie bazowe, dzięki czemu zachowuje równą linię pisma, nawet gdy tekst ma mieszaną wysokość.
% lub długość
o ile (procent wysokości linii) ma być przesunięty element. Wartości dodatnie podnoszą, ujemne obniżają.

Jeśli działanie vertical-align nie jest widoczne, to spróbuj zwiększyć line-height.

Wcięcie akapitowe: text-indent

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: 100%;}

Cień za tekstem: text-shadow

Dodaje efektowny cień za tekstem. Nie potrzebujesz robić już osobnych gifów dla każdego nagłówka <h1> czy <h2>. Wszystkie nowe przeglądarki obsługują już tę właściwość.

kolor
Ustawia jaki ma być kolor cieni
przesunięcie poziome
Wartości dodatnie przesuwają w prawo; wartości ujemne w lewo
przesunięcie pionowe
Wartości dodatnie przesuwają w dół; wartości ujemne w górę
rozmycie
Stopień rozmycia 
 h1 {text-shadow:1px 1px 2px #333}

OHamburgerfonsz

Możesz stosować kilka różnych cieni na raz, wypisując następne po przecinku. 

 h2 {text-shadow: 0 0 4px white, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -25px 18px #f20; background:#000; font-size: 20px; padding: 40px 0 10px}

Pytania? Komentarze? Napisz na forum kursu lub edytuj tę stronę.

właściwości i wartości | box model
Zmodyfikowano: 31.08.2011, 09:07
submit