Archive for November, 2009

Transformacja tekstu [text-transform]

Wednesday, November 25th, 2009

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;
}