Lekcja 5: Tekst

Formatowanie i dodawanie stylu do tekstu jest główną sprawą jaką musi opanować projektant stron internetowych. W tej lekcji zostaniesz wprowadzony w zadziwiające możliwości jakie daje ci CSS gdy chcesz dodać układ graficzny do tekstu. Opiszemy następujące właściwości:

text-indent
text-align
text-decoration
letter-spacing
text-transform

Wcięcie tekstu [text-indent]

Właściwość text-indent pozwala dodać elegancję do akapitów poprzez określenie wcięć dla pierwszej linii akapitu. W poniższym przykładzie zastosowaliśmy wcięcie 30px dla wszystkich akapitów oznaczonych znacznikiem <p>:


p {
	text-indent: 30px;
}

Pokaż przykład

Ułożenie tekstu [text-align]

Właściwość CSS text-align odpowiada za atrybut align używany w starej wersji języka HTML. Tekst może układać się albo na lewo (wartość left), prawo (wartość right) lub też centralnie (wartość center). Dodatkowo, wartość justify właściwości rozciągnie każdą linijkę tekstu tak by lewy i prawy margines dla każdej linii był równy. Znasz ten układ na przykładzie gazet i magazynów.

W poniższym przykładzie tekst w nagłówku tabeli <th> jest ułożony do prawej strony podczas gdy dane tabeli <td> są centrowane. Dodatkowo, normalne akapity tekstowe są justowane:


th {
	text-align: right;
}

td {
	text-align: center;
}

p {
	text-align: justify;
}

Pokaż przykład

Dekoracja tekstu [text-decoration]

Właściwość text-decoration umożliwia dodanie róznej "dekoracji" lub "efektów" do tekstu. Na przykład, możesz podkreślić teskst, umieścić linię przez lub nad tekstem, itd. W kolejnym przykładzie, <h1> są podkreślonymi nagłówkami, <h2> są nagłowkami z linią nad tekstem a <h3> są nagłowkami z linią przechodzącą przez tekst.


h1 {
	text-decoration: underline;
}

h2 {
	text-decoration: overline;
}

h3 {
	text-decoration: line-through;
}

Pokaż przykład

Odstęp literowy [letter-spacing]

Odstęp między literami tekstu można określić używając właściwości letter-spacing. Wartość właściwości jest po prostu porządaną szerokością. Na przykład, jeżeli chcesz umieścić odstęp 3px między literami w akapicie <p> oraz 6px pomiędzy literami w nagłówku <h1> możesz wykorzystać poniższy kod.


h1 {
	letter-spacing: 6px;
}

p {
	letter-spacing: 3px;
}

Pokaż przykład

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

Podsumowanie

W ostatnich trzech lekcjach nauczyłeś się już wielu właściwości CSS, ale jest jeszcze dużo w CSS do opanowania. W następnej lekcji popatrzymy bliżej na odnośniki.