סלקטורים ב- CSS: חלק א', הבסיס

במדריך זה אסביר באופן כללי על הסלקטורים ב CSS.

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

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

SELECTOR {property_1: value_1; property_2:value_2;  }

כאשר נחליף את ה property_x ואת ה-value_x בהגדרות העיצוב שנרצה. כל סלקטור יקבל שורה של הגדרות (properties), כל הגדרה תהיה מורכבת מ-proerty, לאחריו התו : (נקודותיים), הערך שנרצה להגדיר לה וסיום עם התו ; (נקודה פסיק). 

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

 

1. בחירה של כל האלמנטים בדף

בחירה של כל האלמנטים תתבצע באמצעות * (כוכבית). כל הגדרת עיצוב שנגדיר בתוך הגדרה זו יוצג על כל האלמנטים בדף.

דוגמא להגדרת פונט מסוג Arial לכל האלמנטים בדף:

* {font-family: Arial;}

 

 

 

2. על פי סוג האלמנט

 סלקטור זה יכלול את סוג האלמנט בלבד ונפעיל אותו על ידי שם האלמנט (h1,h2,ul,div, וכו'). למשל ניתן להגדיר צבע אדום עבור כל הכותרות הראשיות (h1) כך:

h1 {color: red;}

 

 

 

3. על פי Class

 כל האלמנטים בדף עם ה-class שנגדיר. נגדיר זאת על ידי שם ה-class כשלפניו יהיה התו . (נקודה), דוגמא להגדרה של פונט מודגש לכל אלמנט בדף עם ה class בשם myBoldItem:

.myBoldItem {font-weight: bold;}

 

 

 

4. לפי ה-Id

 סלקטור לבחירה של אלמנט עם ה- Id שנבחר (מכיוון שמבחינת חוקיות הדף ה-Id של האלמנט חייב להיות יחודי בדר"כ יהיה מדובר באלמנט יחיד בדף). יוגדר באמצעות התו # (סולמית) לפני ה-Id של האלמנט. למשל על מנת להגדיר שהאלמנט עם ה-Id בשם main יקבל צבע ירוק נכתוב כך:

#main {color: green;}

 

 

 

 

 

הערות

* ניתן לשלב עם האפשרויות השונות. למשל, הגדרה של צבע כחול לכל האלמנטים מסוג H1 וגם עם ה- class בשם blueHeader כך:

h1.blueHeader {color:blue;}

 

או של כל האלמנטים מסוג H2 עם ה-Id בשם myHeader:

h2#myHeader {color:blue;}

 

 

 

* על מנת להגדיר את אותו מאפייני עיצוב על אלמנטים שונים נפריד בינהם בפסיקים כך:

h1 , h2 {color:blue;}

 מה שיגרום לכך שכל h1 או h2 בדף, אפילו אם אין ביניהם שום קשר, יקבלו את הצבע הכחול

 

 

תאימות דפדפנים

האפשרות שמוצגות במאמר זה הן די בסיסיות ולכן הן נתמכות ברוב הדפדפנים:

Chrome 4+

Internet Explorer 7+

Firefox 2+

תגיות:

הוסף תגובה