קיבוץ ושרשור ב- CSS

קיבוץ ב- CSS

באפשרותך להגדיר את אותן תכונות למספר בוררים מבלי לחזור עליהם מספר רב של פעמים, לדוגמא :

  1. h2 {
  2.     color: red;
  3. }
  4. .thisOtherClass {
  5.     color: red;
  6. }
  7. .yetAnotherClass {
  8.     color: red;
  9. }

את הקוד הנ"ל, ניתן לקבץ בצורה הבאה :

  1. h2, .thisOtherClass, .yetAnotherClass {
  2.     color: red;
  3. }

שרשור ב- CSS

אם קוד ה – CSS שלך יהיה בנוי בצורה נכונה, לא תדרש להגדיר מספר רב של בוררים מסוג Class או ID. הסיבה לכך היא שבאפשרותך לשרשר תכונות בתוך בוררים ב- CSS. לדוגמא :

  1. #top {
  2.     background-color: #ccc;
  3.     padding: 1em
  4. }
  5. #top h1 {
  6.     color: #ff0;
  7. }
  8. #top p {
  9.     color: red;
  10.     font-weight: bold;
  11. }

הקוד הנ"ל, מבטל את הצורך ביצירה רבה של בוררים מסוג Class או ID.
במידה ותרצה להחיל זאת על אלמנטים ב – HTML תוכל לעשות זאת בצורה הבאה :

  1. <div id="top">
  2.     <h1>מדריך CSS למתקדמים</h1>
  3.     <p>זהו המדריך הטוב ביותר באינטרנט !</p>
  4.     <p>כן, הכי טוב שיש.</p>
  5. </div>

למעשה, בצורה הנ"ל הדפדפן "מבין" כי אלמנטים H1 ו- P בתוך ה – ID שמוגדר כ- top צריכים להיות בצבע #ff0 ו- red, בהתאמה.
מספר הרמות שניתן להגדיר באמצעות שרשורי CSS אינו מוגבל ל –2 בלבד.

עמודים רלוונטים