Tekst / czcionka kurs CSS 3

Z pomocą CSS, w łatwy sposób nadasz unikalny styl do tekstu. W poniższej lekcji dowiesz się jak:

• ustawić wyrównanie tekstu text-align
• zmienić color czcionki color
• zmienić kolor tła background-color
• dodać dekorację text-decoration

Wyrównanie tekstu text align

css justify css text justify css text center

Wyrównanie tekstu w CSS, możemy osiągnąć za pomocą właściwości text-align. Może ona przyjmować wartości

• left - wyrównanie do lewej
• right - wyrównanie do prawej
• center - wyrówanie do środka
• justify - tekst wyjustowany

Dekorowanie tekstu text decoration

text decoration css text decoration

Do dekorowania tekstu w CSS, służy właściwość text-decoration. Może przyjmować ona wartości:

• none - usuwa dekorację tekstu
• overline - rysuje linię nad tekstem
• line-through - rysuje linię przez środek tekstu
• underline - rysuje linię pod tekstem

Wielkość liter text transform

css text upper css text lower css capital letters

W arkuszach stylów CSS możemy zmienić wilkość liter, za pomocą właściwości text-transform.

text-transform - może przyjmować następujące wartości:

• upper - wszystkie litery będą wyświetlane jako wielkie
• lower - wszystkie litery będą wyświetlane jako małe
• capitalize - każda pierwsza litera wyrazu będzie wielka, pozostałe będą małe

Odstępy tekstu

Do sterowania odstępami w tekście służy kilka właściwości. Poniżej omówimy właściwości text-indent, letter-spacing, word-spacing oraz line-height

Wcięcia text indent

Wcięcia tekstu w CSS ustawiamy za pomocą text-indent. Wartość ta może zostać podana w pikselach lub innych jednostkach.

Odstęp między literami letter spacing

W CSS można również zmieniać domyślny odstęp między literami. Do tego celu służy właściwość letter-spacing. Wartość ta może być podana w pikselach lub innych jednostkach. Ponadto wartość ta może być zarówno dodatnia, jak i ujemna.

Odstęp między słowami word spacing

Do zmiany odległości między słowami, służy właściwość word-spacing. Działa ona analogicznie do letter-spacing, jednak steruje przestrzenią między wyrazami.

Wysokość lini line height

Wysokość lini może być sterowana za pomocą line-height. Należy zwrócić uwage, że wartość nie przyjmuje żadnej jednostki.

Cień text shadow

css text shadow

W CSS, do tekstu można również dodać efekt cienia. Do tego celu służy komenda text-shadow. Jej parametry to kolejno:

• Przesunięcie poziome
• Przesunięcie pionowe
• Poziom rozmycia
• Kolor cienia

Warto dodać, ze nie ma konieczności podawania wszystkich arkumentów - możesz podać np. tylko 2, wtedy tylko usawisz przesunięcie poziome i pionowe.

Kolor tekstu i tła

css font color css color text css text background

Kolor tekstu można zmieniać za pomocą właściwości color. Do zmiany koloru tła służy właściwość background-color. Ten temat jest był szerzej omawiany w lekcji Kolor tekstu i tła w CSS