Sesuai dengan namanya, property text-decoration digunakan untuk mempercantik text halaman HTML kita.
Cara penulisan
| p {text-decoration: overline} |
Nilai (value) text-decoration ada 5 macam yaitu:
overline - untuk membuat tulisan dengan dekorasi garis diatasnya
line-through - untuk membuat tulisan dengan dekorasi garis ditengahnya
underline - untuk membuat tulisan dengan dekorasi garis bawah
blink - untuk membuat tulisan berkedip
none - untuk membuat tulisan tanpa dekorasi
Untuk lebih jelasnya kita coba aja yaa
<html> <head> <style type="text/css"> h1 {text-decoration: overline} h2 {text-decoration: line-through} h3 {text-decoration: underline} h4 {text-decoration: blink} a {text-decoration: none} </style> </head> <body> <h1>Header 1</h1> <h2>Header 2</h2> <h3>Header 3</h3> <h4>Header 4</h4> <p><a href="http://4gratisfree.blogspot.com/">Sebuah link</a></p> </body> </html> |
Contoh Tampilan dalam Browser
Header 1Header 2Header 3Header 4Sebuah link |
Dalam contoh diatas, sebuah link yang biasanya selalu disertai garis bawah bisa kita buat tanpa garis bawah.
Nah.. udah deh, sekarang kita bisa mempercantik halaman HTML kita dengan text-decoration. Tapi bisa juga memperjelek yaa, coba kalau semua tulisan di over-through.....
Property text-transform
Dalam menulis halaman HTML, seringkali kita pengen membuat suatu tulisan dengan huruf besar semua atau dengan huruf kecil semua, tetapi kita sering kali lupa menekan tombol Caps Lock sehingga tulisan kita mesti dihapus dulu baru ditulis ulang sesuai keinginan. Sebenarnya ada suatu property yang memudahkan kita untuk keperluan tersebut yaitu property text-transform.
Dengan property ini kita bisa membuat tulisan dengan huruf Kapital semua, huruf kecil semua atau setiap kata diawali dengan huruf kapital tanpa takut salah ketik. Karena secara otomatis browser akan mengikuti perintah CSS kita sesuai dengan keinginan kita.
Contoh pemakaian text-transform
| <html> <head> <style type="text/css"> p.uppercase {text-transform: uppercase} p.lowercase {text-transform: lowercase} p.capitalize {text-transform: capitalize} </style> </head> <body> <p class="uppercase">Paragrap ini ditulis dengan huruf kapital</p> <p class="lowercase">Paragrap ini DITULIS dengan huruf kecil semua</p> <p class="capitalize">Setiap kata diawali huruf kapital</p> </body> </html> |
Tampilan Browser
Paragrap ini ditulis dengan huruf kapital Paragrap ini DITULIS dengan huruf kecil semua Setiap kata diawali huruf kapital |
Tidak ada komentar:
Posting Komentar