קישוטי טקסט - קו תחתי, קו עליון וקו חוצה

קישוט הטקסט בקו

נוכל לקבוע לטקסט קישוטים שונים המדגישים אותו, כגון קו תחתי מקווקו, או קו חוצה.

התכונה text-decoration-line קובעת את סוג הקו שנרצה להשתמש בו לקישוט הטקסט. התכונה יכולה לקבל את הערכים הבאים:

• none - ללא קו (ברירת המחדל)
• underline - קו תחתי
• overline - קו עילי
• line-through - קו חוצה (מדמה טקסט מחוק)

דוגמה:

h1 {
	text-decoration-line:underline;
}

p .deleted {
	text-decoration-line:line-through;
}

בדוגמה זו, הוספנו קו תחתי לכותרת הראשית h1. כמו כן, כל אלמנט מהמחלקה deleted שנמצא בתוך פיסקה יסומן עם קו חוצה.

קביעת סוג הקו המקשט

התכונה text-decoration-style קובעת את הסגנון של הקו שאיתו מקשטים. התכונה יכולה לקבל את הערכים הבאים:

• solid - קו אחיד (ברירת המחדל)
• double - קו כפול
• dotted - קו עשוי מנקודות
• dashed - קו מקווקו
• wavy - קו גלי

דוגמה:

p .mistake{
	text-decoration-line:underline;
	text-decoration-style:wavy;
}

בדוגמה זו, הוספנו קו תחתי עם אפקט בצורת גלים לאלמנטים מהמחלקה mistake שנמצאים בתוך פיסקה.

קביעת עובי הקו המקשט

התכונה text-decoration-thickness קובעת את עובי הקו שאיתו מקשטים. היא מקבלת ערך מיספרי עם יחידת מדידה.

יחידת המדידה יכולה להיות px עבור פיקסלים, em עבור גודל יחסי לאלמנט ההורה או rem עבור גודל יחסי לאלמנט הראשי.

דוגמה:

p .deleted {
	text-decoration-line:line-through;
	text-decoration-thickness:3px;
}

p .mistake{
	text-decoration-line:underline;
	text-decoration-style:wavy;
	text-decoration-thickness:0.1em;
}

בדוגמה זו, אלמנטים מהמחלקה deleted שבתוך פיסקה יוצגו עם קו חוצה בעובי 2 פיקסלים, ואלמנטים מהמחלקה mistake שבתוך פיסקה יוצגו עם קו תחתי בצורת גל בעובי 0.1 ביחס לגודל הגופן.

קביעת צבע הקו המקשט

התכונה text-decoration-color קובעת את צבע הקו המקשט. ניתן להשתמש בהגדרות צבע בייצוגים שונים: שימוש במילת מפתח המתארת את הצבע, ערך RGB דצימלי או הקסדצימלי או ערך HSL.

דוגמה:

p .deleted {
	text-decoration-line:line-through;
	text-decoration-thickness:3px;
	text-decoration-color:red;
}

p .mistake{
	text-decoration-line:underline;
	text-decoration-style:wavy;
	text-decoration-thickness:0.1em;
	text-decoration-color:#ff7e00;
}

בדוגמה זו, שיפרנו את עיצוב האלמנטים מהמחלקות deleted ו-mistake מהדוגמאות הקודמות וקבענו להם צבעים: צבע אדום (red) עבור הקו החוצה של deleted וצבע כתום (גוון ff7e00) עבור הקו התחתי של mistake.

שימוש בתכונה text-decoration בצורה מקוצרת

ניתן לאחד כמה תכונות של קישוט לתכונת text-decoration מאוחדת יחידה. התכונה מאחדת בתוכנה קיצור של התכונות הבאות:

• text-decoration-line
• text-decoration-style
• text-decoration-thickness
• text-decoration-color

אין חובה להכניס בערך של text-decoration את הערכים עבור כל התכונות המקוצרות.

דוגמה:

p .deleted {
	text-decoration:line-through 3px red;
}

p .mistake {
	text-decoration:underline wavy 0.1em #ff7e00;
}

דוגמה זו מגדירה עיצוב זהה כמו בדוגמה האחרונה, רק בצורה מקוצרת.