Formatowanie tekstu
|
Styl CSS |
Dopuszczalne wartości |
Opis |
|---|---|---|
|
color: red |
Każde określenie koloru |
Kolor tekstu |
|
text-align: center text-align: right |
left | right | center | justify | initial | inherit |
Poziome rozmieszczenie tekstu |
|
text-decoration:none text-decoration:overline |
none | underline | overline| line-through | initial | inherit |
Określa w jakiś sposób tekst będzie upiększony |
|
text-transform: uppercase text-transform: capitalize |
none | capitalize | uppercase | lowercase | initial | inherit |
Określa czy litery będą w jakiś sposób zmienione np.: czy wszystkie będą wielkie |
|
text-indent: 20px text-indent: 1em |
przyjmuje wartości liczbowe w jednostkach CSS, wartości procentowe oraz initial | inherit |
Wcięcie w pierwszej linijce bloku tekstu |
|
letter-spacing: 2px letter-spacing: -2px |
przyjmuje wartości liczbowe w jednostkach CSS, oraz normal | initial | inherit |
Odległość pomiędzy literami. Dopuszczalne są wartości ujemne. |
|
line-height: 0.8 line-height: 20px |
normal liczba (wielokrotność wysokości tesktu długość (stała szerokość np. w pikselach % (wartość podana w procentach w stosunku do wysokości tekstu) initial inherit |
Określa wysokość linii tekstu. Nie mylić z wysokością tekstu. |
|
direction: rtl direction: ltr |
ltr (domyślne) | rtl | initial | inherit |
Określa kierunek pisania tekstu – z lewej na prawą czy z prawej na lewą. |
|
word-spacing: 10px word-spacing: -5px |
normal | długość (w jednostkach CSS) | initial | inherit |
Określa odległość pomiędzy wyrazami w tekście. Dopuszczalne wartości minusowe. |
|
text-shadow: 3px 2px red |
text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit; |
Określa cień tekstu. Pierwsze dwa parametry są wymagane. |
|
text-overflow: ellipsis |
clip | ellipsis | string | initial | inherit |
Określa w jak się zachowa tekst jeżeli „braknie” mu miejsca na pełne wyświetlenie |
|
unicode-bidi: normal direction:rtl; |
normal | embed | bidi-override | initial | inherit |
Stosowane wyłącznie z direction:rtl. Różne sposoby wyświetlania tekstu |
|
vertical-align: text-top |
baseline | length | % | sub | super | top | text-top | middle | bottom | text-bottom | initial | inherit |
Określa pozycję pionową tekstu względem innych elementów |
|
white-space: normal |
normal | nowrap | pre | pre-line | pre-wrap | initial | inherit |
Sposób prezentacji białych znaków w tekście |
Czcionka
Są 3 główne typy czcionek:
- serif – czcionka szeryfowa,
- sans-serif – czcionka bezszeryfowa, łatwiejsza w czytaniu,
- monospace – czcionka o stałej szerokości znaku.
Występują jeszcze czcionki tzw pismo odręczne i czcionki specjalne – np. z gier, filmów.
Style określające czcionkę:
- font-family – rodzina czcionek. Możemy tutaj podać konkretną nazwę czcionki lub główny typ czcionki np.: font-family: "Times New Roman", Times, serif.
W tym przykładzie przeglądarka będzie szukała w zainstalowanych czcionkach w systemie najpierw czcionki Times New Roman, jak jej nie znajdzie poszuka Times, a jak jej również nie będzie to tekst wyświetli wbudowaną czcionką szeryfową. Może się zdarzyć, że użyjecie czcionki, którą to macie zainstalowaną na komputerze, a wasza strona będzie się pięknie prezentowała – ale tylko u Was i u osób, które również będą taką czcionkę zainstalowaną w systemie. Żeby temu zaradzić to należy używać czcionek wbudowanych, użyć Google Fonts lub zaimportować taką czcionkę na stronę internetową. Należy przy tym pamiętać, że czcionki również obejmuje prawo autorskie. - font-style – określa styl czcionki. Wartości: normal | italic | oblique
- font-size – określa wysokość czcionki. Podaje się ją w jednostkach CSS
- font-weight – określa grubość czcionki. Wartości: normal | bold | bolder | lighter | initial | inherit | 100 | 200 | 300 | 400 (normal) | 500 | 600 | 700 (bold) | 800 | 900
- font-variant – określa w jaki sposób będzie wyświetlony tekst. Wartości: normal | small-caps | initial | inherit
Krótka składnia font:
font: font-style font-variant font-weight font-size/line-height font-family|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit;
Przykładowe wywołanie:
font: bold 18px/24px Arial, sans-serif