Jednym z kluczowych aspektów CSS jest formatowanie tekstu – text CSS, które pozwala na kontrolowanie różnych właściwości tekstu, takich jak wyrównanie, wcięcie, dekoracja teksu i wiele innych. W tym artykule przedstawię podstawowe i zaawansowane techniki formatowania tekstu w CSS. Sprawdź również poprzednią lekcję, w której omawiam właściwości fontu w CSS.
W lekcji dotyczącej tekstu nauczysz się jak go formatować:
- text-align – wyrównanie tekstu
- text-indent – wcięcie tekstu
- text-transform – przekształcanie tekstu
- text-decoration – dekoracja tekstu
- text-shadow – cień tekstu
- color – kolor fontu
- Przykłady zastosowania formatowania tekstu
Text-align – wyrównanie tekstu
Właściwość text-align kontroluje wyrównanie tekstu w poziomie.
selektor { text-align: wartość; }Wartości:
left: Wyrównanie do lewej.right: Wyrównanie do prawej.center: Wyśrodkowanie.justify: Wyjustowanie (wyrównanie do lewej i prawej).
p { text-align: right; }Przykład
Tekst wyrównany do prawej.
Text-indent – wcięcie tekstu
Właściwość text-indent kontroluje wcięcie pierwszego wiersza tekstu.
selektor { text-indent: wartość; }p { text-indent: 30px; }Przykład
W tym akapicie pierwszy wiersz ma wcięcie ustawione na 30px. Dodanie właściwości text-indent sprawia, że łatwiej odszukać poszczególne akapity.
Text-transform – przekształcanie tekstu
Właściwość text-transform dokonuje przekształcenia tekstu i pozwala na zmianę wszystkich liter w tekście na wielkie litery, małe litery lub kapitaliki.
selektor { text-transform: wartość; }Wartości text-transform:
none– Domyślna wartość. Tekst wyświetlany bez żadnych zmian.capitalize– Każde pierwsze słowo w zdaniu jest zapisywane wielką literą.uppercase– Wszystkie litery w tekście zamieniane na wielkie litery.lowercase– Wszystkie litery w tekście zamieniane na małe litery.
p { text-transform: uppercase; }Przykład
W tym zdaniu małe litery w tekście są zamienione na wielkie litery.
Text-decoration – dekoracja tekstu
Właściwość text-decoration – dekoracja tekstu pozwala na dodanie efektów takich jak podkreślenie, linia nad tekstem, linia przez tekst, lub ich usunięcie.
selektor { text-decoration: wartość; }none– Usuwa wszystkie dekoracje tekstu. Domyślna wartość.underline– Podkreśla tekst, dodając linię pod nim.overline– Dodaje linię nad tekstem.line-through– Przekreśla tekst, dodając linię przez środek.
p { text-decoration: underline; }Przykład
Zdanie podkreślone.
Text-shadow – cień tekstu
Właściwość text-shadow w CSS pozwala na dodawanie cieni do tekstu
selector { text-shadow: offset-x offset-y blur-radius color; }offset-x– Przesunięcie cienia w poziomie. Może być dodatnie (cień w prawo) lub ujemne (cień w lewo).offset-y– Przesunięcie cienia w pionie. Może być dodatnie (cień w dół) lub ujemne (cień w górę).blur-radius(opcjonalne) – Promień rozmycia cienia. Im większa wartość, tym bardziej rozmyty cień. Domyślnie wynosi 0 (brak rozmycia).color(opcjonalne) – Kolor cienia. Jeśli nie zostanie podany, cień będzie domyślnie czarny.
p { text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5); }Przykład
Zdanie z zastosowaniem cienia.
Color – kolor fontu
Właściwość color nadaje kolor dla fontu.
selektor { color: wartość; }p { color: green; }Przykład
Tekst koloru zielonego
Wykaz podstawowych kolorów
- black (czarny)
- white (biały)
- red (czerwony)
- blue (niebieski)
- green (zielony)
- silver (srebrny)
- gray (szary)
- yellow (żółty)
- purple (purpurowy)
- maroon (kasztanowy)
- olive (oliwkowy)
- lime (limonkowy)
- aqua (morski)
- teal (teal)
- navy (granatowy)
Przykłady zastosowania formatowania tekstu
Paragrafy
p {
text-transform: uppercase;
text-align: justify;
text-shadow: 2px 8px 5px rgba(0, 0, 0, 0.25);
}Linki
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}Text CSS – podsumowanie
Z pewnością formatowanie tekstu w CSS jest istotnym elementem tworzenia estetycznych i czytelnych stron internetowych. Dlatego znajomość podstawowych i zaawansowanych właściwości pozwala na pełną kontrolę nad wyglądem tekstu, co jest niezbędne w projektowaniu nowoczesnych i czytelnych witryn. Pamiętaj też, że CSS to język stylizacji, który stale się rozwija. Regularne śledzenie nowości i aktualizacji pozwoli Ci na korzystanie z najnowszych możliwości oferowanych przez CSS i tworzenie stron, które będą nie tylko funkcjonalne, ale i atrakcyjne wizualnie.
Przypominam także o poprzedniej lekcji, w której omawiam właściwości fontu w CSS.