- الوسم <Div> أحد أوسمه html وهو إختصار للكلمة Division وتعنى تقسيم او توزيع ـ وعموما يستخدم هذا الوسم بالصفحات التى تعتمد في التنسيق على css لتقسيم الصفحات والمحتويات الى أجزاء منفصلة بدلاً من الجدوال ..
ويكون بهذا الشكل لو حددنا به فقرة مثلا :
كود HTML:
<div>
<p>Welcome</p>
</div>
كود HTML:
<div class="style">
<p>Welcome</p>
</div>
اى انه لو كتب بهذا الشكل مثلا ..
كود HTML:
<div>xxxxxxxxx</div>
<div>xxxxxxxxx</div>
<div>xxxxxxxxx</div>
عكس ذلك الأوسمة التى تنتمي الى Inline Elements .. ولها نفس التعريف السابق ولكنها تأخذ الوضع الأفقي بالتجانب ومثال على ذلك الوسم <span> والأوسمة <b> و <i> والوصلات <a> ..... مثال :
كود HTML:
<span>xxxxxxxxx</span>
<span>xxxxxxxxx</span>
<span>xxxxxxxxx</span>
وعن طريق اوامر css يمكننا ان نتحكم فى تلك العناصر والتغير من خصائصها بتحويلها من inline الى block والعكس ـ إذا كان الوسم ينتمي الى فئه أخرى وحسب ماتحتاج لتوزيع موقعك
والوسم <div> متعدد الإستخدام اى انه يمكن ان تدرج به مباشرة نصوص او صور وغيرها الكثير ...
ولكن مع كل هذا لا يفضل أبداً إستخدامه بغير مكانة أو الإسراف بوضعه وتستخدم بدلاً عنه وسوم html المختلفة كل في مكانها الصحيح فإن إدرجت فقرة <p> أو عنوان <h1 , h2 , h3 ....> الخ... فهي يمكن ان تعطي نتائج أفضل من <div>
====
يمكنك تعيين نفس الـ id مرة واحدة للعناصر لديك .. أما class فهو نمط يمكنك تعيينه لاكثر من عنصر في نفس الوقت .. كمثال :
كود:
<div id="div1"></div>
<div id="div1"></div>
أما class فهذا جائز :
كود:
<div class="class1"></div>
<div class="class1"></div>
====
والفرق بسيط بينهم فـ
class و id : هى الفئات class والمعرفات id الأساسيه التى تكون محتوية على أوامر أو خصائص css المختلفة لتوضع بداخل أوسمه html للتطبيق عليها .. وبمعنى أخر هى التصاريح التى بداخلها بعض المهام يتم تنفيذها داخل الأوسمة
وهى تعرف كالتالي :
id = معرّف يتم تحديدة ويمكن أن تندرج تحته عنده فئات ـ ويعرّف بوضع علامة ( # ) قبله ويمكن ان تضع له أي اسم ، بشرط أن يتم تطبيقه على عنصر واحد فقط داخل نفس الصفحه ولا يتكرر ـ مثال :
class و id : هى الفئات class والمعرفات id الأساسيه التى تكون محتوية على أوامر أو خصائص css المختلفة لتوضع بداخل أوسمه html للتطبيق عليها .. وبمعنى أخر هى التصاريح التى بداخلها بعض المهام يتم تنفيذها داخل الأوسمة
وهى تعرف كالتالي :
id = معرّف يتم تحديدة ويمكن أن تندرج تحته عنده فئات ـ ويعرّف بوضع علامة ( # ) قبله ويمكن ان تضع له أي اسم ، بشرط أن يتم تطبيقه على عنصر واحد فقط داخل نفس الصفحه ولا يتكرر ـ مثال :
كود HTML:
<style type="text/css">
<!--
#new { color: red; }
#old { color: red; }
-->
</style>
<div id="new">xxxxx</div>
<div id="old">xxxxx</div>
كود HTML:
<style type="text/css">
<!--
.new { color: red; }
.old { color: red; }
-->
</style>
<div class="new">xxxxx</div>
<div class="new">xxxxx</div>
<div class="old">xxxxx</div>
وغالبا مانستخدم المعرّفات id كمعلم في تحديد الهيدر او الفوتر للصفحه او للعناوين الفريدة مثلاً ويستخدم أيضا بكثرة داخل الجافاسكريبت ومن داخله نضع فئات class فهي الأكثر إنتشاراً والأكثر تطبيق في الصفحات ..
===
الآن الـ class
استطيع ان استخدمها بأي وسم اريده وبأي مكان
ولاكن السؤال لماذا الـ id تستخدم فقط في عنصر واحد !!
استطيع ان اعمل class لكي عنصر عوضاً عن id
مثال
كود:
<style>
.fahad
{
color:green;
}
.nasser
{
color:red;
}
</style>
<p class="fahad"> فهد </p>
<p class="nasser"> ناصر </p>
الصراحة انا فهمت شئ واحد بخصوص id و class
ولاكن لم افهم لماذا الـ id تستخدم لعنصر واحد
والـ class لأكثر من عنصر
ناهيك عن الـ . في الـ class
والـ # في الـ id
===
نعم فالـ class يمكن ان تحل محل id وذكرت إنها الأكثر تطبيق في الصفحات، ولكن هنا من يفضل إستخدام id للعناصر الفريدة بالصفحات التى لا تتكرر للتميز وأنا واحد منهم وأشجع عليها لتنظيم عند بناء الصفحات ..
فمثلا :
فمثلا :
كود HTML:
<div id="header">
وفي الحقيقة ليست هناك قواعد في XHTML معينه نعتمد عليها في هذا الأمر ونقول هنا يوضع فقط id وهناك يصلح class .. ولكنها تعتمد عليك في تحديد ذلك وماهى العناصر التى تتوقع ان تظهر مرة واحده فقط لتعطي لها id وما هى العناصر التى تكرر فتأخذ class ..
أما لماذا تستخدم id لمرة واحده فقط بالصفحة لان هذا من ضمن قواعد XHTML الأساسية ويجب التقيد بها إن اردت موقع يطابق المعايير القياسية ـ فهو مثلة من الكثير من القواعد التى نلتزم بها عند تصميم الصفحات ـ وفي حالة وجد المدقق id مكرر يظهر لك خطأ ويقترح عليك إستبداله بـ class ..
اخيراً مش فاهم بالضبط ايه مش مفهوم ان id تعرّف عن طريق (#) والـ class تعرّف عن طريق (.) !!!!! ـ اللى بعرفة ان هذا من ضمن قواعد css ولم أجد اى تفسير آخر ..
ولمزيد من المعلومات حول id و class
http://www.w3.org/TR/REC-CSS1#id-as-selector
http://www.mako4css.com/BasClass.htm
http://css-discuss.incutio.com/?page=ClassesVsIds
إرسال تعليق