Kolor tekstu można ustawić za pomocą koloru. Oczekiwana jest wartość koloru.
p {
color: red;
}Jako wartość można podać nazwy kolorów lub wartość szesnastkową koloru.
Ustalanie kierunku pisania
Za pomocą właściwości kierunek można wymusić kierunek pisania elementów. Interesujący jest przeciwny kierunek pisania w kontekście języków, w których pisze się od prawej do lewej.
Ponadto można określić, po której stronie przycinane będą nadmiarowe treści.
• ltr – od lewej do prawej
• rtl – od prawej do lewej
Poniższy przykład pokazuje, jak można użyć tej właściwości.
.normal {direction:ltr;}
.rueckwaerts {direction:rtl;}
Zostały tu zdefiniowane dwie klasy.
<p class="normal">Tekst pisany od lewej do prawej. 1 2 3 4 5 6 7 8 9 0</p> <p class="rueckwaerts">Tekst pisany od prawej do lewej. 1 2 3 4 5 6 7 8 9 0</p>
Rezultat wygląda w przeglądarce następująco:
Wyrównanie poziome tekstu
Za pomocą właściwości wyrównanie-tekstu ustalane jest poziome wyrównanie akapitów tekstu oraz innych elementów zawartych w elementach blokowych lub elementach inline. Domyślnie ustawione jest wyrównanie do lewej.
• left – wyrównanie do lewej
• right – wyrównanie do prawej
• center – wyśrodkowanie
• justify – wyrównanie do obu krawędzi
Przykład:
<p style="text-align:right;">
Serdecznie witamy
</p>
Wynik prezentuje się następująco:
Wyrównanie pionowe
Za pomocą właściwości wyrównanie-pionowe ustawiana jest pionowa wyrównanie tekstu w obrębie linii w kontekście wysokości linii. Podanie dotyczy zawsze elementu nadrzędnego, który musi być elementem inline. Dodatkowo można wyrównywać tekst wewnątrz tabel.
Dostępne są następujące wartości:
• sub – indeks dolny
• super – indeks górny
• baseline – wyrównanie do linii bazowej
• top – wyrównanie po górnej stronie elementu nadrzędnego
• bottom – wyrównanie po dolnej stronie elementu nadrzędnego
• middle – wyrównanie pomiędzy górną i dolną stroną elementu nadrzędnego
• text-top – wyrównanie po górnym brzegu tekstu
• text-bottom – wyrównanie po dolnym brzegu tekstu
• Wartość długościowa – dodatnia lub ujemna wartość przesuwa element nad lub pod linię bazową.
• Wartość procentowa – dodatnia lub ujemna wartość przesuwa element nad lub pod linię bazową.
Przykład:
.baseline {
vertical-align: baseline;
}
Należy pamiętać, że wartości wyrównania pionowego są interpretowane przez różne przeglądarki w nierówny sposób. Należy koniecznie przetestować wyniki przed umieszczeniem stron online.
Określenie dekoracji tekstu
dekoracja-tekstu służy do przypisywania dodatkowych właściwości tekstom lub hiperłączom.
• none – brak dekoracji tekstu
• underline – podkreślenie
• overline – przekreślenie
• line-through – przekreślenie
• blink – migotanie
Przykład:
a:link {
text-decoration: none;
}
Tym sposobem hiperłącza na stronie nie będą już podkreślone.
Odległość między poszczególnymi słowami można również jawnie określić.
<span style="word-spacing:0.5em">Witajcie na stronie PSD-Tutorials.de!</span><br /> <span style="word-spacing:1em">Witajcie na stronie PSD-Tutorials.de!</span>
Wartość powinna być liczbą. Nie są możliwe wartości procentowe.
Podobna do odstęp-międzysłów jest również odstęp-międzyliterowy. Jednakże za pomocą odstęp-międzyliterowy określa się odstęp między poszczególnymi literami tekstu. Tutaj również dozwolone są wartości liczbowe, ale nie procentowe.
<span style="letter-spacing:0.1em">Przykładowy tekst z odstępem znaków 0.1em</span><br> <span style="letter-spacing:0.3em">Przykładowy tekst z odstępem znaków 0.3em</span><br>
Za pomocą właściwości transformacja-tekstu można określić, czy tekst ma być pisany wielkimi czy małymi literami. Można również wymusić kapitaliki niezależnie od rzeczywistej notacji w tekście źródłowym.
• lowercase – małe litery
• uppercase – wielkie litery
• capitalize – początki słów jako wielkie litery
• none – brak transformacji tekstu
Przykład:
.mała {
text-transform: lowercase;
}W przeglądarce wynik wygląda następująco:
Spacje i łamane linie
Z właściwością white-space określa się, jak spacje i łamane linie w tekście źródłowym mają być wyświetlane w przeglądarce.
• normal – automatyczny podział wiersza. Dodatkowo, wiele spacji zostanie zastąpionych jedną.
• pre – łamane linie będą wyświetlane tak, jak w tekście źródłowym.
• nowrap – brak automatycznego podziału wiersza.
• pre-line – wiele spacji zostanie zastąpionych jedną. Dodatkowo nastąpi podział, jeśli pole do wyświetlania nie jest wystarczająco duże.
• pre-wrap – następuje podział, jeśli pole do wyświetlania nie jest wystarczająco duże.
Przykład:
<pre class="brush:xml;"><!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
body>p {
font-family:"Courier New", Courier, monospace;
font-size: 200%;
}
body p {
color:#0066FF;
}
</style>
</head>
<body>
<p>Absatz 1</p>
<p>Absatz 2</p>
<p>Absatz 3</p>
<div>
<p>Absatz 4</p>
</div>
</body>
</html></pre>W przeglądarce wygląda to tak:
Realizacja cienia
Za pomocą właściwości text-shadow można wymusić rzucanie cienia na teksty. Należy pamiętać, że ta właściwość jest obsługiwana tylko w stosunkowo nowoczesnych przeglądarkach. Przeglądarki, które nie potrafią interpretować text-shadow, pokażą czcionkę bez cienia.
Aby skorzystać z text-shadow, należy postępować w następujący sposób:
text-shadow: hV vV blur #xxxxxx;
A oto interpretacja wartości:
• hV – Przesunięcie w poziomie
• vV – Przesunięcie w pionie
• blur – Rozmycie
• #xxxxxx – Kolor cienia
Poniższy przykład pokazuje typowe zastosowanie text-shadow.
.cień {
color: #444;
font-size: 34px;
text-shadow: 2px 2px 3px #333;
}
Określona klasa zostanie zastosowana poniżej do nagłówka pierwszego stopnia.
<h1 class="cień">PSD-Tutorials.de</h1>
I także tutaj możemy zobaczyć wynik:
Jak już opisano, możecie śmiało używać text-shadow, ponieważ brak interpretacji przez przeglądarki nie ma negatywnego wpływu. Tekst zostanie po prostu wyświetlony bez cienia.
