تجميع العناصر بإستخدام class و استخدام id في لغة CSS الدرس |8| - Programmer Tech

Programmer Tech

موقع تعليم مجاني يهتم بتعلم البرمجة و علوم الكمبيوتر, أمن المعلومات, القرصنة الأخلاقية, سكربتات

إعلان اعلى المقالة

الثلاثاء، 7 يناير 2020

تجميع العناصر بإستخدام class و استخدام id في لغة CSS الدرس |8|


تجميع العناصر بإستخدام الكلاس

في بعض الأحيان تود أن تقوم بعمل تنسيق على عنصر أو مجموعة من العناصر بإستخدام الفئة class و المعرفات id يمكن ان تجمع مجموعة من العناصر للتنسيق.

التجميع بواسطة الكلاس class

تجميع العناصر بإستخدام الفئات class و الآن ننتقل إلى الأمثلة بشكل مباشر لنتعرف اكثر على تجميع العناصر بأستخدام class


في المثال السابق قمنا بإضافة مجموعة من الأقسام الموجودة على الموقع الخاص بنا, دعونا الآن نضيف إلى العناصر الفئة class التي تمكننا من التحكم الكامل في تنسيق العناصر في css وسيكون بذلك الشكل 


قمنا الآن بإضافة الفئة class حيث اضفنا الفئة على العنصر li بإسم var وهذا الأسم الذي ينبغي ان ننادي به العنصر في css وكما في الجزء الثاني الذي هو web قمنا بإضافة تلك الفئة على العنصر li باسم num.

وقمنا ايضاً بإضافة الفئة class على العنصر a الذي هو الوسم المتحكم في الروابط, في المثال الأول قمنا بإضافة ذلك العنصر بإسم pdf اي انه هو الاسم الذي ينبغي ان ننادي به في css و في قسم web كان باسم php .

وسيكون السورس كود في css بهذا الشكل


في عملية التنسيق تم عمل تنسيق على العنصر الأول الذي هو li و اخذ اللون الأحمر, وكما قمنا بجلب اسم الـ class الموجود على العنصر li و اسم الـ class هو var و اخذ اللون ff00ff وفي الجزء الثاني من السورس كود قمنا بجلب اسم class التي هو num اي ان التنسيق سيتم على قسم الـ web, وكما قمنا بإضافة العنصر a و اخذ اللون 909090, وقمنا بجلب الجزء الأول من السورس كود على العنصر a ويأخذ اللون الأصفر وفي الجزء الثاني web و قمنا بجلب اسم class واخذ اللون red.

وسيكون الناتج في المتصفح بذلك الشكل


ملحوظة
في استخدام الفئات class يمكن ان يحمل جميع العناصر نفس الأسم وبهذا الشكل يمكن تطبيق التنسيق على جميع العناصر.

في المثال السابق في الجزء الأول جميع العناصر تم التنسيق عليها لأنها تحمل نفس اسم الكلاس.


في هذا المثال قمنا بإضافة نفس اسم الـ class على العنصر a وكان الأسم pdf وقمنا بجلب اسم العنصر, وللتنسيق عليه داخل css يكون بالشكل, على جميع عناصر a دعونا نغير اسم class ونقوم بإضافة تنسيق لكل عنصر .


قمنا الآن بإعطاء اسم للكلاس لكل عنصر وكان تلك الاسماء pdf, pdf1, pdf2 , الآن لنرى التنسيق الخاص لكل عنصر في css


قمنا بإضافة تنسيق الى العنصر الأول التي هو pdf وكان اللون blue
وقمنا بإضافة تنسيق على العنصر التاني التي هو pdf1 وكان اللون yellow
وقمنا بإضافة تنسيق على العنصر الثالث التي هو pdf2 وكان اللون red 
وسيكون في المتصفح بذلك الشكل


التجميع بواسطة الآيدي id

معلومة بسيطة id and class جميعها تعمل بنفس الشيئ, تقوم بإعطاء اسم للعنصر في html لتنادي عليه في ملف css لتقوم بتنسيق معين على ذلك العنصر أما بالنسبه لـ class يمكن ان يكون اسم العنصر على جميع العناصر الأخرى, وذلك يعني ان كل التنسيقات ستتم على جميع العناصر الذي لها نفس اسم class لكن id يختلف الأسم الذي يطلق على id لأي عنصر لا يقبل ان يكون على عنصر آخر وهذا يعني ان اسم id سيكون التنسيق على عنصر واحد فقط

index.html

في المثال السابق قمنا بإنشاء مجموعة من العناوين لكن لم نقوم بإنشاء اي تنسيق له لذلك دعونا نرى النتائج في المتصفح قبل أن ابدأ في التنسيق


دعونا الﻵن نقوم بإستخدام id لتحديد التنسيقات على عنصر معين وسيكون المثال هكذا 


قمنا الآن بإستخدام id لتحديد اسم على كل عنصر كما نرى في الصورة العنوان يحمل id بإسم web1 و العنوان الثاني يحمل id باسم web2 وكذلك الباقيات كل منهم يحمل اسم لل id مختلف لأن لا يقبل ان يكون اسم id على مجموعة من العناصر, يجب ان يكون كل عنصر له id باسم معين ومختلف, دعونا الآن ننادي على اسم id

 style.css

كما تشاهدون في الصورة قمنا بجلب اسم id عن طريق الإشارة # وهي المسؤوله عن جلب اسم الـ id داخل عنصر وهذا يعني سنقوم بعمل تنسيق على كل عنصر وستكون الننتيجة في المتصفح بعد تنسيق العناصر بذلك الشكل.

ليست هناك تعليقات:

إرسال تعليق

facebook

تسميات

تواصل معنا

Translate

أخر الافكار

من انا

authorمبرمجين ويب و محبين للتقنية و الشبكات و امن المعلومات و سوف نقدم لكم الافضل إن شاء الله
أعرف المزيد ←

نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *

اقسام