מה ההבדל בין מחלקת בורר CSS לבין מזהה? id ושימוש בכיתה ב-HTML

מה ההבדל בין מחלקת בורר CSS לבין מזהה? id ושימוש בכיתה ב-HTML

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

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

אז, רשום וסכם את ההבדל והשימוש במזהה בורר CSS ובכיתה כאן:

  • מזהה תואם ל-#div
  • מחלקה תואמת ל-.div

ההבדל בין מזהה למחלקה

תיאור מזהה

  • id הוא תג קבוע, המשמש להגדרת הסגנון הגדול יותר בדף האינטרנט, המוגדר בצורה של #div
  • לדוגמה: חלוקת עמודות, למעלה, גוף, תחתון וכו'...
  • משמש להגדרת אלמנט מסוים, שיכול להופיע רק פעם אחת בכל עמוד ולא ניתן לקרוא אותו שוב ושוב.

תיאור הכיתה

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

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

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

מה זה בורר?

ההגדרה של כל סגנון CSS מורכבת מ-2 חלקים:

选择器 {样式}
  • החלק שלפני ה-{} הוא ה"בורר".
  • ה"בורר" מציין את ה"סגנון" של {} אליו הוא פועל.
  • כלומר, באיזה אלמנט בדף האינטרנט פועל ה"סגנון" הזה?

דוגמה לקוד

הנה איך לבחור ולעצב אלמנט class="sidebar":

.sidebar
{ 
background-color:black;
}

הנה איך לבחור ולעצב אלמנט עם id="footer":

#footer
{ 
background-color:black;
}

Hope Chen Weiliang בלוג ( https://www.chenweiliang.com/ ) shared "מה ההבדל בין מחלקת בורר CSS למזהה? השימוש במזהה ובכיתה ב-HTML" יעזור לך.

מוזמנים לשתף את הקישור של מאמר זה:https://www.chenweiliang.com/cwl-572.html

ברוכים הבאים לערוץ הטלגרם של הבלוג של Chen Weiliang כדי לקבל את העדכונים האחרונים!

🔔 היה הראשון לקבל את "מדריך השימוש בכלי AI של ChatGPT Content Marketing" בספרייה העליונה של הערוץ! 🌟
📚 המדריך הזה מכיל ערך עצום, 🌟זו הזדמנות נדירה, אל תפספסו אותה! ⏰⌛💨
שתפו ותעשו לייק אם בא לכם!
השיתוף והלייקים שלך הם המוטיבציה המתמשכת שלנו!

 

发表 评论

כתובת האימייל שלך לא תפורסם. 必填 项 已 用 * תווית

גלול למעלה