שימוש בסגנון מחלקות ומזהים

שיעורים ותעודות זהות עזרה הרחבת ה- CSS שלך

בניית אתרים באינטרנט של היום דורש הבנה עמוקה של CSS (גיליונות סגנון מדורגים). אלה ההוראות שאתה נותן לאתר כדי לקבוע איך זה יהיה פריסת בחלון הדפדפן. אתה מחיל סדרה של "סגנונות" למסמך HTML אשר תיצור את המראה והתחושה של דף האינטרנט שלך.

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

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

מחלקות מחלקה

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

p {color: # 0000ff; }
p.alert {color: # ff0000; }

סגנונות אלה יגדירו את הצבע של כל הפיסקאות לכחול (# 0000ff), אך כל פסקה עם מאפיין מחלקה של "התראה" תוצג במקום באדום (# ff0000). הסיבה לכך היא שלתכונה class יש סגוליות גבוהה יותר מאשר כלל CSS הראשון, המשתמש בבורר תגים בלבד.

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

הנה איך זה יכול לשמש בסימון HTML:

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

סעיף זה יהיה גם בכחול.

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

בדוגמה זו, הסגנון של "p.alert" יחול רק על אלמנטים פסקה המשתמשים בכיתה "התראה". אם אתה רוצה להשתמש בכיתה זו על פני רכיבי HTML מרובים, פשוט תסיר את רכיב HTML מתחילת (רק כדי להיות בטוח לעזוב את התקופה (.) במקום), ככה:

.alert {background-color: # ff0000;}

מחלקה זו זמינה כעת לכל רכיב שזקוק לה. כל פיסת HTML שיש לה ערך של מחלקה של "התראה" תקבל כעת סגנון זה. ב- HTML למטה, יש לנו גם פסקה וגם כותרת כותרת 2 המשתמשות בכיתה "התראה". לשניהם יש רקע צבעי אדום המבוססים על ה- CSS שהראינו.

סעיף זה יהיה כתוב באדום.

וגם h2 זה יהיה אדום.

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

בוררי זיהוי

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

אתה יכול לתת חלוקה זו תכונה מזהה של "אירוע", ואז אם אתה רוצה מתאר את החלוקה עם 1 פיקסל שחור רחב הגבול אתה כותב קוד זיהוי כזה:

#event {border: 1px solid # 000; }

האתגר עם בוררי הזיהוי הוא שלא ניתן לחזור עליהם במסמך HTML. הם חייבים להיות ייחודיים (תוכל להשתמש באותו מזהה במספר דפים באתר שלך, אך רק פעם אחת בכל מסמך HTML בודד). אז אם היו לך 3 אירועים שכל זה היה צריך את הגבול הזה, היית צריך לתת להם תכונות מזהה של "event1", "event2" ו "event3" וסגנון כל אחד מהם. זה יהיה, ולכן, להיות הרבה יותר קל להשתמש המאפיין בכיתה הנ"ל של "אירוע" וסגנון כולם בבת אחת.

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

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

אתה פשוט להוסיף את הערך של תכונה, קודמת על ידי # סמל, לתכונה href של הקישור, כך:

זהו הקישור

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

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

מאמר מקורי מאת ג'ניפר קרינין. בעריכת ג'רמי ג'ירארד ב -8 / 9/17