עיטור הטקסט

חלק מהיחידה עיצוב באמצעות CSS במסלול ה-HTML של Coddy. שיעור 22 מתוך 76.

ב-CSS, המאפיין text-decoration משמש להוספה או להסרה של קישוטים לטקסט בתוך רכיב HTML. מאפיין זה מאפשר לך להוסיף קו תחתון, קו מעל או קו חוצה לטקסט, כדי להדגיש אותו חזותית או לציין מצבים מסוימים.

ערכים נפוצים של text-decoration כוללים:

none: מסיר כל עיטור טקסט. זהו ערך ברירת המחדל.

underline: מוסיף קו תחתון לטקסט.

overline: מוסיף קו מעל הטקסט.

line-through: מוסיף קו דרך אמצע הטקסט (קו חוצה).

לדוגמה:

a {
    text-decoration: none;
}

.underline {
    text-decoration: underline;
}

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

אתגר

קל

ניתן לך מסמך HTML עם פסקה (<p>) שמכילה רכיב עוגן (<a>), ועם חלוקה (<div>). המשימה שלך היא להשתמש במאפיין text-decoration כדי לעצב את הרכיבים האלה. בצע את השלבים הבאים:

כתוב כלל CSS שמטרגט את כל רכיבי <a>. הגדר את text-decoration לערך none כדי להסיר את הקו התחתון שמופיע כברירת מחדל.
הוסף לפסקה (<p>) מאפיין class עם הערך "underline".
כתוב כלל CSS שמטרגט את כל הרכיבים שהמחלקה שלהם היא underline. הגדר את text-decoration לערך underline.
הוסף לחלוקה (<div>) מאפיין class עם הערך "strike".
כתוב כלל CSS שמטרגט את כל הרכיבים שהמחלקה שלהם היא strike. הגדר את text-decoration לערך line-through.

נסו בעצמכם

<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>