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 lewejright- wyrównanie do prawejcenter- wyrówanie do środkajustify- tekst wyjustowany
xxxxxxxxxx<html><head> <style> .text-center { text-align: center; } .text-right { text-align: right; } .text-justify { text-align: justify; } </style></head><body> <h1 class="text-center"> Przykład wyrównania tekstu w CSS </h1> <p class="text-right">Lipiec 2020</p> <p class="text-justify">Przykład długiego tekstu, który jest wyjustowany za pomocą arkusza stylów CSS. Jest on wyrównany zarówno do prawej jak i lewej krawędzi. Przykład długiego tekstu, który jest wyjustowany za pomocą arkusza stylów CSS. Jest on wyrównany zarówno do prawej jak i lewej krawędzi.</p></body></html>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ę tekstuoverline- rysuje linię nad tekstemline-through- rysuje linię przez środek tekstuunderline- rysuje linię pod tekstem
xxxxxxxxxx<html><head> <style> .text-overline { text-decoration: overline; } .text-line-through { text-decoration: line-through; } .text-underline { text-decoration: underline; } </style></head><body> <p class="text-overline">Tekst z linią nad</p> <p class="text-line-through">Tekst przekreślony</p> <p class="text-underline">Tekst podkreślony</p></body></html>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 wielkielower- wszystkie litery będą wyświetlane jako małecapitalize- każda pierwsza litera wyrazu będzie wielka, pozostałe będą małe
xxxxxxxxxx<html><head> <style> .text-upper { text-transform: upper; } .text-lower { text-transform: lower; } .text-capitalize { text-transform: capitalize; } </style></head><body> <p class="text-upper">Tekst wyświetlany jako duże litery</p> <p class="text-lower">Tekst wyświetlany jako małe litery</p> <p class="text-capitalize">Tekst wykorzystujący transformację "capitalize"</p></body></html>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.
xxxxxxxxxx<html><head> <style> p { text-indent: 50px; } </style></head><body> <p>To jest tekst który posiada właściwość text-indent ustawioną na 50 pikseli. Z tego powodu pierwsza linia tego paragrafu będzie wcięta. Kolejne linie już nie będą wcięte, ponieważ text-indent działa niejako jak wcięcia paragrafów w ksiązkach.</p></body></html>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.
xxxxxxxxxx<html><head> <style> p { letter-spacing: 3px; } </style></head><body> <p> Tekst ze zmienioną właściwością letter-spacing </p></body></html>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.
xxxxxxxxxx<html><head> <style> p { word-spacing: 50px; } </style></head><body> <p> Tekst ze zmienioną właściwością word-spacing </p></body></html>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.
xxxxxxxxxx<html><head> <style> p.small { line-height: 0.7; } p.big { line-height: 1.8; } </style></head><body> <p> Tekst z domyślnym odstępem linii. <br> Tekst z domyślnym odstępem linii. <br> </p> <p class="small"> Tekst ze zmniejszonym odstępem linii. <br> Tekst ze zmniejszonym odstępem linii. <br> </p> <p class="big"> Tekst ze zwiększonym odstępem linii. <br> Tekst ze zwiększonym odstępem linii. <br> </p></body></html>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.
xxxxxxxxxx<html><head> <style> h1 { text-shadow: 2px 2px 8px blue; } </style></head><body> <h1>Text-shadow effect!</h1></body></html>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