Warna teks dapat diatur dengan menggunakan color. Nilai yang diharapkan adalah nilai warna.
p {
color: red;
}Sebagai nilai, Anda dapat menentukan nama warna atau nilai warna heksadesimal.
Menetapkan Arah Penulisan
Dengan menggunakan properti direction, arah penulisan pada elemen dapat dipaksa. Hal ini menarik terutama dalam konteks pengaturan arah penulisan terbalik untuk bahasa-bahasa yang ditulis dari kanan ke kiri.
Selain itu, ini juga dapat menentukan sisi mana konten berlebih yang akan dipotong dengan overflow.
• ltr – dari kiri ke kanan
• rlt – dari kanan ke kiri
Contoh berikut menunjukkan cara menggunakan properti tersebut.
.normal {direction:ltr;}
.rueckwaerts {direction:rtl;}
Di sini dua kelas telah didefinisikan.
<p class="normal">Teks yang ditulis dari kiri ke kanan. 1 2 3 4 5 6 7 8 9 0</p> <p class="rueckwaerts">Teks yang ditulis dari kanan ke kiri. 1 2 3 4 5 6 7 8 9 0</p>
Hasilnya terlihat di browser sebagai berikut:
Penyelarasan Horizontal Teks
Dengan menggunakan properti text-align, penyelarasan horizontal paragraf teks dan teks mengambang dalam elemen blok ditetapkan. Pengaturan standarnya sebenarnya adalah penyelarasan kiri.
• left – penyelarasan kiri
• right – penyelarasan kanan
• center – tersentuh
• justify – teratur
Sebagai contoh:
<p style="text-align:right;">
Selamat datang
</p>
Hasilnya menjadi seperti ini:
Penyelarasan Vertikal
Dengan menggunakan properti vertical-align, penyelarasan teks vertikal dalam baris terhadap ketinggian baris ditentukan. Penyebutan ini selalu merujuk pada elemen tertentu yang harus bersifat inline. Selain itu, teks dalam tabel dapat diselaraskan.
Nilai-nilai berikut tersedia:
• sub – subskrip
• super – superskrip
• baseline – diselaraskan dengan garis dasar
• top – diselaraskan dengan tepi atas elemen induk
• bottom – diselaraskan dengan tepi bawah elemen induk
• middle – diselaraskan tengah antara tepi atas dan bawah elemen induk
• text-top – di atas tepi teks
• text-bottom – di bawah tepi teks
• Angka panjang – nilai positif atau negatif menggeser elemen di atas atau di bawah garis dasar.
• Persentase – nilai positif atau negatif menggeser elemen di atas atau di bawah garis dasar.
Sebagai contoh:
.baseline {
vertical-align: baseline;
}
Perhatikan bahwa nilai dari vertical-align diinterpretasikan dengan sangat tidak merata oleh berbagai browser. Sebaiknya Anda menguji hasilnya sebelum mempublikasikan halaman.
Menentukan Dekorasi Teks
text-decoration digunakan untuk memberikan sifat tambahan pada teks atau hyperlink.
• none – tanpa dekorasi teks
• underline – digarisbawahi
• overline – di atas garis
• line-through – digarisbawahi
• blink – berkedip
Juga terdapat contoh sebagai berikut:
a:link {
text-decoration: none;
}
Dengan demikian, hyperlink halaman tidak lagi dilengkapi dengan garis bawah.
Jarak antara setiap kata juga dapat ditetapkan secara eksplisit.
<span style="word-spacing:0.5em">Selamat datang di PSD-Tutorials.de!</span><br /> <span style="word-spacing:1em"> Selamat datang di PSD-Tutorials.de!</span>
Nilai numerik diharapkan. Namun, pemberian persentase tidak mungkin.
Serupa dengan word-spacing, juga terdapat letter-spacing. Namun, melalui letter-spacing, Anda mengatur jarak antara setiap huruf dalam suatu teks. Di sini juga nilai numerik, tetapi tidak ada persentase yang diperbolehkan.
<span style="letter-spacing:0.1em">Teks contoh dengan jarak karakter 0.1em</span><br> <span style="letter-spacing:0.3em">Teks contoh dengan jarak karakter 0.3em</span><br>
Dengan menggunakan properti text-transform, Anda dapat menentukan apakah teks akan ditulis dalam huruf besar atau kecil. Dan ini tidak tergantung pada notasi sebenarnya dalam teks sumber. Selain itu, kapitalisasi dapat dipaksakan.
• lowercase – huruf kecil
• uppercase – huruf besar
• capitalize – Awal kata dalam huruf besar
• none – tidak ada transformasi teks
Contoh:
.kecil {
text-transform: lowercase;
}Di browser, hasilnya akan terlihat seperti ini:
Ruangan dan Pemecahan Baris
Dengan properti white-space, ditentukan bagaimana spasi dan pemecahan baris yang ada di sumber teks akan ditampilkan di browser.
• normal – pemecahan baris otomatis ditambahkan. Selain itu, beberapa spasi digabungkan menjadi satu.
• pre – pemecahan baris ditampilkan sebagaimana adanya dalam sumber teks.
• nowrap – tidak ada pemecahan baris otomatis yang dilakukan.
• pre-line – beberapa spasi digabungkan menjadi satu. Selain itu, pemecahan baris dilakukan jika kotak tampilan tidak cukup besar.
• pre-wrap – pemecahan baris dilakukan jika kotak tampilan tidak cukup besar.
Ini adalah contoh penggunaannya:
<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>Di browser, tampilannya akan seperti ini:
Implementasi Bayangan
Dengan menggunakan properti text-shadow, kita dapat menyematkan bayangan untuk teks. Perhatikan bahwa properti ini hanya didukung oleh browser yang relatif baru. Browser yang tidak dapat menginterpretasikan text-shadow akan menampilkan teks tanpa bayangan.text-shadow digunakan sebagai berikut:
text-shadow: hV vV blur #xxxxxx;
Dan ini adalah arti dari nilai-nilai tersebut:
• hV – Pergeseran Horizontal
• vV – Pergeseran Vertikal
• blur – Kabur
• #xxxxxx – Warna Bayangan
Contoh berikut menunjukkan penggunaan yang umum dari text-shadow.
.bayangan {
color: #444;
font-size: 34px;
text-shadow: 2px 2px 3px #333;
}
Kelas yang telah didefinisikan di atas akan diterapkan pada judul tingkat pertama berikutnya.
<h1 class="bayangan">PSD-Tutorials.de</h1>
Dan ini adalah tampilan hasilnya:
Seperti yang telah dijelaskan sebelumnya, Anda dapat menggunakan text-shadow tanpa masalah, karena jika tidak diinterpretasikan oleh browser, tidak akan memiliki dampak negatif. Teks akan ditampilkan tanpa bayangan.
