تجميع العناصر بإستخدام الكلاس في CSS
تجميع العناصر في CSS, في بعض الأحيان تود أن تقوم بعمل تنسيق على عنصر أو مجموعة من العناصر بإستخدام الفئة class و المعرفات id يمكن ان تجمع مجموعة من العناصر للتنسيق, تجميع العناصر بإستخدام الفئات class و الآن ننتقل إلى الأمثلة بشكل مباشر لنتعرف اكثر على تجميع العناصر بإستخدام class.
مثال
<body>
<p>Programmer Tech</p>
<ul>
<li><a href="#"> Python </a></li>
<li><a href="#"></a> Java </a></li>
<li><a href="#"></a> C++ </a></li>
</ul>
<p>Programmer Tech web</p>
<ul>
<li><a href="#"> Html </a></li>
<li><a href="#"></a> CSS </a></li>
<li><a href="#"></a> JavaScript </a></li>
<ul>
</body>في المثال السابق قمنا بإضافة مجموعة من الأقسام الموجودة على الموقع الخاص بنا, دعونا الآن نضيف إلى العناصر الفئة class التي تمكننا من التحكم الكامل في تنسيق العناصر في CSS و سيكون بذلك الشكل
<body>
<p>Programmer Tech</p>
<ul>
<li class="var"><a href="#" class="pdf"> Python </a></li>
<li class="var"><a href="#" class="pdf"> Java </a></li>
<li class="var"><a href="#" class="pdf"> C++ </a></li>
</ul><br><hr>
<p>Programmer Tech web</p>
<ul>
<li class="num"><a href="#" class="php"> Html </a></li>
<li class="num"><a href="#" class="php"> CSS </a></li>
<li class="num"><a href="#" class="php"> JavaScript </a></li>
</ul>
</body>قمنا بإضافة الفئة class حيث أضفنا الفئة على العنصر li بإسم var وهذا الإسم الذي ينبغي أن ننادي به العنصر في css و كما في الجزء الثاني الذي هو web قمنا بإضافة تلك الفئة على العنصر li بإسم num. و قمنا أيضاً بإضافة الفئة class على العنصر a الذي هو الوسم المتحكم في الروابط, في المثال الأول قمنا بإضافة ذلك العنصر بإسم pdf أي أنه هو الإسم الذي ينبغي أن ننادي به في css و في قسم web كان بإسم php و سيكون السورس كود في css بالشكل
<style>
li {
color: red;
}
li.var {
color: #ff00ff;
}
li.num {
color: #ff00ff;
}
a{
color: #909090;
}
a.pdf{
color: yellow;
}
a.php{
color: red;
}
</style>في عملية التنسيق تم عمل تنسيق على العنصر الأول الذي هو li و اخذ اللون الأحمر, و كما قمنا بجلب إسم الـ class الموجود على العنصر li و إسم الـ class هو var و أخذ اللون ff00ff و في الجزء الثاني من السورس كود قمنا بجلب إسم class التي هو num أي أن التنسيق سيتم على قسم الـ web, و كما قمنا بإضافة العنصر a و أخذ اللون 909090, و قمنا بجلب الجزء الأول من السورس كود على العنصر a و يأخذ اللون الأصفر و في الجزء الثاني web و قمنا بجلب إسم class و أخذ اللون red. و سيكون الناتج في المتصفح بالشكل.
في إستخدام الفئات class يمكن أن يحمل جميع العناصر نفس الإسم و بهذا الشكل يمكن تطبيق التنسيق على جميع العناصر. في المثال السابق في الجزء الأول جميع العناصر تم التنسيق عليها لأنها تحمل نفس إسم الكلاس.
في هذا المثال قمنا بإضافة نفس إسم الـ class على العنصر a و كان الإسم pdf و قمنا بجلب إسم العنصر, و للتنسيق عليه داخل css يكون بالشكل, على جميع عناصر a دعونا نغير إسم class و نقوم بإضافة تنسيق لكل عنصر.
<body>
<p>Programmer Tech</p>
<ul>
<li class="var"><a href="#" class="pdf"> Python </a></li>
<li class="var"><a href="#" class="pdf1"> Java </a></li>
<li class="var"><a href="#" class="pdf2"> C++ </a></li>
</ul><br><hr>
</body>قمنا الآن بإعطاء اسم للكلاس لكل عنصر و كانت تلك الأسماء pdf, pdf1, pdf2 , الآن لنرى التنسيق الخاص لكل عنصر في css.
<style>
a.pdf{
color: blue;
}
a.pdf1{
color: yellow;
}
a.pdf2{
color: red;
}
</style>قمنا بإضافة تنسيق الى العنصر الأول الذي هو pdf و كان اللون blue و قمنا بإضافة تنسيق على العنصر الثاني الذي هو pdf1 و كان اللون yellow و قمنا بإضافة تنسيق على العنصر الثالث الذي هو pdf2 و كان اللون red.
التجميع بواسطة id تجميع العناصر بإستخدام الكلاس في CSS
معلومة بسيطة id and class جميعها تعمل بنفس الشيئ, تقوم بإعطاء إسم للعنصر في html لتنادي عليه في ملف css لتقوم بتنسيق معين على ذلك العنصر أما بالنسبه لـ class يمكن أن يكون إسم العنصر على جميع العناصر الأخرى, و ذلك يعني أن كل التنسيقات ستتم على جميع العناصر التي لها نفس إسم class لكن id يختلف الأسم الذي يطلق على id لأي عنصر لا يقبل أن يكون على عنصر آخر و هذا يعني أن إسم id سيكون التنسيق على عنصر واحد فقط.
مثال
<body>
<h1>web1</h1>
<hr>
<h2>web2</h2>
<hr>
<h3>web3</h3>
<hr>
<h4>web4</h4>
<hr>
<h5>web5</h5>
<hr>
<h6>web6</h6>
<hr>
</body>في المثال السابق قمنا بإنشاء مجموعة من العناوين لكن لم نقوم بإنشاء اي تنسيق له لذلك دعونا نرى النتائج في المتصفح قبل أن ابدأ في التنسيق
دعونا اﻵن نقوم بإستخدام id لتحديد التنسيقات على عنصر معين وسيكون المثال هكذا
<body>
<h1 id="web1">web1</h1>
<hr>
<h2 id="web2">web2</h2>
<hr>
<h3 id="web3">web3</h3>
<hr>
<h4 id="web4">web4</h4>
<hr>
<h5 id="web5">web5</h5>
<hr>
<h6 id="web6">web6</h6>
<hr>
</body>قمنا بإستخدام id لتحديد إسم على كل عنصر كما نرى في الكود العنوان يحمل id بإسم web1 و العنوان الثاني يحمل id بإسم web2 و كذلك الباقيات كل منهم يحمل إسم للـ id مختلف لأن لا يقبل أن يكون إسم id على مجموعة من العناصر, يجب أن يكون كل عنصر له id بإسم معين و مختلف, دعونا ننادي على إسم id.
كود CSS سوف يكون بالشكل
<style>
#web1{
color: #ff00ff;
}
#web2{
color: #00ff00;
}
#web3{
color: #909090;
}
#web4{
color: #ccc;
}
#web5{
color: red;
}
#web6{
color: #ff0090;
}
</style>كما تشاهدون قمنا بجلب إسم id عن طريق الإشارة # و هي المسؤولة عن جلب إسم الـ id داخل عنصر و هذا يعني سنقوم بعمل تنسيق على كل عنصر و ستكون النتيجة في المتصفح بعد تنسيق العناصر بالشكل.
