Get Adobe Flash player
דף הבית עקרונות ותחביר הקבצת וקינון הבוררים

הקבצה: כלל אחד לבוררים רבים

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

בדוגמא הבאה, ניתן כלל אחד ל-4 בוררים שונים.

 

p, h1, h2, .content_style
   {
    color: blue;
    font-family: arial yahoma serif;   
    background-color: yellow;
    }

סגנון המיועד לתג ספציפי

אפשר לבנות את הבורר כך שהוא יעבוד רק בסוג מסויים של תגים. למשל, אם ברצונך ליצור בורר שייצור מרווח שורות של שורה וחצי, אבל שניתן יהיה להפעילו רק באמצעות תג פסקה <p>, ההוראה תיכתב כך: p.lines { line-height: 150%; }

רק תגי <p> שיש להם class ="lines" יבצעו את ההוראה.

קינון: בורר בתוך בורר

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

ראו בדוגמא הבאה:

<style type="text/css">
  p {
      color: blue;
      text-align: center;
      }
  .marked
     {
     background-color: red;
     }
  .marked  p
    {
     color:white;
     }
</style>
</head>
<body>
<p>הטקסט הזה כתוב בכחול וממורכז</p>
<p>הטקסט הזה כתוב בכחול וממורכז ועל רקע אדום</p>
<div class="morked">
<p>הטקסט הזה כתוב בלבן</p>
</div>

 תוצאת הקוד היא זו:

הטקסט הזה כתוב בכחול וממורכז

הטקסט הזה כתוב בכחול וממורכז ועל רקע אדום

הטקסט הזה כתוב בלבן

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

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

 

אל השיעור הקודם