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

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

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

 

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

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

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

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

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

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

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

 

حسناً ، ولكن ما هي قيمة السمة 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).
    • إلخ

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

 

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

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

 

شَـاركِ الْمَوْضُوع: 
إذا أعجبك هذا المحتوى، فلا تَقْرَأْ وتَرْحَل … تَـعْلِيقَـاتُكَ تَـشْجِيعٌ لَـنَـا لِنَسْتَمِرَّ فِــي الْبَحْثِ وَالْعَطَـاء. وإِذَا كنت تعتقد أنه قد يكون مفيداً لأشخاص آخرين، فشَارِكْهَ على الشبكات الاجتماعية.

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

حول الكاتب :   من أقصى شمال المغرب كاتب مقالات إلكترونية حول كيفية بناء موقع ويب ناجح : ووردبريس ، HTML ، CSS .ومواضيع مختلفة وناشط على اليوتيوب في قناة: Jabism Web و رحيل الليل
كتب 457 مقالة في jabism.com.
-:- راسلني   -:- تابعني على تويتر   -:- تابعني على الفايسبوك

52 عدد المشاهدات لهذا المحتوى
Scroll to Top