הגדרת מספר מחלקות CSS לאלמנט בודד

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

למה צריך להגדיר יותר ממחלקה אחת לאלמנט בודד

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

.err {
      border: 1px solid #DDD;
      margin-bottom: 1em;
      padding: 0.6em 0.8em;{
      direction:rtl;
      font-weight:bold;
      color: #514721;
      background: #FBE3E4;
}
 
.msg {
      border: 1px solid #DDD;
      margin-bottom: 1em;
      padding: 0.6em 0.8em;
      direction:rtl;
      font-weight:bold;
      color: #514721; 
    
      background: #FFF6BF;  

כעת, נחיל עיצובים אלה על אלמנטים מסוג <p> באופן הבא

<p class="err">זוהי דוגמה להודעת שגיאה!</p>
<p class="msg">זוהי דוגמה להודעה שמטרתה להסב את תשומת לבו של הגולש למשהו.</p>

לאחר שנחיל את עיצובי המחלקות שלנו על קוד ה - HTML שלמעלה נקבל את התוצאה הבאה:

זוהי דוגמה להודעת שגיאה!

זוהי דוגמה להודעה שמטרתה להסב את תשומת לבו של הגולש למשהו.

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

.general {
   border: 1px solid #DDD;
   margin-bottom: 1em;
   padding: 0.6em 0.8em;
   direction:rtl;
   font-weight:bold;
   color: #514721;     
}

.msg{ background-color: #FFF6BF;}
.err{ background-color: #FBE3E4;  

כעת כל מה שנותר לנו לעשות הוא ללמוד כיצד להגדיר שתי מחלקות לאלמנט אחד ואז להגדיר למשל לאלמנט כלשהו גם את המחלקה general וגם את המחלקה msg. כדי לעשות זאת עלינו ללמוד תחילה כיצד להחיל שתי מחלקות על אלמנט אחד.

כיצד נגדיר יותר ממחלקה אחת לאלמנט HTML

כפי שראינו במדריך "סלקטורים ומחלקות ב - CSS" נגדיר מחלקה בודדת לאלמנט באופן הבא:

המבנה התחבירי של ID Selectors בשפת CSS

הגדרת מספר מחלקות לאלמנט בודד תתבצע באופן הבא:

המבנה התחבירי של ID Selectors בשפת CSS

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

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

<p class="general err">זוהי דוגמה להודעת שגיאה!</p>
<p class="general msg">זוהי דוגמה להודעה שמטרתה להסב את תשומת לבו של הגולש למשהו.</p>

 

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

המדריך השלם לשפת HTML5

מחלקות ב - CSS


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