Format teks
Teks ini ditata dengan beberapa properti pemformatan teks. Judul
menggunakan text-align, text-transform, dan color properties. paragraf
adalah indentasi, selaras, dan ruang antar karakter ditentukan. Garis
bawaan dihapus dari tautan
Warna teks
properti warna digunakan untuk mengatur warna teks.
dengan CSS, warna paling sering ditentukan oleh:
Nama warna - seperti "merah"
Nilai HEX - seperti "# ff0000"
Nilai RGB - seperti "rgb (255,0,0)"
Warna teks default untuk halaman didefinisikan di dalam body selector.
Contoh
body{
color:blue;
}
h1 {
color: green;
}
Catatan : Jika Anda menentukan properti warna, Anda juga harus menentukan properti latar belakang warna.
Alignment Teks
properti text-align digunakan untuk mengatur kesejajaran horizontal teks.
Teks dapat dibiarkan atau disejajarkan dengan benar, terpusat, atau dibenarkan.
Contoh berikut menunjukkan garis tengah, dan teks selaras kanan dan kiri (alignment kiri adalah default jika arah teks kiri ke kanan, dan perataan kanan adalah default jika arah teks benar dari kiri ke kiri):
Contoh
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
Bila properti text-align diatur ke "justify", setiap baris diregangkan sehingga setiap baris memiliki lebar yang sama, dan margin kiri dan kanan lurus (seperti di majalah dan surat kabar):
Contoh
div {
text-align: justify;
}
hiasan teks/Text Decoration
properti hiasan teks digunakan untuk mengatur atau menghapus hiasan dari teks.
Nilai
text-decoration: none; Sering digunakan untuk menghapus garis bawah dari link:Contoh
a{
text-decoration: none;}
Nilai hiasan teks lainnya digunakan untuk menghias teks:
Contoh
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
Catatan : Tidak disarankan untuk menggarisbawahi teks yang bukan merupakan link, karena akan membingungkan pembaca.
Transformasi Teks
properti text-transform digunakan untuk menentukan huruf besar dan huruf kecil dalam sebuah teks.
Ini bisa digunakan untuk mengubah segalanya menjadi huruf besar atau huruf kecil, atau memanfaatkan huruf pertama setiap kata:
Contoh
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
}
Indentasi teks
properti teks-indentasi digunakan untuk menentukan lekukan baris pertama teks:
Contoh
p {
Text-indent: 50px;
}
Spasi surat
properti spasi surat digunakan untuk menentukan spasi di antara karakter dalam teks.
Contoh berikut menunjukkan bagaimana menambah atau mengurangi ruang antar karakter:
Contoh
h1 {
letter-spacing: 3px;
}
h2 {
letter-spacing: -3px;
}
Tinggi garis
properti baris-tinggi digunakan untuk menentukan ruang antar baris:
Contoh
p.small {
Garis-tinggi: 0,8;
}
p.big {
Garis-tinggi: 1,8;
}
Arah Teks
properti arah digunakan untuk mengubah arah teks elemen:
Contoh
div {
direction: rtl;
}
Spasi kata
properti kata-jarak digunakan untuk menentukan spasi di antara kata-kata dalam teks.
Contoh berikut menunjukkan bagaimana menambah atau mengurangi ruang antara kata-kata:
Contoh
h1 {
word-spacing: 10px;
}
h2 {
word-spacing: -5px;
}
Semua Properti Teks CSS
color Mengatur warna teks
direction Menentukan arah teks / arahan penulisan
letter-spacing Meningkatkan atau mengurangi ruang antar karakter dalam teks
Line-height Mengatur tinggi garis
Text-align Menentukan penyejajaran horizontal teks
text-decoration Menentukan hiasan yang ditambahkan ke teks
Text-indent Menentukan lekukan garis pertama pada blok teks
Text-shadow Menentukan efek bayangan yang ditambahkan ke teks
Text-transform Mengontrol kapitalisasi teks
Unicode-bidi Digunakan bersamaan dengan properti arah untuk mengatur atau mengembalikan apakah teks tersebut harus diganti untuk mendukung banyak bahasa dalam dokumen yang sama.
Vertical-align Mengatur keselarasan vertikal elemen
White-space Menentukan bagaimana ruang putih di dalam elemen ditangani
Word-spacing Meningkatkan atau mengurangi ruang antar kata dalam sebuah teks
Out Of Topic Show Konversi KodeHide Konversi Kode