CSS ile Metin İşleme

Bu yazımızda CSS ile text-decoration işlemlerini inceleyeceğiz. 

Aşağıdaki ifade ile metnin üstünü çiziyoruz.
text-decoration: line-through;

Aşağıdaki ifade ile metnin tepesini çiziyoruz.
text-decoration:overline;

Aşağıdaki ifade ile altını çiziyoruz.
text-decoration:underline

Şimdi detaylı bir örnek ile konuyu pekiştirelim. Herbiri için bir class tanımlayarak işleri kolaylaştıralım ve CSS koduumuzu daha okunur hale getirelim.


<html>
<head>
<meta charset="utf-8"/>
<style>
.metinUstunuCiz {text-decoration: line-through;}
.metinTepesiniCiz {text-decoration:overline;}
.metinKoyu {font-weight:bold;}
.metinAltiniCiz {text-decoration:underline;}
</style>
 
 
</head>
<body>

<div class="metinAltiniCiz metinOrtala">ŞOK FİYAT!!!</div>

<div class="metinKoyu">Eski Fiyat:</div>

<div class="metinUstunuCiz">200</div>
 
<div class="metinKoyu">Yeni Fiyat:</div>
<div>199,99</div>
 
<div class="metinTepesiniCiz">Tepesi Çizilen Metin</div>
 
</body>
 
</html>



Mutlu kodlamalar,
Oğuzhan TAŞ
Kasım, 2016

 
Bookmark and Share