בניית אתרים מעוצבים היטב באינטרנט של היום דורשת הבנה מעמיקה של גליונות סגנון מדורגים. החל סדרה של סגנונות CSS על מסמך ה- HTML שלך כדי ליידע את המראה והתחושה של דף האינטרנט שלך.
תכונות מחלקה ותעודת זהות
לפעמים מעצבים חייבים להחיל סגנון בלבד כמה של האלמנטים במסמך, אך לא כל המקרים של אותו אלמנט. כדי להשיג סגנונות רצויים אלה, השתמש ב מעמד ו תְעוּדַת זֶהוּת תכונות HTML. תכונות אלה הן תכונות גלובליות החלות כמעט על כל אחת מהן תג HTMLבין אם אתה מעצב חלוקות, פסקאות, קישורים, רשימות או כל אחד מפיסות ה- HTML האחרות במסמך שלך, תוכל לפנות למאפייני מחלקה ומזהה שיעזרו לך לבצע את המשימה הזו!
בוחרי כיתות
בורר הכיתות מגדיר מספר סגנונות לאותו אלמנט או תג במסמך. לדוגמה, כדי לקרוא קטעים מסוימים בטקסט בצבע שונה כהתראה, הקצה את הפסקאות שלך לשיעורים כאלה:
p {color: # 0000ff; }
p.alert {color: # ff0000; }
סגנונות אלה יקבעו את הצבע שלאת כל פסקאות לכחול (# 0000ff), אך כל פיסקה עם מאפיין class של עֵרָנִי במקום זאת על ידי סגנון באדום (# ff0000). הסיבה לכך היא שלמאפיין class יש ספציפיות גבוהה יותר מאשר כלל ה- CSS הראשון, המשתמש רק בבורר תגיות. כשעובדים עם
CSS, כלל ספציפי יותר יעקוף כלל פחות ספציפי. אז בדוגמה זו, הכלל הכללי יותר קובע את הצבע של כל הפסקאות, אך הכלל השני, הספציפי יותר מאשר עוקף את ההגדרה רק בחלק מהפסקאות.כך ניתן להשתמש בסימון HTML כלשהו:
פסקה זו תוצג בכחול, וזה ברירת המחדל של הדף.
פסקה זו תהיה גם בכחול.
ופסקה זו תוצג באדום מכיוון שתכונת class תדרוס את הצבע הכחול הסטנדרטי מהעיצוב של בורר האלמנטים.
בדוגמה זו, הסגנון של עמ 'התראה יחול רק על אלמנטים בפסקה המשתמשים בכך עֵרָנִי מעמד. כדי להשתמש במחלקה זו בכמה אלמנטים של HTML, הסר את רכיב ה- HTML מתחילת שיחת הסגנון, כך:
.alert {רקע-צבע: # ff0000;}
מחלקה זו זמינה כעת לכל אלמנט הזקוק לה. כל קטע מ- HTML שלך בעל ערך המאפיין class של עֵרָנִי עכשיו יקבל את הסגנון הזה. ב- HTML שלמטה, יש לנו גם פיסקה וגם כותרת דרגה שתיים המשתמשות ב- עֵרָנִי מעמד. שניהם מציגים צבע רקע אדום:
פסקה זו תיכתב באדום.
באתרים כיום, לעתים קרובות משתמשים בתכונות מחלקה ברוב האלמנטים מכיוון שקל יותר לעבוד איתם מנקודת מבט ספציפית מאשר מזהים. תוכלו למצוא את עמודי ה- HTML העדכניים ביותר שיש למלא בתכונות כיתות, חלקן חוזרות על עצמן במסמך ואחרות שעשויות להופיע פעם אחת בלבד.
בוחרי תעודת זהות
תעודת הזהות בוחר שם סגנון ספציפי מבלי לשייך אותו לתג או אחר אלמנט HTML.
נניח חלוקה בסימון ה- HTML שלך המכיל מידע על אירוע. אתה יכול לתת לחלוקה הזו מאפיין תעודת זהות שֶׁל מִקרֶהואז מתאר את החלוקה בגבול שחור ברוחב 1 פיקסל:
# אירוע {גבול: 1px מוצק # 000; }
האתגר עם בוחרי תעודת זהות הוא שלא ניתן לחזור עליהם במסמך HTML. הם חייבים להיות ייחודיים (אתה יכול להשתמש באותו מזהה בכמה עמודים באתר שלך, אך רק פעם אחת בכל מסמך HTML נפרד). אז בשלושה אירועים שכולם זקוקים לגבול זה, עליכם לזהות תכונות מזהה של אירוע 1, אירוע 2, ו אירוע 3 ולעצב כל אחד מהם. לכן יהיה הרבה יותר קל להשתמש במאפיין הכיתה הנ"ל מִקרֶה ולעצב את כולם בבת אחת.
סיבוכים של מאפייני תעודת זהות
אתגר נוסף עם תכונות מזהה הוא שיש להם סגוליות גבוהה יותר מאשר תכונות מחלקה. כדי לבטל סגנון שנקבע בעבר, זה יכול להיות קשה לעשות זאת אם הסתמכת יותר מדי על תעודות זהות. מפתחי אתרים רבים התרחקו מ- שימוש במזהים בסימון שלהם, גם אם הם מתכוונים להשתמש בערך זה פעם אחת בלבד, ובמקום זאת פנו לתכונות המחלקה הפחות ספציפיות עבור כמעט כולם סגנונות.
האזור היחיד שבו תכונות זיהוי אכן נכנסות לפעולה הוא כאשר ברצונך ליצור דף המכיל קישורי עיגון בתוך הדף. לדוגמא, שקול אתר בסגנון פרלקסה המכיל את כל התוכן בעמוד יחיד עם קישורים ה"מקפצים "לחלקים שונים של אותו דף. תכונות מזהה וקישורי טקסט משתמשים בקישורי עוגן אלה. הוסף את הערך של המאפיין הזה, לפניו ה- # סמל, ל href תכונה של הקישור, כך:
זה הקישור
כשלוחצים עליו או נוגעים בו, קישור זה קופץ לחלק של הדף שמכיל את תכונת הזהות הזו. אם אף אלמנט בדף אינו משתמש בערך מזהה זה, הקישור לא יעשה דבר.
כדי ליצור קישור בדף באתר, יידרש שימוש בתכונות מזהה, אך עדיין תוכלו לפנות לשיעורים למטרות עיצוב CSS כלליות. כך מעצבים היום דפים - הם משתמשים בבחירת כיתות ככל האפשר ופונים לתעודות זהות רק כאשר הם זקוקים לתכונה כדי לשמש לא רק וו עבור CSS אלא גם כקישור בדף.