Transformacja tekstu [text-transform]
Właściwość text-transform kontroluje wielkość liter tekstu. Możesz wybrać wartość: capitalize, użyj uppercase lub lowercase zależnie od tego jak oryginalny tekst jest umieszczony w kodzie HTML.
Przykładem może byś słowo “nagłówek” które może zostać przedstawione użytkownikowi jako “NAGŁÓWEK” lub “Nagłówek”. Istnieją cztery możliwe wartości właściwości text-transform:
- capitalize
- Zamienia na dużą literę wszystkie pierwsze litery w wyrazach. Na przykład: “john doe” stanie się “John Doe”.
- uppercase
- Konwertuje wszystkie litery na duże. Na przykład: “john doe”stanie się”JOHN DOE”.
- lowercase
- Konwertuje wszystkie litery na małe. Na przykład: “JOHN DOE”stanie się”john doe”.
- none
- Bez transformacji – tekst jest prezentowany tak jak został on umieszczony w kodzie HTML.
Jako przykład, użyjemy listy nazwisk. Nazwiska oznaczone są znacznikiem <li> (list-item). Powiedzmy że chcemy aby nazwiska i imiona zapisane były z pierwszej dużej litery a nagłówki zaprezentować całe tylko dużymi literami.
Popatrz na kod HTML dla tego przykładu i zobaczysz że tekst jest cały umieszczony małą literą.
h1 {
text-transform: uppercase;
}
li {
text-transform: capitalize;
}