כשנרצה לעצב או להוסיף יכולות מסויימות לאלמנט נצטרך לגשת אליו.
איך ניגש אליו?
באמצעות סלקטור שמיוחד בשבילו, כך נדע שהעיצוב שלנו יחול דווקא עליו.
יש שני מאפיינים שניתן לגשת על ידם. class ו – ID.
מה ההבדל בינהם?
ID – מזהה ייחודי, לכל אלמנט יש ID אחד בלבד! ולא יכולים להיות שני IDים זהים באותו עמוד.
Class (מחלקה) – המזהה לא חייב להיות ייחודי, לכל אלמנט יכולים להיות כמה Classים ויכולים להיות כמה Classים זהים בעמוד.
איך נדע מה ה – Class או ה – ID של אלמנט מסויים?
ניגש לעמוד שבו הוא נמצא, נלחץ לחיצה ימנית על האלמנט > בדוק.
ייפתח לנו כלי המפתחים של הדפדפן. בכלי המפתחים ניתן לצפות בקבצי הקוד של האתר, בביצועים, בשגיאות באתר (אם קיימות) ועוד..
כלי המפתחים בדפדפן כרום:
אפרט כמה דברים שימושיים בכלי המפתחים:
עכשיו מה שנותר לנו הוא להבין מה ה- class או ה-ID של אלמנט מסויים.
כמו שאמרנו בסעיף 6. אם נעמוד ממש על האלמנט שאנחנו מחפשים ונלחץ על הפלוס – יופיע לנו ה-class כבר רשום ונוכל להעתיק אותו.
הדרך השניה היא לגשת לאלמנט ולראות איפה רשום לנו class = "…." התוכן שיהיה שם – הוא הקלאס.
אותו דבר בעניין ID.
דוגמא לקלאס:
הקלאס של אלמנט הפלוס שבחרתי הוא elementor-icon.
a זו תגית קישור. כיוון שהפלוס שבחרתי משמש כקישור לעמוד מסויים באתר.
דוגמא ל- ID:
איך נקרא תכל'ס לאלמנט שלנו באמצעות CSS?
אם נרצה לקרוא באמצעות Class – נשים את שם הקלאס ולפניו נקודה.
אם נרצה באמצעות ID – נשים את ה-ID ולפניו #.
יש אפשרות גם להחיל CSS על תגית מסויימת כמו תגית a , span, div וכדו'…
כדי להחיל CSS על תגית – נכתוב פשוט את שמה ללא כל קידומת.
אם נרצה קוד מסויים שיחול על כמה תגיות, אין צורך לכתוב את כל המקטע פעמיים, פשוט נכתוב את התגיות מופרדות בפסיקים.
(כנ"ל גם בכמה classים או כמה IDים).
לדוגמא:
#thisIsId {
width: 100px;
height: 50px;
}
.this_is_class {
width: 100px;
height: 50px;
}
a , span{
font-size: 17px;
}
הטמעת CSS באלמנטור:
אם ה-CSS עבור אלמנט בודד – נלך בעריכת אלמנט אל מתקדם > CSS מותאם ונניח שם את הקוד.
אם עבור אזור מסויים – נבחר את האזור > מתקדם > CSS מותאם.
אם עבור העמוד הנוכחי – נלך אל אייקון ההגדרות בתחתית חלונית העריכה > מתקדם > CSS מותאם.
אם עבור האתר כולו – נלך אל לוח הבקרה > עיצוב > התאמה אישית > CSS מותאם.
במידה ונרצה ש-CSS מסויים יחול רק על האובייקט הנוכחי שבו בחרתי שיחול נכתוב לפני הקלאס או ה-ID את המילה selector. כך נוודא שבמידה ויש עוד קלאסים בשם זהה – לא נחיל את השינויים גם עליהם בטעות.
בהצלחה!