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

اقدم لكم درس مبسط حول الوسمين شرح وسم

والوسم والفرق بينهم

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

ويكون بهذا الشكل لو حددنا به فقرتين مثلا ..

تكبير الصورة معاينة الأبعاد الأصلية.
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

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

تابع فى هذا المثال ـ يوجد 3 فقرات وقد وضعت فئه class لإثنين منهم بإسم blue معرّف بها لون للخط أزرق والفقرة الأخيرة بدون ـ ثم قمت بوضع وسم جديد يحتوى على الـ 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"><!--p.blue { color:blue; }.test { color: red; background: #CFEDFC; width: 370px; }--></style> </head><body> <div class="test"><p class="blue">شرح وسم الديف على المنتديات احلى منتدى</p><p class="blue">ضمان ظهور الموقع بشكل واحد على كافة المتصفحات والأجهزة أخرى</p><p>إضافة مزيد من الأحترافية والسهولة لتصميم المواقع</p></div> </body></html>

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

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
اريدك الأن أن تلاحظ كيف أن عرض الـ

قد ظهر تأثيرة على الـ 3 فقرات وكذلك لون الخلفية .. تم تطبيق أمر التلوين الموجود بـ class الـ

المسمى بـ test على آخر فقرة فقط بينما الفقرتين الأخريين لم يطبق عليهم ... والسبب يرجع الى ان الفقرات لها تعريف خاص بها بأمر تلوين أخر ولن تستجيب لأى تعديل بالـ

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

الكود: ---------تضليل المحتوى

الكود:

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

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

الكود: ---------تضليل المحتوى

الكود:

<!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"><!--p.blue { color:blue; }.test { color: red; background: #CFEDFC; width: 370px; }.in { color: #00CC33; }--></style> </head><body> <div class="test"> <p class="blue">شرح وسم السبان على المنتديات احلى منتدى</p><p class="blue">ضمان ظهور الموقع بشكل واحد على كافة المتصفحات والأجهزة أخرى</p><p>إضافة مزيد من <span class="in">الأحترافية والسهولة</span> لتصميم المواقع</p> </div> </body></html>

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

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