تجميع العناصر بإستخدام الكلاس في CSS
تجميع العناصر في CSS, في بعض الأحيان تود أن تقوم بعمل تنسيق على عنصر أو مجموعة من العناصر بإستخدام الفئة class و المعرفات id يمكن ان تجمع مجموعة من العناصر للتنسيق, تجميع العناصر بإستخدام الفئات class و الآن ننتقل إلى الأمثلة بشكل مباشر لنتعرف اكثر على تجميع العناصر بإستخدام class.
مثال
<body>
<p>Nusur 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>Nusur 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>Nusur 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>Nusur 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>Nusur 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 داخل عنصر و هذا يعني سنقوم بعمل تنسيق على كل عنصر.
تجميع العناصر بإستخدام div و span في CSS
يستخدم هذان الوسمان لجمع العناصر و إنشاء هيكلية للوثائق و هما يستخدمان مع الخاصيتين id or class, في هذا الدرس سنلقي نظره على تلك الوسوم و كيف تستخدم مع بعض الأمثله.
يمكن استخدام عناصر div و span في CSS لتجميع العناصر وتنظيمها بشكل أفضل على الصفحة. عنصر div يستخدم عادة لتجميع مجموعة من العناصر التي تشكل جزءًا من التصميم الرئيسي للصفحة، مثل العناصر التي تشكل عنوانًا أو قائمة أو مقطعًا كبيرًا من النص.
عنصر span يستخدم عادة لتجميع مجموعة من العناصر الصغيرة التي تشكل جزءًا من التصميم الرئيسي للصفحة، مثل العناصر التي تشكل نصًا مؤقتًا أو عنصرًا فرعيًا في صفحة. يمكن تطبيق الأنماط الشائعة في CSS مثل التحكم في الخطوط والألوان والحواف والتباعد والمسافات لتنظيم العناصر المجمعة باستخدام div و span.
تجميع العناصر بإستخدام span
العنصر span يمكن أن نسميه بالعنصر المحايد الذي لا يضيف شيئ للوثيقة لكن مع إستخدام span داخل كود التنسيق في css الأمر يختلف و يستخدم ذلك العنصر عندما تريد إضافة بعض التأثيرات لنص معين, على طبيعة الحال أغلب المواقع يكون بها مجموعة من النصوص أو الفقرات الذي تتحدث عن ماذا يفعل الموقع و الخدمات الذي يقدمها الموقع, لنأخذ بعض الأمثله حتى يتضح الأمر اكثر.
مثال
لنقوم بإنشاء فقرة نتحدث بها عن ماذا يقدم موقع Nusur Tech و نقوم بفتح ملف index.html و نكتب الفقرة داخل وسم الفقرات p الذي تحدثنا عنه بدروس سابقة.
<body>
<p>The Nusur Tech website offers a set of techniques such as learning
to build a website as information and network security,
and this website is owned by muhammad alush and ahmed amviip
</p>
</body>
الآن لآحظ كيف تم كتابة الفقرة و نحن نريد الآن تنسيق بعض الكلمات الموجودة داخل الفقرة مثل إسم الموقع Nusur tech و الخدمات الذي يقدمها هذا الموقع information و network وصاحب الموقع وهو amviip بإستخدام span مع class يمكن أن نفعل ذلك.
<body>
<p>The <span class="color"> Nusur Tech </span> website offers a set of techniques such as learning
to build a website as <span class="color"> information </span> and <span class="color"> network </span> security,
and this website is owned by<span class="color">Muhammad Alush </span> and <span class="color">Ahmed amviip .</span>
</p>
</body>
لآحظ كيف تم إضافة الوسم span على الكلمات الذي ينبغي أن نؤشر عليها بلون من الألوان أو إضافة مجموعة من التنسيقات على النصوص مع الخاصية class لأننا نعرف أن في class يمكن استخدام اسم الـ class اكثر من مره بعكس id يستخدم اسم id مرة واحدة فقط و في حالتنا نحن هناك مجموعة من الكلمات الذي نريد أن يكون لها نفس التأثير لذلك تم إضافة نفس اسم class للعناصر, الآن نذهب الى css.
.color{
color: red;
}
الآن تم إضافة تنسيق للكلمات بإستخدام class يمكن أن يأخذ مجموعة من العناصر نفس اسم الـ class و بناء على ذلك سيتم إضافة نفس التنسيق على كل عنصر يأخذ نفس اسم class, في كود css نحن نريد أن نؤشر باللون الأحمر على جميع الخدمات الذي يقدمه الموقع و ايضاً إسم صاحب الموقع, لآحظ في المتصفح كيف تكون الفقرة.
يمكن تطبيق الأنماط الشائعة في CSS مثل التحكم في الخطوط والألوان والحواف والتباعد والمسافات لتنظيم العناصر المجمعة باستخدام div و span. على سبيل المثال، يمكن إنشاء مجموعة من الروابط باستخدام عنصر div وعنصر span كالتالي:
<div class="links"> <span><a href="#">رابط 1</a></span> <span><a href="#">رابط 2</a></span> <span><a href="#">رابط 3</a></span> </div>
ويمكن تطبيق الأنماط المختلفة على الروابط داخل العنصر span باستخدام CSS، على سبيل المثال:
.links {
display: flex;
justify-content: space-between;
align-items: center;
}
.links a {
color: blue;
text-decoration: none;
font-weight: bold;
padding: 5px;
}
.links a:hover {
background-color: blue;
color: white;
}
في هذا المثال، تم استخدام display: flex لترتيب الروابط بشكل أفضل و justify-content: space-between لتباعد العناصر بشكل متساوٍ، وتم تطبيق أنماط CSS على الروابط نفسها باستخدام links a.
تجميع العناصر بإستخدام div
العنصر span يستخدم في العناصر لكن العنصر div يستخدم لتجميع العناصر و يعمل بنفس الطريقة يأخذ class or id, لنقوم بإنشاء مثال لقائمتين تحويان أسماء أصحاب موقع Nusur Tech و ماذا يعرف كل واحد منهم, نذهب إلى ملف index.html و نكتب الكود بالشكل
<body>
Muhammad Alush
<div id="Database">
<ul>
<li>Java</li>
<li>Python</li>
<li>JavaScript</li>
<li>C</li>
<li>C++</li>
<li>MySql</li>
<li>Dart</li>
</ul>
</div>
Ahmed AMVIIP
<div id="AMVIIP">
<ul>
<li>PHP</li>
<li>HTML5</li>
<li>CSS3</li>
<li>Scurity</li>
</ul>
</div>
</body>
لآحظ كيف تم إنشاء مجموعة من العناصر داخل العنصر الرئيسي div, لنقوم بتنسيق كل العناصر بإسم id فقط و حتى يسهل علينا الأمر أثناء التنسيق و هذه من أهم مميزات div لنبدأ بالتنسيق داخل ملف style.css
<style>
#Database {
background-color: red;
}
#AMVIIP{
background-color: blue;
}
</style>
لآحظ كيف تم إعطاء اللون الأحمر إلى جميع العناصر التي داخل العنصر الرئيسي div و هذا يعني أن جميع العناصر تظهر باللون الأحمر, وكذلك الأمر داخل العنصر الرئيسي الآخر و يظهر محتويات قيصر باللون الأزرق, العنصر div يقوم أيضاًَ بتقسيم الصفحة بالشكل الذي تريده.