دعم أحلى منتدى

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

منتدى الدعم و المساعدة لأحلى المنتديات :: أحلى منتدى ::   :: التقنيات المتقدمة :: تقنيات أخرى

اذهب الى الأسفل

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

مُساهمة من طرف YasirAyad الثلاثاء 31 مارس 2015 - 23:58

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

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

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

ويكون بهذا الشكل لو حددنا به فقرتين مثلا ..
شرح وسم <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">
<!--
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>

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

شرح وسم <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">
<!--
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>


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

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

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

ذكر
عدد المساهمات : 10113
معدل النشاط : 15312
السُمعة : 297

http://yasirayad.com/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

الرجوع الى أعلى الصفحة

- مواضيع مماثلة

منتدى الدعم و المساعدة لأحلى المنتديات :: أحلى منتدى ::   :: التقنيات المتقدمة :: تقنيات أخرى

 
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى