تنسيق صفحات الويب باستخدام لغة CSS الجزء الثاني

تنسيق صفحات الويب باستخدام لغة CSS الجزء الثاني « تتمة »

تطبيق نمط style  ب:  class et id

 

رغم ما قمنا به من بداية الدرس إلى الآن  ما زال هناك خلل  و تشوه  في التنسيق، إذ كيف يتفرد اللون الأحمر بكل الفقرات  بينما أنا أريد كتابة فقرات أخرى بشكل مختلف  و بألوان مختلفة ! 🙄  .

هذا يتوقف على كيفية وضع  كود CSS  داخل الوسم    style 😀  ولكن عندما أنشانا ملف CSS  خارجي  لم يعد لنا حاجة بتلك الصيغة . 💡 

لحل المشكلة ، يمكننا استخدام هذه السمات الخاصة التي تعمل على جميع الرموز:

• السمة  class
• السمة id

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

في الوقت الحالي ، ولتبسيط الأمور ، سنهتم فقط بسمة class.

كما أخبرتك للتو ، هذه سمة يمكن وضعها على أي رمز، وكذلك الفقرة  أو الصورة ، أو شيئ آخر.

 

في الواقع ، يجب عليك كتابة اسم يعمل على تحديد الرمز.  على سبيل المثال ، سوف أقوم بربط  class introduction  بالفقرة الأولى (السطر 12).

 

 

كما ترى فإن فقراتنا  تم حديدها بإسم introduction . و لا بد ان نستخدم هذا الاسم في ملف CSS  لتلوين هاته الفقرة فقط باللون الأحمر، و الطريقة أصبحت معتادة و سهلة، تابع المثال:

 

و في النتيجة ستجد أن الفقرة التي أشرنا إليها ب introduction هي الوحيدة التي تم عرضها باللون الأحمر.

 

هنا يتم عرض الفقرة الأولى فقط باللون الأحمر

 

كما أشرنا سابقاً  إلى أن  class و id  لهما استخدام  مشابه و أنهما يعملان  بنفس الطريقة، إلا أن id لا يمكن  استخدامه إلا مرة واحدة  فقط داخل الكود.

هل سبق لك أن رأيت شيئاً عن id ؟  يا للهول ! كم تنسى يا صاحبي!  راجع درس الروابط في HTML . و ستجد في باب نقط الارتساء في درس إنشاء الروابط بلغة html كيف تعمل id  😆 

لقد قلنا اننا نستعملها مرة واحدة ، و هذا ما يجعلنا نخصصها لشيئ يدرج في الصفحة مرة واجدة مثل شعار الموقع ( logo) 

في حالة استخدامك ل id  لتحديد الخصائص  في ملف CSS ، فيجب أن نضع علامة (#) قبلها  مثل:

 

احياناً يكون علينا أن نطبق class فقط على جزء من جملة  ( كلمة مثلاً) ، والتكن كلمة تهنئة داخل هاته الفقرة:

و لفعل ذلك علينا ان ندرج الرمز < span> داخل الشفيرة وهذا الرمز سيحصر كلمة هنيئاً لتكون مختلفة عن باقي كلمات الجملة :

HTML           

وفي ملف CSS  أضف التالي:

والنتيجة ستكون على الشكل التالي:

كلمة “تهنئة” مكتوبة باللون الأحمر

 

تطبيق نمط style :  التحديد المتقدم 

يجب أن تعلم أن أصعب شيئ في  CSS هو كيفية استهداف  العناصر في النص أو النص بعينه لتغيير شكله دون غيره!   و للتعديل على عناصر صفحة الويب  ، نستخدم ما يسمى Les Sélecteurs (المحددات) .

و هذه المحددات  أصبحت مألوفة لدينا و لكن لا بأس أن نعود  لمراجعتها كي نحفظها 🙂  و لا يتحقق ذلك إلا بالتطبيق الدائم لها 😯 

على بركة الله:

 

 رمزان متتاليان:

 

تنسيق صفحات الويب باستخدام لغة CSS الجزء الثاني

 

 الخلاصة

CSS هي لغة  مُكَمِّلَةٌ للغة HTML. و هي تقوم بدور  تنسيق صفحات  الويب حتى تبدو منظمة مقروئة و جذابة 💡 

يمكننا كتابة كود CSS في عدة أماكن مختلفة ، والأفضل هو إنشاء ملف منفصل (مثال: style.css).

في CSS ، نختار الأجزاء من صفحة HTML التي نريد تعديلها ونغير عرضهم التقديمي بخصائص CSS:

 

• هناك العديد من الطرق لتحديد جزء الصفحة الذي نريد تنسيقها. على سبيل المثال ، يمكننا أن نسهدف 

  • جميع العلامات من نفس النوع ، ببساطة عن طريق كتابة إسمهم em على سبيل المثال  ؛
  • بعض العلامات المحددة ، التي تم منحها أسماء باستخدام   وسم class  أو  id إسم   class   أو # إسم  id ؛
  • تحديد   العلامات الموجودة داخل العلامات الأخرى فقط مثل  (h3 em).
  • إلخ

أطيب المنى و إلى اللقاء في درس آخر 

 

قناتي على اليوتوب

أرى أن هذه المواضيع قد تهمك:

الحدود الدائرية border-radius في CSS تنسيق النصوص ب CSS إضافة اللَّون في CSS إنشاء قوائم نقطية ومرقمة بألوان مختلفة في الووردبريس إنشاء خط فاصل أفقي hr