Metin Süsleme

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

CSS'de, text-decoration özelliği bir HTML öğesi içindeki metne dekorasyon eklemek veya kaldırmak için kullanılır. Bu özellik; metnin altını çizmenize, üstünü çizmenize veya ü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: Herhangi bir metin dekorasyonunu kaldırır. Bu varsayılan değerdir.

underline: Metne bir alt çizgi ekler.

overline: Metnin üzerine bir çizgi ekler.

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

Örneğin:

a {
    text-decoration: none;
}

.underline {
    text-decoration: underline;
}

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

Görev

Kolay

Bir çapa (<a>) öğesi içeren bir paragraf (<p>) ve bir bölüm (<div>) içeren bir HTML belgesi size verilmiştir. Göreviniz, bu öğeleri stillendirmek 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 "underline" değerine sahip 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 "strike" değerine sahip 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.

Kopya kağıdı

text-decoration özelliği, HTML öğeleri içindeki metne dekorasyon ekler veya kaldırır.

Yaygın değerler:

none: Herhangi bir metin dekorasyonunu kaldırır (varsayılan)
underline: Metne bir alt çizgi ekler
overline: Metnin üzerine bir üst çizgi ekler
line-through: Bir üstü çizili çizgi ekler

a {
    text-decoration: none;
}

.underline {
    text-decoration: underline;
}

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

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>