4.4 סגנון לפי ההקשר

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

---

Body{background-color:white;}  

a{ color:blue;}  

table,h1{background-color:blue;}  

table a{color:white;}  

h1 i{text-transform:capitalize;}

---

בנוסף, בדוגמה זו שמנו אות גדולה בראש כל המילים הנמצאות בתוך תגית <i> הנמצאת בתוך תגית <h1>. צורת כתיבה זאת שימושית במיוחד כאשר כותבים רשימות ורוצים מבנה דומה לתתי רשימות:

---

ol li{list-style:upper-roman;}  

ol ol li{list-style:upper-alpha;}  

ol ol ol li{list-style:decimal;}  

ol ol ol ol li{list-style:lower-alpha;}

---

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

---

A table{display:none;}

---

הגדרה זו אינה מעלימה את כל הטבלאות שבדף אלא רק את אלו הנמצאות בתוך תגי <A>. עוד הגדרה קונטקסטואלית קשורה למיקום התגית מייד אחרי אחרת:

---

H1 + table{margin-top:-3px;}

---

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

הגדרת סגנון של הסימן * תתייחס לכל האלמנטים בדף הHTML.

---

*{font-family:times new roman;}

---

► הקודם  הבא  ◄

7.2 Background-color

Background-color שולט בצבע הרקע של האלמנט. ברירת המחדל כאן היא transparent, דהיינו שקוף. למרות שנהוג בדרך כלל לקבוע צבע רקע לכל הדף, אפשר גם לקבוע רקע לאלמנטים מסויימים וכך להבליט אותם על רקע הדף. 

מעניין לראות שכותרת <h1> המקבלת צבע רקע נצבעת לרוחב הדף כולו (אלא אם כן היא מוגבלת בטבלה, למשל).

---

p {background-color: #00FF00}

---

► הקודם  הבא  ◄