Metin Süsleme

Coddy'nin HTML Journey'sinin Styling with CSS bölümünün bir parçası. Ders 22 / 76.

CSS'te text-decoration özelliği, bir HTML öğesindeki text için decoration eklemek veya kaldırmak amacıyla kullanılır. Bu özellik, text'i underline, overline ya da strike-through yapmanıza olanak tanıyarak görsel vurgu sağlar veya belirli durumları belirtir.

text-decoration için yaygın değerler şunlardır:

none: Her türlü metin decoration'ını kaldırır. Bu, varsayılan değerdir.

underline: Metne altı çizili biçim ekler.

overline: Metnin üzerine bir üst çizgi ekler.

line-through: Metnin ortasından geçen bir çizgi ekler (üstü çizili).

Örneğin:

a {
    text-decoration: none;
}

.underline {
    text-decoration: underline;
}

.strike {
    text-decoration: line-through;
}

Görev

Kolay

Size, bir bağlantı (<a>) öğesi içeren bir paragraf (<p>) ve bir bölüm (<div>) bulunan bir HTML belgesi verilmiştir. Göreviniz, bu öğeleri biçimlendirmek için text-decoration özelliğini kullanmaktır. Aşağıdaki adımları izleyin:

Tüm <a> öğelerini hedefleyen bir CSS kuralı yazın. Varsayılan alt çizgiyi kaldırmak için text-decoration değerini none olarak ayarlayın.
<p> öğesine değeri "underline" olan bir class özniteliği ekleyin.
underline sınıfına sahip tüm öğeleri hedefleyen bir CSS kuralı yazın. text-decoration değerini underline olarak ayarlayın.
<div> öğesine değeri "strike" olan bir class özniteliği ekleyin.
strike sınıfına sahip tüm öğeleri hedefleyen bir CSS kuralı yazın. text-decoration değerini line-through olarak ayarlayın.

GEREKLİ ÇIKTI BİÇİMİ: [Çevrilmiş içeriğiniz burada]

Kendin dene

<html>
<head>
    <title>Text Decoration</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <p>This is a paragraph with a <a href="#">link</a>.</p>
    <div>This is a division.</div>
</body>
</html>