Divs و يمتد غير قابلة للتبديل في بناء صفحات الويب. يخدم كل منها أغراضًا مختلفة ، وستساعدك معرفة وقت استخدام كل منها على تطوير مواقع ويب نظيفة وسهلة الإدارة.
استخدام عنصر Div
Divs تحديد التقسيمات المنطقية على صفحة الويب الخاصة بك. أ شعبة- قصير للقسمة - هو في الأساس صندوق يمكنك وضع الآخرين فيه عناصر HTML التي تنتمي معًا. يمكن أن يحتوي القسم على عناصر أخرى متعددة ، مثل الفقرات والعناوين والقوائم والروابط والصور وما إلى ذلك. يمكن أن تحتوي حتى على أقسام أخرى بداخلها لتوفير هيكل وتنظيم إضافي.
لاستخدام ال شعبة عنصر ، ضع ملفًا مفتوحًا علامة قبل منطقة صفحتك التي تريدها كتقسيم منفصل وإغلاق
محتويات div
إذا كنت ستصمم هذه المنطقة باستخدام CSS ، فيمكنك إضافة ملف هوية شخصية محدد علامة div الافتتاحية:
أو يمكنك إضافة محدد فئة:
يمكنك بعد ذلك العمل مع هذه العناصر في CSS أو JavaScript.
تميل أفضل الممارسات الحالية إلى استخدام محددات الفئة بدلاً من المعرفات ، ويرجع ذلك جزئيًا إلى كيفية محددات المعرفات المحددة. ومع ذلك ، فإن أيًا منهما مقبول ، ويمكنك حتى إعطاء ملف شعبة كل من معرف ومحدد فئة.
Divs أو الأقسام؟
ال شعبة يختلف العنصر عن HTML5القطاع الثامن لأنه لا يعطي المحتوى المرفق أي معنى دلالي. إذا لم تكن متأكدًا مما إذا كان حظر المحتوى يجب أن يكون بتنسيق شعبة أو أ القطاع الثامن، فكر في الغرض من العنصر والمحتوى.
- إذا كنت بحاجة إلى العنصر ببساطة لإضافة أنماط إلى تلك المنطقة من الصفحة ، فيجب عليك استخدام امتداد شعبة جزء.
- إذا كان المحتوى له تركيز مميز ويمكن أن يقف من تلقاء نفسه ، ففكر في استخدام القطاع الثامن بدلا من ذلك.
في النهاية ، كلاهما divs و أقسام تتصرف بشكل مشابه ، ويمكنك إعطاء أي منهما سمات وتصميمها باستخدام CSS. كلاهما عناصر على مستوى الكتلة.
باستخدام Spans
امتداد هو عنصر مضمن بشكل افتراضي ، على عكس شعبة و القطاع الثامن عناصر. ال امتداد يُستخدم العنصر عادةً في التفاف جزء معين من المحتوى مثل النص لمنحه رابطًا إضافيًا يمكنك استخدامه لإضافة أنماط. بدون أي سمات نمط ، ومع ذلك ، امتداد ليس له أي تأثير على النص على الإطلاق.
اختلاف آخر بين امتداد و شعبة العناصر هي أن شعبة يتضمن العنصر فاصل فقرة ، في حين أن امتداد يخبر العنصر المتصفح فقط بتطبيق قواعد نمط CSS المرتبطة على ما يحيط بامتداد العلامات:
نص مميز والنص غير المميز.
يمكنك إضافة.
فئة = "تسليط الضوء"
أو ما شابه ذلك امتداد عنصر لتصميم النص باستخدام CSS.
لا يحتوي عنصر الامتداد على سمات مطلوبة ، ولكن العناصر الثلاثة الأكثر فائدة هي نفسها الموجودة في شعبة جزء:
- نمط
- صف دراسي
- هوية شخصية
يستخدم امتداد عندما تريد تغيير نمط المحتوى دون تحديد هذا المحتوى كمحتوى جديد عنصر على مستوى الكتلة في المستند.
على سبيل المثال ، إذا كنت تريد الكلمة الثانية من ملف h3 متجهًا إلى اللون الأحمر ، يمكنك إحاطة هذه الكلمة بامتداد امتداد عنصر من شأنه أن يجعل تلك الكلمة كنص أحمر. الكلمة لا تزال جزءًا من h3 ولكن سيتم عرضه باللون الأحمر.