استثمر للحياة  investolife

تجميع للعناصر  class  و   المعرف id

التجميع class

يمكنا تحديد خصائص معينة – لون حجم خط .... و غيرها –  لعناصر مختارة فى الصفحات لتظهر كلها بتنسيق واحد ,

هب اننا نقوم بالتعليق و الشرح على مقال ما , نريد ان نكتب النص الاصلى بلون ما و التعليق عليه بلون أخر .

مثال : اذا أردنا كتابة النص الأصلي بالخط العادي و تعليقنا على النص لخط مائل , أما تعليق القارئ فيكون بلون احمر .

سنستخدم 3 فئات نختار نحن اسمائهم .  الاولى هى  normal  لكتابة النص الأصلي بالخط العادي , الثانية هى italic  لكتابة تعليقنا بخط مائل , أما الثالثة فهى reader  لتعليق القارئ و يكون لونها احمر .

أن تحدد خصائص لعناصر معينة تتبع مجموعة محددة باستخدام الفئات class   في ملف التصميم  له بعض القواعد :

لاحظ تحديد اسم الفئة  لابد ان يكون مسبوق ب "."

و كذلك كيفية استدعاء الفئة فى جسم البرنامج و داخل احد وسوم html مثل  <p>  ... <h1 >

هذا و يمكن تخصيص فئة لعنصر من عناصر html   .

لاحظ هذا الكود

المعرف id

كان هذا بخصوص الخصائص المتكررة فى الصفحة . و لكن هناك بعض الخصائص لا تتكرر مثل العنوان العام للصفحات و اسم الموقع و خلافه .

هنا لا نستخدم  Class  بل نستخدم المعرف  Id

لتحديد معرف خاص لعنصر معين من خلال id   لتحديد خصائص العناصر التى لن تتكرر الا مرة واحدة فى الصفحة الواحدة . و يسبق اسم المعرف دائما العلامة #

مثال :

نريد ان نكتب العنوان الاساسى للصفحة بلون احمر و خط عريض  , و هذا الامر لن يتكرر الا مرة واحدة فقط  في كل صفحة . اما العناوين الجانبية فنريدها اقل سمكا و لونها اسود لاحظ ان العناوين الجانبية ستتكرر كثيرا فى الصفحة  . و كذلك خط الكتابة يكون اقل سمكاً .

التجميع بالعنصر <div>

العنصر <div> يستخدم لتجميع العناصر. فمثلا اذا رغبنا ان نكون الكتابة فى المثال السابق كله من اليمين لليسار ,  بغض النظر عن نوع الخط . و متع مراعاة التنسيق :

التجميع بالعنصر <span>

العنصر <span> هو ما يمكن أن تسميه العنصر المحايد   لكنه يستخدم  مع  CSS    لإنشاء مؤثرات على أجزاء محددة من النص في الوثائق . بحيث نخرج من التنسيق العام .

شاهد هذا المثال