"/>

הוספת תוכן לדף בעזרת התכונה Content

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

הערה: כדי שתכונה זו תעבוד באינטרנט אקספלורר 8 יש להוסיף בראש הדף את ה - DOCTYPE. נעשה זאת כך:

<!DOCTYPE html>

התחביר ודרכי השימוש בתכונה content

בתכונה content ניתן להשתמש רק בצירוף עם הפסאודו אלמנטים :before ו - after. כותבים אותה כמו שכותבים פסאודו אלמנטים עם נקודותיים, והיא נחשבת לפסאודו אלמנט משום שהיא אינה באמת סלקטור הבוחר משהו אלא היא מוסיפה משהו לדף. זה נשמע מעט מסובך, אך בעצם מדובר בתכונה פשוטה ומועילה שטוב שתהיה חלק מארגז הכלים של כל מתכנת CSS.

דוגמה לשימוש בתכונה content

בדוגמה הבאה נוסיף את הביטוי "Street Address" לפני כל תוכן של אלמנט שהמחלקה שלו (class) היא address.

.address:before {
content: "Street Address: ";
}

   

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

הוספת סימנים מיוחדים לדף תוך שימוש בתכונה content

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

בדוגמה הבאה נוסיף סימן מיוחד (סימן הזכויות) לפני כל קישור שבקרו בו כבר. נעשה זאת באופן הבא:

.footer:before {
content: "\00A9 All Rights Reserved 2000-2012";
}

   

הוספת תמונות לדף בעזרת קוד CSS והתכונה content

בדוגמה הבאה נוסיף תמונה לאחר כל קישור בדף. נעשה זאת באמצעות הפסאודו אלמנט after:

a:after {
content:url(right_arrow.gif);
}

   


הוספת תוכן ל - attributes של אלמנטים בדף HTML

התכונה content מאפשרת להוסיף תוכן לא רק לאלמנטים עצמם אלא גם ל - attributes שלהם.  בדוגמה הבאה למשל נגרום לכך שלפני תחילת הטקסט שבכותרת (title) קישור תופענה צמד המילים: Link to. נעשה זאת באופן הבא:

a:before
{
 content: attr(title) "Link to: ";
}

   

ניתן להוסיף תוכן בצורה כזו לכל attribute שברצונכם בכך. לשם כך עליכם להשתמש בפורמט הבא:

attr(name-of-attribute)

כלים ומאמרים בנושא

מדריך ליצירת מספור אוטומטי של אלמנטים מכל הסוגים בדף אינטרנט

קישורים ב - HTML

מדריך לפסאודו אלמנטים ב - CSS


 
© 2010-2013  www.Devschool.co.il | מדיניות פרטיות | תנאי שימוש