Tekst

W tym rozdziale dowiesz się...

Kolor

selektor { color: kolor }
Selektorem może być dowolny znacznik, w którym można wpisywać tekst, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów].

Natomiast jako "kolor" należy podać definicję koloru.

Polecenie pozwala ustalić dowolny kolor tekstu.

Jeśli definiowane własności mają odnosić się do całej strony (np. kolor tekstu na całej stronie), można użyć selektora BODY lub HTML.

Przykład:

kolor red

kolor #66AAFF

kolor #69C

kolor rgb(255,33,170)

kolor rgb(25%,75%,75%)

kolor systemowy Highlight

Dekoracja

selektor { text-decoration: dekoracja }
Selektorem może być dowolny znacznik, w którym można wpisywać tekst, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów].

Natomiast jako "dekoracja" należy podać:
  • none - bez zmian
  • underline - podkreślenie
  • line-through - przekreślenie
  • overline - nadkreślenie
  • blink - migotanie tekstu (tylko Netscape/Mozilla/Firefox i Opera 7)

Polecenie umożliwia na wybór określonej dekoracji tekstu (np. podkreślenie). Migotanie może nie być interpretowane przez wszystkie przeglądarki!

Przykład:

dekoracja none

dekoracja underline

dekoracja line-through

dekoracja overline

dekoracja blink (tylko Netscape/Mozilla/Firefox i Opera 7)

Jeśli nie dysponujesz przeglądarką Netscape/Mozilla/Firefox lub Opera 7, to prawdopodobnie nie zobaczysz ostatniego efektu (migotanie tekstu).


Ciekawą możliwością może być łączenie powyższych wartości w jednej deklaracji, np.:

selektor { text-decoration: underline line-through overline }

Przykład:

Tekst podkreślony, przekreślony i nadkreślony

Transformacja

selektor { text-transform: transformacja }
Selektorem może być dowolny znacznik, w którym można wpisywać tekst, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów].

Natomiast jako "transformacja" należy podać:
  • none - bez zmian
  • capitalize - zamiana pierwszych liter wszystkich wyrazów na wielkie
  • uppercase - zamiana wszystkich liter na wielkie
  • lowercase - zamiana wszystkich liter na małe

Polecenie umożliwia na wybór określonej transformacji tekstu, czyli atrybutów dotyczących zmiany wielkości liter (wielkie/małe) w tekście.

Przykład:

To jest akapit z transformacją tekstu none... To jest akapit z transformacją tekstu none... To jest akapit z transformacją tekstu none...

To jest akapit z transformacją tekstu capitalize... To jest akapit z transformacją tekstu capitalize... To jest akapit z transformacją tekstu capitalize...

To jest akapit z transformacją tekstu uppercase... To jest akapit z transformacją tekstu uppercase... To jest akapit z transformacją tekstu uppercase...

To jest akapit z transformacją tekstu lowercase... To jest akapit z transformacją tekstu lowercase... To jest akapit z transformacją tekstu lowercase...

Wyrównanie

selektor { text-align: wyrównanie }
Selektorem może być dowolny znacznik wyświetlany w bloku, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów].

Natomiast jako "wyrównanie" należy podać:
  • left - wyrównanie tekstu do lewego marginesu (domyślnie)
  • right - wyrównanie do prawego marginesu
  • center - do środka (wyśrodkowanie)
  • justify - do obu marginesów jednocześnie (justowanie)

Polecenie pozwala wybrać jeden z możliwych sposobów wyrównania tekstu, czyli jego ułożenia na ekranie.

Przykład:

wyrównanie left (domyślnie)
wyrównanie left - do lewego marginesu
left

wyrównanie tekstu right
wyrównanie right - do prawego marginesu
right

wyrównanie center (wyśrodkowanie)
wyrównanie center - do środka
center

Wyrównanie tekstu justify - do obu marginesów jednocześnie... Wyrównanie tekstu justify - do obu marginesów jednocześnie... Wyrównanie tekstu justify - do obu marginesów jednocześnie... Wyrównanie tekstu justify - do obu marginesów jednocześnie... Wyrównanie tekstu justify - do obu marginesów jednocześnie... Wyrównanie tekstu justify - do obu marginesów jednocześnie... Wyrównanie tekstu justify - do obu marginesów jednocześnie... Wyrównanie tekstu justify - do obu marginesów jednocześnie...

Wcięcie

selektor { text-indent: wcięcie }
Selektorem może być każdy znacznik wyświetlany w bloku [zobacz: Wstawianie stylów].

Natomiast jako "wcięcie" należy podać konkretną wielkość wcięcia, używając jednostek długości.

Wcięcie w tekście oznacza dodatkowy odstęp pierwszej linijki w bloku od lewego marginesu (jak tabulator). Stosuje się je, gdy rozpoczynamy nowy akapit (na inny temat).

Przykład:

To jest akapit, w którego pierwszej linijce wcięcie wynosi 1cm... To jest akapit, w którego pierwszej linijce wcięcie wynosi 1cm... To jest akapit, w którego pierwszej linijce wcięcie wynosi 1cm...

Cień

(interpretuje: Internet Explorer 10.0, Firefox 3.5, Opera 9.5, Chrome, Konqueror)

selektor { text-shadow: poziom pion rozmycie kolor,... }
Wartości "poziom pion rozmycie kolor" określają własności cienia (wartości "rozmycie" oraz "kolor" nie są wymagane):
  • poziom - przesunięcie cienia w prawo (ujemne wartości przesuwają w lewo)
  • pion - przesunięcie cienia w dół (ujemne wartości przesuwają w górę)
  • rozmycie - promień efektu rozmycia (opcjonalnie)
  • kolor - kolor bazowy efektu (opcjonalnie - jeśli go nie podamy, przyjmie kolor taki, jak sam element)
