selektor { color: kolor }
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
selektor { text-decoration: dekoracja }
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
selektor { text-transform: transformacja }
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...
selektor { text-align: wyrównanie }
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...
selektor { text-indent: wcięcie }
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...
(interpretuje: Internet Explorer 10.0, Firefox 3.5, Opera 9.5, Chrome, Konqueror)
selektor { text-shadow: poziom pion rozmycie kolor,... }
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
selektor { line-height: odstęp }
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...
selektor { word-spacing: odstęp }
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
selektor { letter-spacing: odstęp }
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
selektor { white-space: sposób }
<br />
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 />
. Komenda działa podobnie jak <nobr>...</nobr>.
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: