גליונות סגנון מדורגים הגדר את מראה אלמנט דף האינטרנט על ידי התחברות לתכונות שאתה מחיל על אותו אלמנט. תכונות אלה יכולות להיות מזהה או מחלקה, וכמו כל התכונות, הן מוסיפות מידע מועיל לאלמנטים אליהם הם קשורים.
תלוי איזו תכונה אתה מוסיף לאלמנט, אתה יכול לכתוב בורר CSS כדי להחיל את ה- סגנונות חזותיים הכרחיים הדרושים להשגת המראה והתחושה של אותו אלמנט ואתר האינטרנט כשלם.
בעוד שמזהים או שיעורים עובדים במטרה להתחבר אליהם עם כללי CSS, עיצוב אתרים מודרני שיטות מעדיפות שיעורים על פני תעודות זהות, בין השאר משום שהן פחות ספציפיות וקלות יותר לעבוד איתן.
שיעור אחד או יותר בשיעורי CSS?
ברוב המקרים, אתה מקצה תכונה כיתתית יחידה לאלמנט, אך למעשה אינך מוגבל לשיעור אחד בלבד כפי שאתה עם תעודות זהות. אמנם אלמנט יכולה להיות רק מאפיין מזהה יחיד, אתה יכול להעניק לאלמנט כמה שיעורים, ובמקרים מסוימים פעולה זו תקל על עיצוב הדף שלך ועוד גָמִישׁ.
אם עליך להקצות מספר כיתות לאלמנט, הוסף את הכיתות הנוספות ופשוט להפריד ביניהן עם רווח בתכונה שלך.
לדוגמא, לפסקה זו יש שלוש מחלקות:
זה יהיה הטקסט של הפסקה
זה מגדיר את שלוש הכיתות הבאות בתג הפסקה:
- Pullquote
- מומלצים
- שמאלה
שימו לב לרווחים בין כל אחד מערכי הכיתה הללו. המרחבים האלה הם שמגדירים אותם כשיעורים שונים, בודדים. זו גם הסיבה לכך ששמות כיתות לא יכולים להכיל רווחים מכיוון שדבר זה יגדיר אותם ככיתות נפרדות.
ברגע שיש לך את ערכי הכיתה שלך HTML, לאחר מכן תוכל להקצות אלה כשיעורים ב- CSS שלך ולהחיל את הסגנונות שתרצה להוסיף. לדוגמה.
.pullquote {... }
.מומלצים {... }
עמ 'שמאלה {... }
בדוגמאות אלה, זוגות ההצהרות והערכים של CSS מופיעים בתוך הפלטה המתולתלת, וכך יחולו סגנונות אלה על הבורר המתאים.
אם אתה הגדר כיתה לאלמנט ספציפי (לדוגמה, עמ 'שמאל), אתה עדיין יכול להשתמש בו כחלק מרשימת השיעורים; עם זאת, שים לב שזה ישפיע רק על אותם אלמנטים שצוינו ב- CSS. במילים אחרות, ה עמ 'שמאל סגנון יחול רק על פסקאות עם מחלקה זו מכיוון שהבורר שלך אומר להחיל אותה על "פסקאות עם ערך מחלקה של שמאלה, "לעומת זאת, שני הסלקטורים האחרים בדוגמה אינם מציינים אלמנט מסוים, ולכן הם יחולו על כל אלמנט המשתמש בערכי המחלקה הללו.
שיעורים מרובים, סמנטיקה ו- JavaScript
יתרון נוסף בשימוש בכמה שיעורים הוא בכך שהוא מגדיל את אפשרויות האינטראקטיביות.
החל מחלקות חדשות על אלמנטים קיימים באמצעות JavaScript מבלי להסיר אף אחת מהשיעורים הראשוניים. אתה יכול גם להשתמש בשיעורים כדי להגדיר את סמנטיקה של אלמנט - הוסף מחלקות נוספות כדי להגדיר את משמעות האלמנט הזה מבחינה סמנטית. גישה זו היא כיצד מיקרו פורמטים עובד.
יתרונות הכיתות המרובות
ריבוד של מספר כיתות יכול להקל על הוספת אפקטים מיוחדים לאלמנטים מבלי ליצור סגנון חדש לגמרי לאלמנט זה.
לדוגמה, כדי לצוף אלמנטים שמאלה או ימינה, אתה יכול לכתוב שתי כיתות:
שמאלה.
ו.
ימין.
עם רק.
לצוף: שמאלה;
ו.
לצוף: מימין;
בהם. ואז, בכל פעם שהיה לך אלמנט שאתה צריך לרחף שמאלה, היית פשוט מוסיף את הכיתה "שמאלה" לרשימת הכיתות שלה.
יש כאן קו דק ללכת. זכור כי תקני האינטרנט מכתיבים את ההפרדה בין הסגנון והמבנה. המבנה מטופל באמצעות HTML בעוד הסגנון נמצא ב- CSS. אם מסמך ה- HTML שלך מלא באלמנטים שלכולם שמות כיתות כמו "אדום" או "שמאל", שהם שמות להכתיב כיצד אלמנטים צריכים להיראות ולא מה הם, אתה חוצה את הגבול בין מבנה לסגנון.
חסרונות של מספר כיתות
החיסרון הגדול ביותר בשימוש בכמה שיעורים בו זמנית על האלמנטים שלך הוא שזה יכול לגרום להם להיות מעט מסורבלים להסתכל ולנהל לאורך זמן. יתכן שיהיה קשה לקבוע אילו סגנונות משפיעים על אלמנט ואם תסריטים כלשהם משפיעים עליו. רבות מהמסגרות הקיימות כיום, כמו Bootstrap, עושות שימוש רב באלמנטים עם מספר כיתות. קוד זה יכול לצאת משליטה וקשה לעבוד איתו מהר מאוד אם אתה לא נזהר.
כאשר אתה משתמש בכמה מחלקות, אתה גם מסתכן בסגנון של מחלקה אחת שתעקוף את הסגנון של אחרת. התנגשות זו עשויה להקשות על הסיבה מדוע לא מיישמים את הסגנונות שלך גם כשנראה שהם צריכים. הישאר מודע לספציפיות, אפילו עם התכונות המיושמות לאותו אלמנט.
על ידי שימוש בכלי כמו כלי מנהלי האתרים ב- Google Chrome, תוכל לראות ביתר קלות כיצד השיעורים שלך משפיעים על הסגנונות שלך ולהימנע מבעיה זו של סגנונות ותכונות סותרות.