Belajar Kode CSS & Desain Blog: CSS text-decoration Property

CSS text-decoration property dapat dipergunakan pada semua elemen html teks. Fungsi properti css ini untuk membuat dekorasi teks. Sekalipun pada umumnya hanya digunakan pada teks link, namun sebenarnya css text-decoration dapat digunakan pada semua teks, baik berupa teks link ataupun teks biasa. Ada beberapa nilai teks-decoration property tetapi yang paling sering digunakan adalah "underline" (lebih banyak diaplikasikan pada teks link). Bentuknya berupa sebuah garis lurus mendatar (horizontal) tepat di bawah teks.

css text-decoration property

inherit tekxt-decoration yang berdasarkan penggunaan tekxt-decoration di elemen induk (jarang digunakan).
none Meniadakan text-decoration (normal text - tanpa text-decoration)
overline Text-decoration berbentuk garis lurus horizontal di atas teks.
underline Text-decoration berbentuk garis lurus horizontal di bawah teks.
line-through Text-decoration berbentuk garis lurus horizontal memotong sepanjang teks tepat di tengah.
blink Dekorasi berupa teks berkedip. (Mozilla, Opera)

Contoh

text-decoration:underline

<span style="font:bold 22px Serif;text-decoration:underline;">text-decoration:underline</span>

text-decoration:overline

<span style="font:bold 22px Serif;text-decoration:underline;">text-decoration:overline</span>

text-decoration:line-through

<span style="font:bold 22px Serif;text-decoration:line-through;">text-decoration:line-through</span>

text-decoration:blink

<span style="font:bold 22px Serif;text-decoration:blink;">text-decoration:blink</span>

Dalam demo di bawah ini digunakan beberapa cursor sekaligus pada setiap elemen. Kode yang digunakan untuk menampilkan cursor image adalah kode css dan xHTML. Anda dapat melakukan berbagai percobaan thd penggunaan cursor sebelum memasangnya di blog!

Please click the button to display. Continue with editing code and click to see the results!

<!DOCTYPE html>
<html>
<title>CSS text-decoration Property</title>
<head>

<style type="text/css">
body{
    color:#000;
    font:normal 14px Arial;
    padding:20px;
    margin:0 auto;
    background:#ccc;   
}
.konten{
    margin:0;
    padding:10px;
    background:#eee;
    border-radius:15px;
    box-shadow:0 0 15px #000;
    padding-left:30px;
}
.rd{color:red;}.be{color:blue;}.gn{color:green;}

/* h1 s/d h6, strong, b, i, em, a:link */

h1,h2,h3,h4{text-align:center;font-family:Serif;}
h1{
   font-size:2.8em;
   text-decoration:line-through;
}
h2{
   font-size:33px;
   text-decoration:overline;
}
h3{
   font-size:27px;
   text-decoration:underline;
}
h4{
   font-size:22px;
   text-decoration:blink;
}
a{
     color:red;
     font-weight:bold;
     text-decoration:underline;     
}
a:hover{
     color:blue;
}
</style>

</head>

<body>
<div class="konten">

<h1>text-decoration:line-through</h1>

<h1 style="text-decoration:none;">text-decoration:none</h1>

<h2>text-decoration:overline</h2>

<h3>text-decoration:underline</h3>

<h4>text-decoration:blink; » Opera-Mozilla</h4>

<a href="http://gubhugreyot.blogspot.com" target="_blank" title="Klik dan dapatkan 500 tutorial blogger - blogdetik">Tutorial Blogger - Blogdetik</a>

<h5>Di bawah ini text-decoration:underline; dihilangkan dg xHTML dg attribute text-decoration:none pada tag "a"</h5>

<a style="text-decoration:none;" href="http://gubhugreyot.blogspot.com" target="_blank" title="Klik dan dapatkan 500 tutorial blogger - blogdetik">Tutorial Blogger - Blogdetik</a>

</div>
</body> 
</html>

Belajar Kode CSS & Desain Blog

Halaman

CSS text-decoration Property

css text-decoration property

Contoh

1 komentar:

Archive Blog C l o s e

Arsip Blog

My Profile C l o s e

Mengenai Saya

Follower C l o s e

Follower

RSS C l o s e

Label C l o s e

Label

Halaman

date_replace('8.22.2012');

CSS text-decoration Property

css text-decoration property

Contoh

1 komentar:

Archive BlogC l o s e

Arsip Blog

My ProfileC l o s e

Mengenai Saya

FollowerC l o s e

Follower

RSSC l o s e

LabelC l o s e

Label

Archive Blog C l o s e

My Profile C l o s e

Follower C l o s e

RSS C l o s e

Label C l o s e