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

בורר שהוא תג

כאשר הבורר הוא תג (למשל body או h1 או p  וכו') אפשר לקבוע לו תכונות עיצוב, שלא היה ניתן להחיל על התג בעת עבודה עם HTML בלבד.

למשל ההוראה הבאה:

h1 {
    text-align: center;
    color: #0000ff;
    font-family: Tahoma
;
               }

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

בורר לסגנון חדש - ייחודי

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

ההוראה ב CSS:

#new_address {
     font-size: 12px;
     font-style: italic;
     font-family: Tahoma;
     }

הפקודה ב HTML:

<p id="new_address">רח' הפרחים 14, העיר האלוהית</p>

הטקסט  "רח' הפרחים 14, העיר האלוהית" נכתב בהטיה, בגודל 12px ובגופן מסוג Tahoma.

הערה חשובה:אין להשתמש באותו id פעמיים בדף ה-HTML

בורר לסגנון חדש - כללי

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

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

הדרך להחיל את הסגנון הכללי על תג היא באמצעות התכונה class שהערך שלה הוא שם הבורר (אך ללא הנקודה). בדוגמא הבאה בנה את הסגנון new_style ונוסיף אותו לתג <p>:

.new_style {
    line_height : 150%;
    font-weight : bold;
    font-size : 24px;
    color : #ff8800;
    }

הוראת ה-HTML היא:

<p class="new_style">ילדים ברוכים לאלוהים</p>
<p>
אנושות ברוכה לאלוהים </p>
<p class="new_style">
כל דרי כדור הארץ ברוכים לאלוהים </p>

 

והתוצאה: השורה הראשונה והאחרונה קיבלו את הוראת ה CSS באמצעות התכונה class (טקסט כתום, תו מעובה בגודל 24px, ומרווח של שורה וחצי) והשורה האמצעית, נשארה רגילה.

ילדים ברוכים לאלוהים

אנושות ברוכה לאלוהים

כל דרי כדור הארץ ברוכים לאלוהים

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