Birkod - CSS ile Metinler text decoration

CSS ile Metinler text decoration

text-decoration

Birkod Ekibi Bu Kodu KOD DOSTU Olarak İşaretledi!

Kod Kullanımı

Aldığı Değerler: none, underline, overline, line-through
Kullanım Şekli: text-decoration: Değer

Bu özelliğimizi genellikle linklere otomatik olarak gelen alt çizgiyi kaldırmak için kullanmaktayız. Fakat tüm kullanım şekillerini aşağıdaki örneğimizden inceleyeceğiz.

Yazılarımızın özellikleri şu şekilde;
› None: Varsayılan değeri kaldırır.
› Underline: Yazının altına çizgi ekler.
› Overline: Yazının üstüne çizgi ekler.
› Line-Through: Yazının üstünü çizer.

stil.css

.textDecoration1 {
	text-decoration: none;
}
.textDecoration2 {
	text-decoration: underline;
}
.textDecoration3 {
	text-decoration: overline;
}
.textDecoration4 {
	text-decoration: line-through;
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>BirKod | Text-Decoration</title>
	<link rel="stylesheet" href="stil.css">
</head>
<body>
	<h4>Bu yazımızda <b>TEXT-DECORATION: NONE</b> özelliği kullanılmıştır.</h4>
	<div class="textDecoration1">BirKod ile <b>Text-Decoration</b> özelliği üzerine çalışıyoruz!</div>
	<h4>Bu yazımızda <b>TEXT-DECORATION: UNDERLINE</b> özelliği kullanılmıştır.</h4>
	<div class="textDecoration2">BirKod ile <b>Text-Decoration</b> özelliği üzerine çalışıyoruz!</div>
	<h4>Bu yazımızda <b>TEXT-DECORATION: OVERLINE</b> özelliği kullanılmıştır.</h4>
	<div class="textDecoration3">BirKod ile <b>Text-Decoration</b> özelliği üzerine çalışıyoruz!</div>
	<h4>Bu yazımızda <b>TEXT-DECORATION: LINE-THROUGH</b> özelliği kullanılmıştır.</h4>
	<div class="textDecoration4">BirKod ile <b>Text-Decoration</b> özelliği üzerine çalışıyoruz!</div>
</body>
</html>

Google Chrome 44

Mozilla Firefox 39

Opera 30

Safari 5

Yandex 15

Internet Explorer 11

Maxthon Cloud Browser 4

Vivaldi 1

Citrio 42