format teks
Teks ini ditata dengan beberapa properti format teks. Judul menggunakan text-align, text-transform , dan color properti. paragraf menjorok, selaras, dan ruang antara karakter ditentukan. Menggarisbawahi akan dihapus dari berwarna ini "Cobalah Sendiri" Link.
Warna teks
The color properti digunakan untuk mengatur warna teks.
Dengan CSS, warna yang paling sering ditentukan oleh:
- nama warna - seperti "red"
- nilai HEX - seperti "#ff0000"
- nilai RGB - seperti "rgb(255,0,0)"
Lihatlah CSS Nilai Warna untuk daftar lengkap dari kemungkinan nilai warna.
Warna teks default untuk halaman didefinisikan dalam pemilih tubuh.
 | Catatan: Untuk W3C compliant CSS: Jika Anda menentukan color properti, Anda juga harus menentukan background-color properti. |
|---|
teks Keselarasan
The text-align properti digunakan untuk mengatur alignment horizontal teks.
Sebuah teks dapat kiri atau kanan sejajar, berpusat, atau dibenarkan.
Contoh berikut menunjukkan pusat sejajar, dan kiri dan kanan teks selaras (perataan kiri adalah default jika arah teks kiri-ke-kanan, dan keselarasan yang tepat adalah default jika arah teks kanan-ke-kiri):
Ketika text-align properti diatur ke "justify" , setiap baris meregang sehingga setiap baris memiliki lebar yang sama, dan kiri dan kanan margin lurus (seperti di majalah dan koran):
Dekorasi teks
The text-decoration properti digunakan untuk mengatur atau menghapus dekorasi dari teks.
Nilai text-decoration: none; sering digunakan untuk menghilangkan garis bawah dari link:
Yang lain text-decoration nilai-nilai yang digunakan untuk menghias teks:
Contoh
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
} Cobalah sendiri " | Catatan: Hal ini tidak dianjurkan untuk menggarisbawahi teks yang tidak link, karena ini sering membingungkan pembaca. |
|---|
Transformasi teks
The text-transform properti digunakan untuk menentukan huruf besar dan huruf kecil dalam teks.
Hal ini dapat digunakan untuk mengubah segalanya menjadi huruf besar atau kecil, atau memanfaatkan huruf pertama dari setiap kata:
Contoh
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
} Cobalah sendiri " teks Indentasi
The text-indent properti digunakan untuk menentukan indentasi dari baris pertama dari teks:
surat Spasi
The letter-spacing properti digunakan untuk menentukan ruang antara karakter dalam teks.
Contoh berikut menunjukkan bagaimana untuk menambah atau mengurangi ruang antara karakter:
Tinggi garis
The line-height properti digunakan untuk menentukan ruang antara garis:
Arah teks
The direction properti digunakan untuk mengubah arah teks elemen:
kata Spasi
The word-spacing properti digunakan untuk menentukan ruang antara kata-kata dalam sebuah teks.
Contoh berikut menunjukkan bagaimana untuk menambah atau mengurangi ruang antara kata-kata:
Contoh lebih
Menonaktifkan membungkus teks dalam sebuah elemen
Contoh ini menunjukkan bagaimana untuk menonaktifkan membungkus teks dalam sebuah elemen.
Keselarasan vertikal dari suatu gambar
Contoh ini menunjukkan bagaimana untuk mengatur menyelaraskan vertikal gambar dalam teks.
Tambahkan bayangan untuk teks
Contoh ini menunjukkan bagaimana untuk menambahkan bayangan untuk teks.
Uji Diri dengan Latihan!
Latihan 1 » Latihan 2» Latihan 3 » Latihan 4» Latihan 5 »
Semua Properti CSS Text
| Milik | Deskripsi |
|---|---|
| color | Mengatur warna teks |
| direction | Menentukan arah teks / arah menulis |
| letter-spacing | Meningkat atau menurun ruang antara karakter dalam teks |
| line-height | Mengatur tinggi baris |
| text-align | Menentukan keselarasan horizontal teks |
| text-decoration | Menentukan dekorasi ditambahkan ke teks |
| text-indent | Menentukan indentasi dari baris pertama dalam teks-blok |
| text-shadow | Menentukan efek bayangan ditambahkan ke teks |
| text-transform | Kontrol kapitalisasi teks |
| unicode-bidi | Digunakan bersama-sama dengan arah properti untuk mengatur atau kembali apakah teks harus diganti untuk mendukung beberapa bahasa dalam dokumen yang sama |
| vertical-align | Mengatur alignment vertikal elemen |
| white-space | Menentukan bagaimana putih-ruang di dalam elemen ditangani |
| word-spacing | Meningkat atau menurun ruang antara kata-kata dalam sebuah teks |