Metin Süslemesi

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

CSS'te text-decoration özelliği, bir HTML öğesindeki metne dekorasyon eklemek veya metinden dekorasyonu kaldırmak için kullanılır. Bu özellik, metnin altını çizmenize, üstüne çizgi çekmenize veya üstünü çizmenize olanak tanıyarak görsel vurgu sağlar ya da belirli durumları belirtir.

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

none: Tüm metin süslemelerini kaldırır. Bu varsayılan değerdir.

underline: Metne alt çizgi ekler.

overline: Metnin üzerine üst çizgi ekler.

line-through: Metnin ortasından geçen bir çizgi ekler (üstü çizili). Genellikle silinmiş, kaldırılmış veya artık geçerli olmayan metni belirtmek için kullanılır.

Örneğin:

a {
    text-decoration: none;
}

.underline {
    text-decoration: underline;
}

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

Görev

Kolay

İçinde bir bağlantı (<a>) öğesi bulunan bir paragraf (<p>) ve bir bölme (<div>) içeren bir HTML belgeniz var. Göreviniz, bu öğelere stil vermek için text-decoration özelliğini kullanmak. 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.

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>