מחלקות                                         

 

בדפים הבאים נביא דוגמאות רבות. כדי להמחיש דוגמאות אלו נשתמש בקישורים אשר יפתחו חלונות הדגמה בנושאים הנלמדים. אל תבהל! לאחר שתבין את הדוגמא תוכל פשוט ללחוץ עם סמן העכבר על סמן ה - X בקצהו העליון של החלון, ע"י כך לסגור אותו ולהמשיך בלימוד כרגיל.

 

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

 

חוקים למחלקה דומים מאוד לחוקים שכבר ראינו והגדרנו עבור תגים. ההבדל היחיד הוא שהחוק לא מתחיל בשם של תג HTML. במקום זה החוק מתחיל ב"נקודה" ואחריה שם מזהה שאנחנו בוחרים והוא יהיה השם של החוק. השם הוא שם המחלקה שיצרנו.

 

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

 

שימוש במחלקה על מנת להגדיר תג HTML 

 

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

 

דוגמה פשוטה, נגדיר את שני המחלקות הבאות:

 

.blueslant {color: #669999; font-style:italic;}
.orangeline {color: #996699; text-decoration:underline;}

 

   

עכשיו, נשתמש במחלקות על מנת ליצור גרסאות אלטרנטיביות לתג <h3>: דוגמא 9. הדוגמה בקובץHTML משתמשת במחלקות החדשות שיצרנו:

 

 <h3 class="blueslant">Slanted H3 Heading</h3>
<h3 class="orangeline">Underlined H3 Heading</h3>

 

שים לב שלא כללנו את הנקודה עם שם המחלקה כאשר הגדרנו את <h3> מחדש.

 

עכשיו יש לנו 3 הגדרות שונות לתג <h3>:

 

1. גרסה בה נשתמש כאשר נכתוב:

class="blueslant"

2. גרסה בה נשתמש כאשר נכתוב:

 class="orangeline"

3. גרסת ברירת המחדל בה נשתמש במקרה שלא נפרט מחלקה כלשהי בהגדרת התג. (במקרה זה, ברירת המחדל החדשה שיצרנו כאשר הגדרנו מחדש את התג<h3> ).  

אם נשים את כל שלושת ההגדרות בקובץ חיצוני, נוכל להשתמש בכל אחת מההגדרות בכל קובץ HTML שיכיל קישור לקובץ החיצוני.

 

זו הייתה דוגמא פשוטה מאוד, אך ניתן באופן דומה ליצור הגדרות חדשות או חלופיות (בו זמנית) עבור תגים אחרים.

 

סוגים וזהויות ID

 

CSS מאפשר גם ליצור חוקים לזהות "ID". הפורמט של הגדרת חוקי ID הוא אותו פורמט מלבד העובדה שבמקום נקודה בתחילתו תופיע סולמית "#". על מנת להשתמש בחוק ID חובה עלינו לכלול אותו בתג HTML. ההתייחסות אל חוק ID היא כאל ערך באחת מהגדרות התג שנקרא "ID" (באופן די מפתיע).

 

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

 

יצירת סביבת HTML

 

ניתן ליצור סביבה של דפי HTML על ידי התגים DIV ו SPAN. למעשה, DIV ו SPAN הם פשוט שני תגי HTML נוספים, והגדרת מחלקות ו ID נעשים בצורה פשוטה כפי שהראינו. אבל בגלל התכונות המיוחדות של שני תגים אלו, הם מספקים לנו דרך להגדיר סביבת HTML משלנו. לדוגמא, נרצה להשתמש ב SPAN בכדי להדגיש חלק מטקסט: דוגמא 11.

 

התג DIV הוא למעשה כמעט לוח ריק: אין לא כל השפעה מלבד הגדרת אזור בדף והדפסת קו לפניו ואחריו. SPAN הוא לוח תג טיפש לחלוטין ולא מכיל בתוכו אף הגדרה או מאפיין. מחלקות ו ID (כפי שכבר נכתב) באים לידי ביטוי רק כאשר הם מוכלים בתג HTML. בגלל ש DIV וSPAN  למעשה ריקים מתוכן, ניתן לחשוב שהם שתי מכולות ריקות המאפשרות לך להכיל בהן בצורה מסודרת סדרת הגדרות מתי ואיפה שתרצה.

 

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