Wartości "poziom", "pion" oraz "rozmycie" należy podać, używając jednostek długości.

Możliwe jest podanie więcej niż jednego efektu - wtedy kolejne efekty należy rozdzielić przecinkami. Zostaną one zastosowane w kolejności podawania.

Aby zupełnie usunąć ustalony wcześniej cień, należy podać text-shadow: none [Zobacz także: Wstawianie stylów]

Powyższe polecenie pozwala wprowadzić efekt cienia pod tekstem. Możliwe jest również podanie serii efektów, rozdzielonych przecinkami, które będą się nawzajem nakładały.

Wiele podobnych efektów tego typu, które są interpretowane przez Internet Explorer, znajdziesz na stronie: Filtry graficzne.

UWAGA! Polecenie wchodzi w skład CSS 2.0, ale nie CSS 2.1.

Przykład:

text-shadow: 0.2em 0.2em

text-shadow: 3px 3px 5px red

text-shadow: 3px 3px red, yellow -3px 3px 2px, 3px -3px

Odstęp między wierszami

selektor { line-height: odstęp }
Selektorem może być dowolny znacznik, w którym można wpisywać tekst, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów].

Natomiast jako "odstęp" należy podać konkretną wielkość odstępu między liniami bazowymi wierszy używając jednostek długości. Wpisanie "normal" przywróci wartość domyślną.

Polecenie to pozwala ustalić odstęp pomiędzy liniami bazowymi wszystkich wierszy w bloku. Dzięki temu linijki mogą być bardziej ścieśnione lub rozciągnięte.

Przykład:

To jest akapit, w którym odstępy między wierszami wynoszą 1cm... To jest akapit, w którym odstępy między wierszami wynoszą 1cm... To jest akapit, w którym odstępy między wierszami wynoszą 1cm...To jest akapit, w którym odstępy między wierszami wynoszą 1cm...To jest akapit, w którym odstępy między wierszami wynoszą 1cm...

Odstęp między wyrazami

selektor { word-spacing: odstęp }
Selektorem może być dowolny znacznik, w którym można wpisywać tekst, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów].

Natomiast jako "odstęp" należy podać konkretną wielkość odstępu między poszczególnymi wyrazami używając jednostek długości. Wpisanie "normal" przywróci wartość domyślną.

Polecenie to pozwala ustalić odstęp pomiędzy wszystkimi poszczególnymi wyrazami w bloku. Dzięki temu wyrazy w linijkach mogą być bardziej ścieśnione lub rozciągnięte.

UWAGA! Polecenie nie jest interpretowane przez MSIE 5, natomiast w MSIE 6 wszystko jest w porządku.

Przykład:

To jest akapit, w którym odstępy między wyrazami wynoszą 1cm

Odstęp między literami

selektor { letter-spacing: odstęp }
Selektorem może być dowolny znacznik, w którym można wpisywać tekst, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów].

Natomiast jako "odstęp" należy podać konkretną wielkość odstępu między poszczególnymi literami używając jednostek długości. Wpisanie "normal" przywróci wartość domyślną.

Polecenie to pozwala ustalić odstęp pomiędzy wszystkimi poszczególnymi literami w wyrazach bloku. Dzięki temu cały tekst w linijce może być bardziej ścieśniony lub rozciągnięty.

Przykład:

To jest akapit, w którym odstępy między literami wynoszą 3mm

Białe znaki

selektor { white-space: sposób }
Selektorem może być każdy znacznik wyświetlany w bloku [zobacz: Wstawianie stylów].

Natomiast jako "sposób" należy podać:
  • normal - zamiana kilku sąsiadujących ze sobą spacji na jedną; wiersze są przełamywane automatycznie na końcu szerokości strony (domyślnie)
  • pre - umożliwia wyświetlenie wielu spacji obok siebie; wiersze są przełamywane po napotkaniu znaku nowej linii - klawisz Enter (tekst preformatowany)
  • nowrap - tryb identyczny jak "normal" z tym, że nie pozwala na przełamanie wiersza (przejście do następnej linii), aż do napotkania znacznika <br>
  • pre-wrap - (CSS 2.1) pozwala wyświetlić kilka sąsiadujących spacji; wiersze są przełamywane po napotkaniu znaku nowej linii - klawisz Enter - oraz automatycznie na końcu szerokości strony (Opera 7.5, Firefox 3, Chrome, Konqueror)
  • pre-line - (CSS 2.1) jak wyżej z tym, że sąsiadujące spacje są zamieniane na jedną

Polecenie pozwala sterować wyświetlaniem spacji na ekranie. Domyślnie nie jest możliwe postawienie obok siebie kilku spacji, ponieważ zostaną one automatycznie zamienione na jedną. Nie można również postawić spacji na początku wiersza. Dzięki użyciu komendy white-space: pre, możemy pozbyć się tych niedogodności. Polecenie działa podobnie jak znacznik <pre>...</pre>, lecz tekst jest napisany zwykłą czcionką.

Ponadto deklaracja white-space: nowrap uniemożliwia przeglądarce przełamanie wiersza i przejście do następnej linii. Stosuje się je, gdy koniecznie zależy nam, aby podany tekst, był wpisany w jednej linijce. Jeśli nie zmieści się on na ekranie, pojawi się suwak do przewijania zawartości strony. Wiersz taki możemy przełamać tylko poprzez zastosowanie znacznika <br>.

UWAGA! Żadne z tych poleceń nie jest interpretowane przez MSIE 5. Natomiast MSIE 6 obsługuje nowrap, a w trybie zgodności ze standardami także pre. W MSIE 8.0 wszystko jest w porządku, ale tylko w trybie Standards Compliance.

Przykład:

Przykład