css text-decoration, metine eklenecek olan dekorasyonu belirlemek için kullanılır. Metinlerin altı çizgili, üstü çizgili, üzeri çizgili, rengi, çizgi şekli gibi değişikleri yapmamıza olanak verir.
Tek parametreli olduğunda çizgiye dekorasyon olup olmayacağı belirlemek kullanırız.
İki parametreli olduğunda iki durum vardır. Birincisi çizgiye dekorasyon olup olmayacağı diğeri renk seçimi, ikincisi ise çizgiye dekorasyon olup olmayacağı ve çizginin stilinin nasıl olacağı belirleriz.
Üç parametrelide ise çizgiye dekorasyon olup olmayacağı, çizgi rengi ve çizginin stilini belirleriz.
Css text-decoration kullanım şekli :
text-decoration: overline;
text-decoration: underline red;
text-decoration: underline dashed;
text-decoration: underline dashed red;Aldığı parametreler:
none : Değer yok.
underline : Metnin alt tarafına çizgi ekler.
overline : Metnin üst tarafına çizgi ekler.
line-through : Metnin üzerine çizgi ekler.
inherit : Bir üstteki elementten miras alır.
initial : Varsayılan değere çevirir.
solid : düz çizgi.
dashed : Kesikli çizgi.
dotted : Noktalı çizgi.
double : Çift çizgi.
wavy : Dalgalı çizgi.
color : Renk.
Örnek :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div { margin-bottom: 10px; font-size: 20px; }
.one { text-decoration: overline; }
.two { text-decoration: underline wavy #12ef54; }
.three { text-decoration:line-through dashed blue; }
.four { text-decoration: underline dotted red }
.five { text-decoration: none }
</style>
<body>
<div class="one">
Tasarım ve Yazılım
</div>
<div class="two">
Tasarım ve Yazılım
</div>
<div class="three">
Tasarım ve Yazılım
</div>
<div class="four">
Tasarım ve Yazılım
</div>
<div class="five">
Tasarım ve Yazılım
</div>
</body>
</html>Html Çıktısı:
Başka bir yazımızda görüşmek üzere…
