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

אנשים רבים חדשים עיצוב אתרים ו- HTML / CSS להשתמש ו

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

משתמש ב
אלמנט

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

כדי להשתמש באלמנט div, פתח את החלון

לפני השטח של הדף שלך שאתה רוצה כמו חלוקה נפרדת, וסגירה

התג אחרי זה:

תוכן של div

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

id = "myDiv">

), או בורר מחלקות (למשל,

class = "bigDiv">
). לאחר מכן ניתן לבחור את שני המאפיינים הללו באמצעות CSS או לשנות באמצעות JavaScript. שיטות העבודה המומלצות הנוכחיות נוטות לכיוון באמצעות בוררי מחלקות במקום מזהים, בין השאר בגלל בחירת בוררי הזיהוי הספציפיים. למען האמת, עם זאת, אתה יכול להשתמש באחד או אפילו יכול לתת חלוקה הן ID ו selector בכיתה. כאשר להשתמש
נגד

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

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

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

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

משתמש ב אלמנט

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

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

טקסט מודגש טקסט לא מודגש.

תוסיף את ה

class = "סמן"
או מחלקה אחרת אל הרכיב span כדי לסדר את הטקסט ב- CSS (למשל,

class = "סמן">
). אלמנט span אין תכונות נדרשות, אבל שלושת כי הם השימושיים ביותר זהים לאלה של אלמנט div:

בסגנון

מעמד

id

השתמש ב- span כאשר ברצונך לשנות את סגנון התוכן מבלי להגדיר תוכן זה כמרכיב חדש ברמת החסימה במסמך.

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

זוהי הכותרת שלי Awesome