Css tutorial-18
0 likes350 views
Dokumen ini menjelaskan cara menggunakan properti CSS 'text-decoration' untuk membuat efek teks seperti underline, overline, line-through, dan blink. Contoh kode HTML disertakan untuk menunjukkan penerapan berbagai efek tersebut pada elemen heading. Namun, efek blink pada heading 1 tidak terlihat saat di-screen shot.
Css tutorial-18
- 1. CSS Tutorial rosihanari.net Membuat Text Decoration 43 Membuat Text Decoration Anda dapat membuat text decoration seperti underline, overline, line-trough, maupun blink dengan properti text-decoration : option; dengan option dapat diganti dengan underliner, overline, line-trough atau blink. Untuk melihat perbedaannya, perhatikan contoh berikut. Contoh: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS Guide</title> <style type="text/css"> #heading1 { text-decoration : blink; /* membuat teks berkelap kelip */ } #heading2 { text-decoration : line-through; /* membuat garis ditengah text/ dicoret */ } #heading3 { text-decoration : underline; /* membuat garis bawah */ } #heading4 { text-decoration : overline; /* membuat garis di atas text */ } </style> </head> <body> <h1 id="heading1">Ini Judul Heading 1</h1> <h1 id="heading2">Ini Judul Heading 2</h1> <h1 id="heading3">Ini Judul Heading 3</h1> <h1 id="heading4">Ini Judul Heading 4</h1> </body> </html>
- 2. CSS Tutorial rosihanari.net Membuat Text Decoration 44 Tampilan dari code di atas adalah sebagai berikut, akan tetapi untuk efek blink pada heading 1 tidak kelihatan ketika di screen shot.