المغربي الجديد
21-03-2011, 01:54 AM
تعريف للوسوم span , div والفرق بينهم
حديثي بهذا الدرس عن وسم هو الأكثر شيوعاً في الإستخدام وجزء لا يتجزأ عندما تريد توزيع وتخطيط صفحتك عن طريق css
الوسم <div>
أحد أوسمه لغه html وهو إختصار للكلمة Division وتعنى تقسيم او توزيع ـ وعموما يستخدم هذا الوسم في الصفحات التى تعتمد في التنسيق على css لتقسيم الصفحات بدلاً من الجدوال ويكون بهذا الشكل لو حددنا به فقرة مثلا..
<div>
<p>مرحبا بكم</p>
</div>
ويصنف ضمن عناصر الـ 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>Untitled Document</title>
<style type="text/css">
<!--
p.blue { color: blue; }
.test { color: red; background: #CFEDFC; width:300px; }
-->
</style>
</head>
<body>
<div class="test">
<p class="blue">فصل محتويات الموقع عن التصميم</p>
<p class="blue">ضمان ظهور الموقع بشكل واحد على كافة المتصفحات</p>
<p>إضافة مزيد من الأحترافية والسهولة لتصميم المواقع</p>
</div>
</body>
</html>
شاهد على المتصفح ..
http://up.arabsgate.com/u/5114/4012/56372.jpg
اريدك الأن أن تلاحظ كيف أن عرض الـ div قد ظهر تأثيرة على الـ 3 فقرات وكذلك لون الخلفية .. تم تطبيق أمر التلوين الموجود بـ class الـ div المسمى بـ test على آخر فقرة فقط بينما الفقرتين الأخريين لم يطبق عليهم … والسبب يرجع الى ان الفقرات لها تعريف خاص بها بأمر تلوين أخر ولن تستجيب لأى تعديل بالـ div راجع درس مجموعات الأوسمة
الوسم <span>
الوسم أحد اوسمه لغه html ـ والأكثر إستخدما وشيوعاً مع الصفحات الإنسابيه css وغالباً مايستخدم فقط في النصوص لتحديد نص مثلا او للتلوين او لتميزية في فقرة مــا والصيغه تكون بهذا الشكل لو وضعنها بداخل فقرة.
<p>مزيد من<span>الإحترافية والسهولة</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>Untitled Document</title>
<style type="text/css">
<!--
p.blue { color: blue; }
.test { color: red; background: #CFEDFC; width:300px; }
.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>
شاهد على المتصفح ..
http://up.arabsgate.com/u/5114/4012/56373.jpg
كما ترى تم تطبيق أمر التلوين الموجود بـ class الموجود بداخل span على الكلمة المحاطة بها فقط دون التأثير على الأخرى ، ومن هذا يمكننا أن نستخدم ونستفيد من ذلك في العديد من التطبيقات داخل الفقرات بسهوله تامة وإحتراف.
حديثي بهذا الدرس عن وسم هو الأكثر شيوعاً في الإستخدام وجزء لا يتجزأ عندما تريد توزيع وتخطيط صفحتك عن طريق css
الوسم <div>
أحد أوسمه لغه html وهو إختصار للكلمة Division وتعنى تقسيم او توزيع ـ وعموما يستخدم هذا الوسم في الصفحات التى تعتمد في التنسيق على css لتقسيم الصفحات بدلاً من الجدوال ويكون بهذا الشكل لو حددنا به فقرة مثلا..
<div>
<p>مرحبا بكم</p>
</div>
ويصنف ضمن عناصر الـ 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>Untitled Document</title>
<style type="text/css">
<!--
p.blue { color: blue; }
.test { color: red; background: #CFEDFC; width:300px; }
-->
</style>
</head>
<body>
<div class="test">
<p class="blue">فصل محتويات الموقع عن التصميم</p>
<p class="blue">ضمان ظهور الموقع بشكل واحد على كافة المتصفحات</p>
<p>إضافة مزيد من الأحترافية والسهولة لتصميم المواقع</p>
</div>
</body>
</html>
شاهد على المتصفح ..
http://up.arabsgate.com/u/5114/4012/56372.jpg
اريدك الأن أن تلاحظ كيف أن عرض الـ div قد ظهر تأثيرة على الـ 3 فقرات وكذلك لون الخلفية .. تم تطبيق أمر التلوين الموجود بـ class الـ div المسمى بـ test على آخر فقرة فقط بينما الفقرتين الأخريين لم يطبق عليهم … والسبب يرجع الى ان الفقرات لها تعريف خاص بها بأمر تلوين أخر ولن تستجيب لأى تعديل بالـ div راجع درس مجموعات الأوسمة
الوسم <span>
الوسم أحد اوسمه لغه html ـ والأكثر إستخدما وشيوعاً مع الصفحات الإنسابيه css وغالباً مايستخدم فقط في النصوص لتحديد نص مثلا او للتلوين او لتميزية في فقرة مــا والصيغه تكون بهذا الشكل لو وضعنها بداخل فقرة.
<p>مزيد من<span>الإحترافية والسهولة</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>Untitled Document</title>
<style type="text/css">
<!--
p.blue { color: blue; }
.test { color: red; background: #CFEDFC; width:300px; }
.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>
شاهد على المتصفح ..
http://up.arabsgate.com/u/5114/4012/56373.jpg
كما ترى تم تطبيق أمر التلوين الموجود بـ class الموجود بداخل span على الكلمة المحاطة بها فقط دون التأثير على الأخرى ، ومن هذا يمكننا أن نستخدم ونستفيد من ذلك في العديد من التطبيقات داخل الفقرات بسهوله تامة وإحتراف.