CSS - Formatowanie tekstu

Tekst pojawia się na każdej stronie i z racji tego, jest jednym z najczęściej formatowanych elementów witryny. Kaskadowe arkusze stylów pozwalają na kontrolę sposobu wyświetlania tekstu, między innymi poprzez zmianę koloru, wyrównania, odstępów czy też na przykład jego dekoracji. Dzięki CSS każdy tekst może zostać wzbogacony i dopasowy do indywidualnych oczekiwań.

Zobacz:


Kolor czcionki - color

Koloru czcionki ustawiany jest za pomocą właściwości color.

color: kolor | initial | inherit;

Wartości właściwości color:

Wartość Opis
kolor Ustawia kolor obramowania (predefiniowany, szesnastkowy, rgb, itd.).
initial Ustawia wartość właściwości na domyślną.
Wartość domyślna zależy od przeglądarki.
inherit Wartość właściwości jest dziedziczona z elementu rodzica.

Przykład:

<p>W tym akapicie, <span>ten fragment tekstu ma zmieniony kolor na czerwony</span>. Kolor tekstu zmieniany jest za pomocą właściwości color.</p>
span {color: red;}

W tym akapicie, ten fragment tekstu ma zmieniony kolor na czerwony. Kolor tekstu zmieniany jest za pomocą właściwości color.


Wcięcie pierwszego wiersza bloku tekstu - text-indent

Wcięcie pierwszego wiersza bloku tekstu ustawiane jest za pomocą właściwości text-indent.

text-indent: rozmiar | procent | initial | inherit;

Wartości właściwości text-indent:

Wartość Opis
rozmiar Określa rozmiar wcięcia w jednostkach długości (px, pt, em, itd.). Na przykład 20px.
Domyślna wartość "0".
procent Określa rozmiar wcięcia w procentach rozmiaru elementu zawierającego tekst. Na przykład 5%.
initial Ustawia wartość właściwości na domyślną.
inherit Wartość właściwości jest dziedziczona z elementu rodzica.

Przykład:

<p>W tym akapicie wcięcie pierwszego wiersza tekstu zostało ustalone na 50 pikseli. Ponieważ selektorem w tym przypadku jest element p, wszystkie akapity będą posiadały takie samo wcięcie.</p>
p {text-indent: 50px;}

W tym akapicie wcięcie pierwszego wiersza tekstu zostało ustalone na 50 pikseli. Ponieważ selektorem w tym przypadku jest element p, wszystkie akapity będą posiadały takie samo wcięcie.


Wyrównanie tekstu - text-align

Sposób wyrównania tekstu ustawiany jest za pomocą właściwości text-align.

text-align: left | right | center | justify | initial | inherit;

Wartości właściwości text-align:

Wartość Opis
left Wyrównuje tekst do lewej.
Wartość domyślna dla wartości "ltr" właściwości direction.
right Wyrównuje tekst do prawej.
Wartość domyślna dla wartości "rtl" właściwości direction.
center Wyrównuje tekst do środka.
justify Justuje tekst.
initial Ustawia wartość właściwości na domyślną.
inherit Wartość właściwości jest dziedziczona z elementu rodzica.

Przykład:

<p>Ten akapit został wyjustowany za pomocą właściwości text-align. Justowanie oznacza, że tekst jest wyrównywany do obu stron, w celu nadania całości jednolitego, estetycznego wyglądu. Ostatni wiersz wyrównywany jest do strony określonej przez kierunek tekstu.</p>
p {text-align: justify;}

Ten akapit został wyjustowany za pomocą właściwości text-align. Justowanie oznacza, że tekst jest wyrównywany do obu stron, w celu nadania całości jednolitego, estetycznego wyglądu. Ostatni wiersz justowanego elementu wyrównywany jest do strony określonej przez kierunek tekstu.


Dekorowanie tekstu - text-decoration

Sposób dekorowania tekstu określany jest za pomocą właściwości text-decoration.

text-decoration: none | underline | overline | line-through | initial | inherit;

Wartości właściwości text-decoration:

Wartość Opis
none Tekst nie jest dekorowany.
Wartość domyślna.
underline Tekst podkreślony.
overline Tekst nadkreślony.
line-through Tekst przekreślony.
initial Ustawia wartość właściwości na domyślną.
inherit Wartość właściwości jest dziedziczona z elementu rodzica.

Przykład:

<p>Ten akapit jest podkreślony za pomocą wartości "underline" właściwości text-decoration.</p>
p {text-decoration: underline;}

Ten akapit jest podkreślony za pomocą wartości "underline" właściwości text-decoration.


Transformacja tekstu - text-transform

Transformację tekstu przeprowadza się za pomocą właściwości text-transform.

text-transform: none | capitalize | uppercase | lowercase | initial | inherit;

Wartości właściwości text-transform:

Wartość Opis
none Brak transformacji. Tekst pozostaje bez zmian.
Wartość domyślna.
capitalize Pierwsza litera każdego wyrazu jest wyświetlana dużą literą. Pozostałe znaki są bez zmian.
uppercase Wszystkie znaki wyświetlane są dużą literą.
lowercase Wszystkie znaki wyświetlane są małą literą.
initial Ustawia wartość właściwości na domyślną.
inherit Wartość właściwości jest dziedziczona z elementu rodzica.

Przykład:

