מדריך CSS – הגדרות סגנון קונטקסטואליות

‏ • Internet Israel

ניתן להגדיר סגנון לתגיות לפי מיקומן בתוך תגיות אחרות, למשל. אם לטבלה שלנו יש רקע כחול ואנו רוצים שלינקים (<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{magin-top:-3px;}

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

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

*{font-family:times new roman;}

תגיות: , ,

רן בר-זיק

מתכנת PHP מנוסה ובעל ידע רב בפיתוח לאינטרנט על בסיס LAMP. מומחה במערכות דרופל, ג'ומלה ו-וורדפרס. שולט היטב בכל מה שקשור לפרונט אנד: JavaScript: jQuery ו-MooTools,ActionScript 2/3 וכמובן HTML 5 + CSS 3.אינטרנט ישראל: www.internet-israel.com

תגובות בפייסבוק

חדש! אחסון אתרים של וובמאסטר

שירות אחסון אתרים
המקצועי של וובמאסטר!

מומחים באירוח אתרי
WordPress, Joomla, Drupal

  • שרתי לינוקס עם CloudLinux, LiteSpeed
  • 1GB דיסק SSD, 10GB תעבורה חודשית
  • ממשק ניהול cPanel, תעודת SSL חינם

עכשיו במחיר היכרות:
רק 420 ש"ח לשנה!