HTML

CSS

KOLOR TEKSTU

Definicja: Właściwość color służy do ustawienia koloru tekstu. Kolor określa: nazwa koloru - jak "czerwony", wartość HEX - jak "#ff0000", wartość RGB - jak "rgb(255,0,0)".

Paragraf: Kolor paragrafu o id="p1" ustawiony jest na niebieski.

Kod: #p1 {color: blue;}

WYRÓWNANIE TEKSTU

Definicja: Właściwość text-align służy do ustawienia poziomego wyrównania tekstu. Tekst może być wyrównany do lewej lub do prawej, wyśrodkowany lub wyjustowany.

Paragraf: Paragraf o id="p2" jest wyrównany do prawej.

Kod: #p2 {text-align: right;}

WYRÓWNAJ TEKST DO OSTATNIEGO

Definicja: Właściwość text-align-last określa sposób wyrównania ostatniego wiersza tekstu.

Paragraf: Ostatni wiersz paragrafu o id="p3" jest wyrównany do prawej; Ostatni wiersz paragrafu o id="p3" jest wyrównany do prawej; Ostatni wiersz paragrafu o id="p3" jest wyrównany do prawej.

Kod: #p3 {text-align-last: right;}

DODAJ LINIĘ DEKORACJI DO TEKSTU

Definicja: Właściwość text-decoration-line służy do dodawania linii dekoracji do tekstu.

Paragraf: Paragraf o id="p4" ma dekorację w postaci linii nad tekstem.

Kod: #p4 {text-decoration: overline;}

OKREŚL KOLOR DLA LINII DEKORACJI

Definicja: Właściwość text-decoration-color służy do ustawienia koloru linii dekoracji.

Paragraf: Paragraf o id="p5" ma dekorację w postaci zielonej linii przechodzącej przez tekst.

Kod: #p5 {text-decoration: line-through; text-decoration-color: green;}

OKREŚL STYL DLA LINII DEKORACJI

Definicja: Właściwość text-decoration-style służy do ustawienia stylu linii dekoracji.

Paragraf: Paragraf o id="p6" ma dekorację w postaci kropkowanej linii pod tekstem.

Kod: #p6 {text-decoration-line: underline; text-decoration-style: dotted;}

OKREŚL GRUBOŚĆ LINII DEKORACJI

Definicja: Właściwość text-decoration-thickness służy do ustawienia grubości linii dekoracji.

Paragraf: Paragraf o id="p7" ma dekorację w postaci linii pod tekstem o grubości 5px.

Kod: #p7 {text-decoration-line: underline; text-decoration-thickness: 5px;}

SKRÓT WŁASNOŚCI

Definicja: Właściwość text-decoration jest skróconą własnością dla: text-decoration-line (wymagany), text-decoration-color (opcjonalny), text-decoration-style (opcjonalny), text-decoration-thickness (opcjonalny).

Paragraf: Paragraf o id="p8" ma dekorację w postaci podwójnej czerwonej linii pod tekstem o grubości 5px.

Kod: #p8 {text-decoration: underline red double 5px;}

MAŁA WSKAZÓWKA

Wszystkie linki w HTML są domyślnie podkreślone. Czasami widzisz, że linki są stylizowane bez podkreślenia. Do usuwania podkreślenia z linków służy a {text-decoration: none;}.

TRANSFORMACJA TEKSTU

Definicja: Właściwość text-transform służy do określenia wielkich i małych liter w tekście. Może być używany do zamiany wszystkiego na wielkie lub małe litery lub do zmiany pierwszej litery każdego słowa na wielką.

Paragraf: Paragraf o id="p9" jest zmieniony na wielkie litery.

Kod: #p9 {text-transform: uppercase;}

CIEŃ TEKSTU

Definicja: Właściwość text-shadow dodaje cień do tekstu. W najprostszym użyciu określasz tylko cień poziomy (2px), cień pionowy (2px), kolor (czerwony) i efekt rozmycia (5px).

Paragraf: Paragraf o id="p10" ma czerwony cień poziomy i pionowy 2px o efekcie rozmycia 5px.

Kod: #p10 {text-shadow: 2px 2px 5px red;}

WCIĘCIE TEKSTU

Definicja: Właściwość text-indent służy do określenia wcięcia pierwszego wiersza tekstu.

Paragraf: Paragraf o id="p11" ma wcięcie pierwszego wiersza tekstu o wartości 100px; Paragraf o id="p11" ma wcięcie pierwszego wiersza tekstu o wartości 100px; Paragraf o id="p11" ma wcięcie pierwszego wiersza tekstu o wartości 100px.

Kod: #p11 {text-indent: 100px;}

ODSTĘPY MIĘDZY LITERAMI

Definicja: Właściwość letter-spacing służy do określenia odstępu między znakami w tekście.

Paragraf: Paragraf o id="p12" ma odstępy między literami o wartości -3px.

Kod: #p12 {letter-spacing: -3px;}

WYSOKOŚĆ LINII

Definicja: Właściwość line-height służy do określenia odstępu między liniami.

Paragraf: Paragraf o id="p13" ma odstępy między liniami o wartości 0.7;
Paragraf o id="p13" ma odstępy między liniami o wartości 0.7.

Kod: #p13 {line-height: 0.7;}

ODSTĘPY MIĘDZY WYRAZAMI

Definicja: Właściwość word-spacing służy do określenia odstępu między słowami w tekście.

Paragraf: Paragraf o id="p14" ma odstępy między wyrazami o wartości 15px.

Kod: #p14 {word-spacing: 15px;}