شرح وسم <div> والوسم <span> والفرق بينهم

السلام عليكم وحمة الله وبركاتة

اقدم لكم درس مبسط حول الوسمين شرح وسم <div> والوسم <span> والفرق بينهم

1 ) الوسم Div أحد أوسمه لغه html وهو إختصار للكلمة Division وتعنى تقسيم او توزيع ـ وعموما يستخدم هذا الوسم في الصفحات التى تعتمد في التنسيق على css لتقسيم الصفحات بدلاً من الجدوال.

ويكون بهذا الشكل لو حددنا به فقرتين مثلا ..
شرح وسم <div> والوسم <span> والفرق بينهم Css03610

شرح وسم <div> والوسم <span> والفرق بينهم Css03610

ويصنف ضمن عناصر الـ Block Elements ويتميز ان المتصفح يفهمه بسرعه ويعرض محتوياته مباشرة بدون إنتظار تحميلة بالكامل عكس الجدوال بالإضافة انك يمكنك التحكم بكل div بشكل منفصل وتعطى لها خصائص عرض خاصة.

تابع فى هذا المثال ـ يوجد 3 فقرات وقد وضعت فئه class لإثنين منهم بإسم blue معرّف بها لون للخط أزرق والفقرة الأخيرة بدون ـ ثم قمت بوضع وسم <span> جديد يحتوى على الـ 3 فقرات وبه class آخر يحتوى على العرض الكلي ولون للخط أحمر وكذلك لون للخلفية.

الكود:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="rtl"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS الأنماط الإنسابية</title> <style type="text/css">  </style> </head> <body> <div class="test"> <p class="blue">شرح وسم الديف على المنتديات احلى منتدى</p> <p class="blue">ضمان ظهور الموقع بشكل واحد على كافة المتصفحات والأجهزة أخرى</p> <p>إضافة مزيد من الأحترافية والسهولة لتصميم المواقع</p> </div> </body> </html>

شاهد على المتصفح ..

شرح وسم <div> والوسم <span> والفرق بينهم 2015-014

اريدك الأن أن تلاحظ كيف أن عرض الـ <div> قد ظهر تأثيرة على الـ 3 فقرات وكذلك لون الخلفية .. تم تطبيق أمر التلوين الموجود بـ class الـ <div> المسمى بـ test على آخر فقرة فقط بينما الفقرتين الأخريين لم يطبق عليهم ... والسبب يرجع الى ان الفقرات لها تعريف خاص بها بأمر تلوين أخر ولن تستجيب لأى تعديل بالـ <div> .

الوسم <span>
الوسم أحد اوسمه لغه html ـ والأكثر إستخدما وشيوعاً مع الصفحات الإنسابيه css وغالباً مايستخدم فقط في النصوص لتحديد نص مثلا او للتلوين او لتميزية في فقرة مــا والصيغه تكون بهذا الشكل لو وضعنها بداخل فقرة.

الكود:: <p>إضافة مزيد من <span class="in">الأحترافية والسهولة</span> لتصميم المواقع</p>

والوسم يصنف ضمن عناصر الـ Inline Elements لذا لن تجد اى أختلاف او إنحراف على الفقرة لو اضفت الوسم <span> لكلمه أو جمله منها.

الكود:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="rtl"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS الأنماط الإنسابية</title> <style type="text/css">  </style> </head> <body> <div class="test"> <p class="blue">شرح وسم السبان على المنتديات احلى منتدى</p> <p class="blue">ضمان ظهور الموقع بشكل واحد على كافة المتصفحات والأجهزة أخرى</p> <p>إضافة مزيد من <span class="in">الأحترافية والسهولة</span> لتصميم المواقع</p> </div> </body> </html>

شاهد على المتصفح ..

شرح وسم <div> والوسم <span> والفرق بينهم 2015-015

كما ترى تم تطبيق أمر التلوين الموجود بـ class الموجود بداخل <span> على الكلمة المحاطة بها فقط دون التأثير على الأخرى ، ومن هذا يمكننا أن نستخدم ونستفيد من ذلك في العديد من التطبيقات داخل الفقرات بسهوله تامة وإحتراف.

في حال لديك استفسار لا تتردد في فتح موضوعك في قسم دعم مشاكل التومبلايت و الأكواد
Cool

تحياتي لكم
new.moon