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

כפי שכבר ראינו, החלת הוראות ה-CSS נעשות בשלוש דרכים:

כשהבורר תג: עצם השימוש בתג יביא את העיצובים באופן אוטומטי. אם ב CSS הגדרנו שינויי עיצוב לבורר h1, בכל מקום שנשתמש בתג <h1>, הטקסט ייכתב בהתאם להוראות שהוכתבו.

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

כשהבורר הוא סגנון כללי: יש צורך "לקרוא לו". אם ארצה להחיל את הבורר left_side לתג <td> (תא בטבלה) או <p> (פיסקה) או כל תג אחר, אצטרך לקרוא לו באמצעות class. לדוגמא: <td class="left_side">.

לתכונה class אפשר לצרף יותר מאשר בורר אחד. נניח שיצרנו בורר שנקרא .general ואליו אנחנו רוצים לצרף (באותו תג, p לדוגמא) גם את התכונות של הבורר .left_side .

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

<p class="general left_side">

תג <span>

התג <span> הוא תג נייטרלי. מטרתו היא לאגד טקסטים בתוך פסקה ולאפשר החלת סגנונות CSS או פעולות ג'אווה סקריפט.

התג לא יודע לבצע שום פעולה בעלת משמעות ויזואלית, ומספר התכונות שלו מצומצם מאוד: הגדרות שפה (dir=, lang=, xml:lang), id, class, ופעולות אירועים (לסקריפטים).

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

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

דוגמא:

<style type="text/css">
my_style {
     font-family: Arial;
     text-indent: 50px;
     color: red;
 
     font-size: 16px;
     }
new_text {
     font-family: Tahoma;
     color: orange;
     font-size: 20px; 
     }
</style>
</head>
</body>
<p class="my_style">התלמידים בכיתה האזינו  <span class="new_text">בקשב רב</span>להרצאה המשעממת</p>

והתוצאה:

התלמידים בכיתה האזינו בקשב רב להרצאה המשעממת

תג <div>

תג <div> משמש להגדרת מקטע בדף. המקטע הזה יכול לכלול את רוב האלמנטים שבדף - כולל פסקאות, תמונות, טבלאות ועוד.

התג משמש בדרך כלל למטרת קיבוץ אלמנטים רבים לצורך החלת עיצוב משותפת והתכונות הרגילות שהוא מקבל כוללות הגדרות שפה (dir=, lang=, xml:lang), id, class, ופעולות אירועים (לסקריפטים). בנוסף יש לו גם תכוונה אחת בלבד שיש לה משמעות ויזואלית - align.

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

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