<p class="capitalize">Ten akapit jest wyświetlany z kapitalikami.</p>
<p class="uppercase">W tym akapicie WSZYSTKIE litery są zamieniane na duże.</p>
<p class="lowercase">W tym akapicie WSZYSTKIE litery są zamieniane na małe.</p>
p.capitalize {text-transform: capitalize;}
p.uppercase {text-transform: uppercase;}
p.lowercase {text-transform: lowercase;}

Ten akapit jest wyświetlany z kapitalikami.

W tym akapicie WSZYSTKIE litery są zamieniane na duże.

W tym akapicie WSZYSTKIE litery są zamieniane na małe.


Odstęp pomiędzy znakami w tekście - letter-spacing

Odstęp pomiędzy znakami w tekście ustalany jest za pomocą właściwości letter-spacing.

letter-spacing: normal | rozmiar | initial | inherit;

Wartości właściwości letter-spacing:

Wartość Opis
normal Brak zmian w odstępach pomiędzy znakami.
Wartość domyślna.
rozmiar Rozmiar powiększenia lub zmniejszenia odstępu podawany jest w jednostkach długości (px, pt, em, itd.). Wartości ujemne zmniejszają odstęp.
initial Ustawia wartość właściwości na domyślną.
inherit Wartość właściwości jest dziedziczona z elementu rodzica.

Przykład:

<p>W tym kapicie jest standardowy odstęp pomiędzy znakami tekstu.</p>
<p class="dodatni">W tym akapicie odstęp pomiędzy znakami tekstu jest powiększony.</p>
<p class="ujemny">W tym akapicie odstęp pomiędzy znakami tekstu jest zmniejszony.</p>
p.dodatni {letter-spacing: 2px;}
p.ujemny {letter-spacing: -1px;}

W tym akapicie jest standardowy odstęp pomiędzy znakami tekstu.

W tym akapicie odstęp pomiędzy znakami tekstu jest powiększony.

W tym akapicie odstęp pomiędzy znakami tekstu jest zmniejszony.


Odstęp pomiędzy wyrazami w tekście - word-spacing

Odstęp pomiędzy wyrazami w tekście ustalany jest za pomocą właściwości word-spacing.

word-spacing: normal | rozmiar | initial | inherit;

Wartości właściwości word-spacing:

Wartość Opis
normal Brak zmian w odstępach pomiędzy wyrazami.
Wartość domyślna.
rozmiar Rozmiar powiększenia lub zmniejszenia odstępu podawany jest w jednostkach długości (px, pt, em, itd.). Wartości ujemne zmniejszają odstęp.
initial Ustawia wartość właściwości na domyślną.
inherit Wartość właściwości jest dziedziczona z elementu rodzica.

Przykład:

<p>W tym akapicie jest standardowy odstęp pomiędzy wyrazami.</p>
<p class="dodatni">W tym akapicie odstęp pomiędzy wyrazami jest powiększony.</p>
<p class="ujemny">W tym akapicie odstęp pomiędzy wyrazami jest zmniejszony.</p>
p.dodatni {word-spacing: 10px;}
p.ujemny {word-spacing: -3px;}

W tym akapicie jest standardowy odstęp pomiędzy wyrazami.

W tym akapicie odstęp pomiędzy wyrazami jest powiększony.

W tym akapicie odstęp pomiędzy wyrazami jest zmniejszony.


Kontrola białej przestrzeni w elemencie - white-space

Kontrola białej przestrzeni w elemencie możliwa jest za pomocą właściwości white-space.

white-space: normal | nowrap | pre | pre-line | pre-wrap | initial | inherit;

Wartości właściwości white-space:

Wartość Opis
normal Ciąg białych znaków zamieniany jest na jedną spację. Tekst jest zawijany.
Wartość domyślna.
nowrap Ciąg białych znaków zamianiany jest na jedną spację. Tekst nie jest zawijany do następnego wiersza automatycznie. Przełamanie wiersza wymusza dopiero element <br>.
pre Ciąg białych znaków pozostaje bez zmian. Linie są łamane tylko po przełamaniu wiersza.
pre-line Ciąg białych znaków zamieniany jest na jedną spację. Linia jest łamana po napotkaniu znaku nowego wiersza oraz automatycznie na końcu elementu.
pre-wrap Ciąg białych znaków pozostaje bez zmian. Linia jest łamana po napotkaniu znaku nowego wiersza oraz automatycznie na końcu elementu.
initial Ustawia wartość właściwości na domyślną.
inherit Wartość właściwości jest dziedziczona z elementu rodzica.

Przykład:

<p>Po zastosowaniu wartości      "nowrap"      właściwości white-space
 ciągi spacji są zamieniane na jedną spację. 
Linie nie są przełamywane automatycznie.<br>Przełamanie wymuszone jest dopiero przez element &lt;br&gt;.</p>
p {white-space: nowrap;}

Po zastosowaniu wartości "nowrap" właściwości white-space ciągi spacji są zamieniane na jedną spację. Linie nie są przełamywane automatycznie.
Przełamanie wymuszone jest dopiero przez element <br>.


Właściwości tekstu

Właściwość Opis CSS
letter-spacing Zmniejsza lub zwiększa odstępy pomiędzy znakami w tekście. 1
text-align Określa sposób wyrównania tekstu. 1
text-decoration Dekoruje tekst. 1
text-indent Określa rozmiar wcięcia pierwszego wiersza. 1
text-transform Kapitalizacja tekstu. 1
white-space Określa sposób obsługi białej przestrzeni w tekście. 1
word-spacing Zmniejsza lub zwiększa odstępy pomiędzy wyrazami w tekście. 1