אז בהקדמה לCSS כתוב ש CSS יעזור לנו לא לחזור על עצמנו ולכתוב בצורה מסודרת יותר
למאפיינים id ו-class יש חלק נרחב בעניין הזה.
למרות שבעיקרון ניתן לעשות כל דבר בCSS גם בלי להשתמש בclass וid הם שני המאפיינים אולי החשובים ביותר בCSS ומיד נבין למה ואיך.
בשביל שהCSS שלנו ידע על אילו אלמנטים של HTML הוא צריך להחיל את הstyle יש 2 דרכים עיקריות:
- לפי סוג האלמנט – דוגמה: כל הלינקים יהיו כחולים, או כך הפסקאות יהיו אדומות.
- לפי CLASS או ID – דוגמה: כל הלינקים שרשום אליהם כחול יהיו כחולים וקטנים.
אפיון בעזרת id
בעזרת id נאפיין את העיצוב ל-אלמנט בודד ומיוחד.
נשתמש בתכונה id של אלמנטים בhtml, המוגדרת באמצעות "#".
העיצוב הבא יחול על האלמנט עם התכונה "id="para
לדוגמא:
#para1
{
text-align:center;
color:red;
}
*אין להתחיל שם של id עם מספר! זה לא יעבוד בפיירפוקס, כרום, סאפארי ועוד זה עובד בעיקר באקספלורר .
אפיון בעזרת class
בעזרת class נאפיין את העיצוב ל-קבוצה של אלמנטים.
לעומת הid משתמשים יותר בclass המאפיין מספר של אלמנטים.
דבר זה מאפשר לנו לקבוע עיצוב מסוים לאלמנטים רבים של html הדומים אחד לשני.
נשתמש בתכונה class של אלמנטים בhtml, המוגדרת באמצעות "." (נקודה)
העיצוב הבא יחול על כל האלמנטים של html בעלי התכונה "class="center והם יופיעו במרכז הדף.
לדוגמא:
.center {text-align:center;}
ניתן גם להחליט שאלמנט מסיום של html יהיה מושפע ממאפיין הclass.
בדוגמא הבאה כל הפסקאות (p) שמקיימות "class="center יוצגו במרכז הדף.
לדוגמא:
p.center {text-align:center;}
*אין להתחיל שם של id עם מספר! זה לא יעבוד בפיירפוקס, כרום, סאפארי ועוד זה עובד בעיקר באקספלורר .
שורה תחתונה תשתמשו ב CLASS וID זה אולי בהתחלה יראה לכם מוזר אבל אחר כך זה יחסוך לכם המון זמן ויהיה לכם הרבה יותר קל להבין מה עשיתם.