خاصية الـ div في الـ css !!!

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

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

كود HTML:

<div>
<p>Welcome</p>
</div>

ويتميز ان المتصفح يفهمه بسرعه ويعرض محتوياته مباشرة بدون إنتظار تحميلة بالكامل عكس الجدوال بالإضافة انك يمكنك التحكم بكل <div> بشكل منفصل وتعطى لها خصائص عرض خاصة مثال : 

كود HTML:

<div class="style">
<p>Welcome</p>
</div>

وهذا الوسم يصنف ضمن الـ Block Elements والـ Block Elements .. فيها يفصل كل عنصر بشكل مستقل عموديا ـ واحد تلو الآخر أى ان الوسم الذى ينتمى لهذه المجموعه سيكون مابداخله عبارة كتله واحده في سطر مستقل ـ ومثال على ذلك الفقرات <p> والعناوين <h1 , h2 , h3 ....>

اى انه لو كتب بهذا الشكل مثلا ..

كود HTML:

<div>xxxxxxxxx</div>
<div>xxxxxxxxx</div>
<div>xxxxxxxxx</div>

سيعرض داخل المتصفح في 3 سطور منفصلة ..

عكس ذلك الأوسمة التى تنتمي الى 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>

هذا غير جائز ، حيث أن id يجب أن يكون مميزاً لكل عنصر ..

أما class فهذا جائز :

كود:

<div class="class1"></div>
<div class="class1"></div>

وسيتم تعيين نفس خصائص class1 لكل من العنصر الاول والثاني ..

====

والفرق بسيط بينهم فـ
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>

class = الفئات وهى يمكن أن تكرر أكثر من مرة بنفس الصفحة ، على عكس المعرّفات id ـ وتعرّف بوضع نقطه ( . ) قبلها ويمكن ان تضع لها اى اسم ـ مثال : 

كود 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>

مثال لديك عنصرين في الصفحة a , b وتريد ان تضع لكل واحد منهم شكل خاص هنا يصلح ان تستخدم id لكل واحد وبإسم مختلف ـ ولكن في حالة عملهم بنفس الشكل هنا تستخدم class واحد فقط وتكررة عليهم .

وغالبا مانستخدم المعرّفات id كمعلم في تحديد الهيدر او الفوتر للصفحه او للعناوين الفريدة مثلاً ويستخدم أيضا بكثرة داخل الجافاسكريبت ومن داخله نضع فئات class فهي الأكثر إنتشاراً والأكثر تطبيق في الصفحات .. 

===

الآن الـ class

استطيع ان استخدمها بأي وسم اريده وبأي مكان

ولاكن السؤال لماذا الـ id تستخدم فقط في عنصر واحد !!


استطيع ان اعمل class لكي عنصر عوضاً عن id

مثال

كود:

<style>
.fahad
{
color:green;
}
.nasser
{
color:red;
}
</style>
<p class="fahad"> فهد </p>
<p class="nasser"> ناصر </p>

الآن هذه الطريقة أغنتني من استخدام id

الصراحة انا فهمت شئ واحد بخصوص 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