פרק 18 - סוגי סלקטורים

סלקטור של אלמנטים

סלקטור לפי תעודת זהות(id)

סלקטור לפי קבוצה (class)

הסלקטורים כמו שהסברנו בעבר, הם 'קטגוריה׳/קבוצה של האלמנטים שאותה אנחנו בוחרים לעצב. 

עכשיו נלמד בדיוק איך מחליטים איזה קבוצה אנחנו רוצים לעצב. 

נזכר בדוגמא הראשונה שראינו בנושא:

‏‏צילום מסך (111)

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

יש לנו 3 סוגי סלקטורים בסיסיים, כלומר אנחנו יכולים לבחור את קבוצת האלמנטים שאנו נעצב, לפי 3 קטגוריות: 

  1. סלקטור של אלמנטים
  2. סלקטור לפי תעודת זהות(id)
  3. סלקטור לפי קבוצה (class) 

סלקטור לפי אלמנטים: 

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

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

‏‏צילום מסך (112)

סלקטור לפי id 

 

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

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

נראה דוגמא איך עושים זאת: 

נגדיר div עם id:

‏‏צילום מסך (113)

וכעת נגדיר את התכונות שלו באופן הבא:

‏‏צילום מסך (113)

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

סלקטור לפי class 

לפני שנתחיל ללמוד מה זה הסלקטור של class, אנו נלמד מה זה בכלל class. 

 

כאשר למדנו על id, דיברנו על כך שיש לנו אפשרות לתת לאלמנט מסוים id, תעודת זהות, שעם תעודת הזהות אני אוכל לזהות את האלמנט הספציפי הזה. 

לדוגמא אנו נשתמש בזה כאשר נגש לאלמנט דרך הDOM או דרך הסלקטור. 

 

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

בשביל זה יש את ה-class. האופן הפשוט לחשוב על class, זה פשוט הקבוצה שמאגדת בתוכה את כל האברים בעלי המכנה המשותף. לדוגמא את הכלבים אכניס לקבוצה dogs, ורכבים אכניס לקבוצה cars. עכשיו אני אוכל להגדיר את הסטייל של כל הקבוצה ביחד. (כמובן שאני אכניס את האברים לתוך class באופן שבו אוכל לעצב אותם בצורה הטובה ביותר. כלומר אם אכניס לדוגמא כלב לתוך קבוצה animal – זה קצת כללי מדי, כי יש המון חיות ולכל אחד יש תכונות שונות, וכן הלאה..)



בואו נראה רגע דוגמא שתבהיר את ההבדל בין id ל-class. 

 

לדוגמא, נגדיר 3 div-ים, שייצגו כלבים. מצד אחד, נרצה לשייך את כולם לקבוצה של הכלבים, ומצד שני, נרצה לתת לכל אחד מהם שם משלו על מנת שנוכל לזהות כל אחד מהם:

‏‏צילום מסך (114)

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

אז אני אוכל לעצב את הclass בצורה שתשפיע על כולם, ואז לעצב כל כלב באופן פרטני לפי התכונות שלו.  

 

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

‏‏צילום מסך (115)

הגדרנו שהכלב הראשון שקוראים לו charlie יהיה גם מהקבוצה של הכלבים, וגם מהקבוצה של הקטנים(small), לעומת זאת, הכלב השלישי daisy היא גם מהקבוצה של הכלבים, אבל גם מהקבוצה של הגדולים(big).

הערה: שימו לב שעל מנת להגדיר אלמנט כחלק מ2 קבוצות, נרשום אותם עם רווח ביניהם כמו בדוגמא.

 

אוקיי, זה היה פסקה קצת ארוכה אז בואו נעשה סיכומון:

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

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

 

 

קדימויות של סלקטורים

דבר אחרון שנשאר לנו לראות בפרק זה, הוא איך להגדיר את הסלקטור לפי הclass. 

הרעיון כמובן הוא ממש דומה ל2 הקטגוריות הקודמות. 

נזכיר שבשביל להגדיר סלקטור לפי אלמנט זה פשוט לכתוב את שם האלמנט לפני הסוגריים המסולסלות, ובשביל להגדיר סלקטור לפי id, זה להוסיף # לפני שם האלמנט. 

בשביל סלקטור לפי class, נכתוב '.' נקודה לפני השם:  

‏‏צילום מסך (116)

הגדרנו 3 פסקאות, אך 2 מהפסקאות הם חלק מהקבוצה oneword. 

כעת נגדיר להם עיצוב לפי הclass: 

‏‏צילום מסך (117)

כמו שאמרנו – נרשום ׳.׳ לפני השם של הclass. 



משימה: 

  1. יצרו פונקציה שיוצרת 10 div ונותנת להם class של כלב.
  2. תגדירו את הסטייל של כל הכלבים.
  3. יצרו פונקציה שקולטת מהמשתמש חיה שהוא מעוניין בה ויוצרת את החיה. למשל אפשר לתת למשתמש להחליט מבין 3 אפשרויות – כלב, חתול, חמור. ולפי הבחירה שלו לייצר זאת.
  4. בהמשך ל3, תיצרו תוכנית שמקבלת מהמשתמש כמה חיות הוא רוצה שיופיעו על הדף, לדוגמא אם בחרתם כלבים וחתולים, אז תשאלו כמה חתולים הוא רוצה, כמה כלבים, ולפי זה תצרו את ההdiv-ים. נסו להציג אותם בצורה מסודרת על הדף..
  5. צרו מעין ׳רשת חברתית׳, שמאפשרת לפרסם פוסטים. בקשו מהמשתמש את המלל לפוסט, ושאלו אותו שאלות רלוונטיות לסטייל, איזה צבע, איזה גודל וכו׳, ולפי זה תייצרו את האלמנט הרלוונטי, ותתנו לו את הסטייל הרלוונטי. 



סיכום

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

לפי זהות, לפי class, ולפי סוג אלמנט. 

כל הזכויות שמורות לבנימין טק

אבל עזבו זכויות, אנחנו בעיקר מרגישים מחוייבות לעודד פה בבנימין חדשנות ויזמות בראש קהילתי נעים ומזמין :)

Instagram Facebook

שלחו פרטים

וניצור איתכם קשר

שלחו פרטים

וניצור איתך קשר

שלחו פרטים

וניצור איתכם קשר

שאלה מעולה :)

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

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

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

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

מתוך ״ויקיפדיה״