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 süslemeler eklemek veya süslemeleri kaldırmak için kullanılır. Bu özellik, metnin altını veya üstünü çizmenize ya da metnin üzerini çizmenize olanak tanıyarak görsel vurgu sağlar veya belirli durumları belirtir.

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

none: Tüm metin süslemesini 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

Bir HTML belgesinde, bir bağlantı (<p>) içeren bir paragraf (<a>) öğesi ve bir bölüm (<div>) verildi. 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.
class öğesine değeri "underline" olan bir <p> niteliğ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.
class öğesine değeri "strike" olan bir <div> niteliğ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>