שימוש באלמנטים Span ו- Div HTML עם CSS בעיצוב אתרים

 תייג אחרי זה:

תוכן של div

אם תעצב את האזור הזה באמצעות CSS, תוכל להוסיף תְעוּדַת זֶהוּת בורר לתג div הפותח:

לחלופין, תוכל להוסיף בורר כיתות:

לאחר מכן תוכל לעבוד עם אלמנטים אלה ב- CSS או ב- JavaScript.

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

מחלקות או קטעים?

ה div אלמנט שונה מ HTML5סָעִיף כיוון שהוא אינו מעניק לתוכן הסגור שום משמעות סמנטית. אם אינך בטוח אם גוש התוכן צריך להיות א

div או א סָעִיף, חשבו על מטרת האלמנט והתוכן.

• אם אתה זקוק לאלמנט פשוט כדי להוסיף סגנונות לאזור זה של הדף, עליך להשתמש ב- div אֵלֵמֶנט.
• אם לתוכן יש מיקוד מובהק ויכול לעמוד בפני עצמו, שקול להשתמש ב- סָעִיף אלמנט במקום.

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

שימוש בטווחים

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

הבדל נוסף בין לְהַקִיף ו div האלמנטים הם שה- div אלמנט כולל מעבר פסקה, ואילו לְהַקִיף אלמנט רק אומר לדפדפן להחיל כללי סגנון CSS משויכים למה שמוקף על ידי תגיות:

טקסט מודגש  וטקסט שאינו מודגש.

אתה יכול להוסיף.

class = "highlight"

או דומה ל- לְהַקִיף אלמנט לעיצוב הטקסט באמצעות CSS.

לאלמנט ה- span אין מאפיינים נדרשים, אך השלושה שהם השימושיים ביותר זהים לאלה של ה- div אֵלֵמֶנט:

• סִגְנוֹן
• מעמד
• תְעוּדַת זֶהוּת

להשתמש לְהַקִיף כשאתה רוצה לשנות את סגנון התוכן מבלי להגדיר את התוכן כחדש אלמנט ברמת הבלוק במסמך.

לדוגמה, אם אתה רוצה את המילה השנייה של h3 בכיוון שיהיה אדום, אתה יכול להקיף את המילה הזו עם לְהַקִיף אלמנט שיעצב את המילה כטקסט אדום. המילה עדיין נותרה חלק מה- h3 אלמנט, אך יוצג באדום.