تنسيق صفحات الويب باستخدام لغة CSS الجزء الثاني « تتمة »
تطبيق نمط style ب: class et id
رغم ما قمنا به من بداية الدرس إلى الآن ما زال هناك خلل و تشوه في التنسيق، إذ كيف يتفرد اللون الأحمر بكل الفقرات بينما أنا أريد كتابة فقرات أخرى بشكل مختلف و بألوان مختلفة ! 🙄 .
هذا يتوقف على كيفية وضع كود CSS داخل الوسم style 😀 ولكن عندما أنشانا ملف CSS خارجي لم يعد لنا حاجة بتلك الصيغة . 💡
لحل المشكلة ، يمكننا استخدام هذه السمات الخاصة التي تعمل على جميع الرموز:
- السمة class
- السمة id
لتكن الأمور أكثر وضوحاً فإن سمات class و id متطابقة تقريبًا. ولا يوجد سوى اختلاف بسيط .
في الوقت الحالي ، ولتبسيط الأمور ، سنهتم فقط بسمة class.
كما أخبرتك للتو ، هذه سمة يمكن وضعها على أي رمز، وكذلك الفقرة أو الصورة ، أو شيئ آخر.
|
1 2 3 |
<h1 class=""> h1> <p class=""> </p> <img class="" /> |
في الواقع ، يجب عليك كتابة اسم يعمل على تحديد الرمز. على سبيل المثال ، سوف أقوم بربط class introduction بالفقرة الأولى (السطر 12).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="style.css" /> <title>تجربتي مع CSS </title> </head> <body> <h1>الخطوة الرابعة</h1> <p class="introduction">أهلاً و مرحباً بكم في موقعي ! </p> <p>يمكنكم وضع اقتراحاتكم في باب الاقتراحات <em> الكتاب الذهبيem>. و شكراً لكم مسبقاً !</p> </body> </html> |
كما ترى فإن فقراتنا تم حديدها بإسم introduction . و لا بد ان نستخدم هذا الاسم في ملف CSS لتلوين هاته الفقرة فقط باللون الأحمر، و الطريقة أصبحت معتادة و سهلة، تابع المثال:
|
1 2 3 4 |
.introduction { color: red; } |
و في النتيجة ستجد أن الفقرة التي أشرنا إليها ب introduction هي الوحيدة التي تم عرضها باللون الأحمر.
هنا يتم عرض الفقرة الأولى فقط باللون الأحمر
كما أشرنا سابقاً إلى أن class و id لهما استخدام مشابه و أنهما يعملان بنفس الطريقة، إلا أن id لا يمكن استخدامه إلا مرة واحدة فقط داخل الكود.
هل سبق لك أن رأيت شيئاً عن id ؟ يا للهول ! كم تنسى يا صاحبي! راجع درس الروابط في HTML . و ستجد في باب نقط الارتساء في درس إنشاء الروابط بلغة html كيف تعمل id 😆
لقد قلنا اننا نستعملها مرة واحدة ، و هذا ما يجعلنا نخصصها لشيئ يدرج في الصفحة مرة واجدة مثل شعار الموقع ( logo)
|
1 |
<img src = "images/logo.png" alt="شعار الموقع" id="logo"> |
في حالة استخدامك ل id لتحديد الخصائص في ملف CSS ، فيجب أن نضع علامة (#) قبلها مثل:
|
1 2 3 4 |
#logo { /* هنا ضع خصائص CSS */ } |
احياناً يكون علينا أن نطبق class فقط على جزء من جملة ( كلمة مثلاً) ، والتكن كلمة تهنئة داخل هاته الفقرة:
|
1 |
<p> أهلاً و مرحبا بك ، هنيئاً بالنجاح ! </ p> |
و لفعل ذلك علينا ان ندرج الرمز < span> داخل الشفيرة وهذا الرمز سيحصر كلمة هنيئاً لتكون مختلفة عن باقي كلمات الجملة :
HTML
|
1 |
<p>أهلاً و مرحباً بك <span class="salutations">هنئاً</span> بالنجاج!</p> |
وفي ملف CSS أضف التالي:
|
1 2 3 4 |
.salutations { color: red; } |
والنتيجة ستكون على الشكل التالي:
كلمة “تهنئة” مكتوبة باللون الأحمر
تطبيق نمط style : التحديد المتقدم
يجب أن تعلم أن أصعب شيئ في CSS هو كيفية استهداف العناصر في النص أو النص بعينه لتغيير شكله دون غيره! و للتعديل على عناصر صفحة الويب ، نستخدم ما يسمى Les Sélecteurs (المحددات) .
و هذه المحددات أصبحت مألوفة لدينا و لكن لا بأس أن نعود لمراجعتها كي نحفظها 🙂 و لا يتحقق ذلك إلا بالتطبيق الدائم لها 😯
على بركة الله:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
p { } /* --------- ظهور التعديل على جميع الفقرات */ h1, em { } /* --------- يظهر التعديل على جميع العناوين و النصوص المهمة */ .class { } #id { } /* --------- وهناك class و id تعمل الكثير من الأشياء راجع ما كتبته فوق */ /*--------- (*) محدد universel */ * { } /*--------- يحدد كل الأكواد دون استثناء */ h3 em { } /*--------- تحديد كل رموز <em> الموجودة داخل الرمز <h3> لاحظ أنها لا توجد فاصلة بينهما كما تعلمنا سابقاً */ /*--------- هذا نص html كمثال */ <h3>هنا العنوان <em>بداخله محتوى مهم</em></h3> |
رمزان متتاليان:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
h3 + p { } /* يعرض العنوان <h3> أولاً ثم الفقرة <p> ثانياً */ /* مثال في HTML */ <h3> العنوان </h3> <p>الفقرة</p> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
/* يحدد جميع الروابط <a> التي لها سمة title. ولدينا مثال */ a[title] { } /* مثال */ a[title="اضغط هنا لزيارة موقعنا "] { } /* مثال في HTML*/ <a href="http://jabism.com" title="موقع متنوع"> /* ----------*/ <a href="http://jabism.com" title="إضغط هنا لزيارة موقعنا"> /* <"إداراج قيمة الوسم"> */ |
تنسيق صفحات الويب باستخدام لغة CSS الجزء الثاني
الخلاصة
CSS هي لغة مُكَمِّلَةٌ للغة HTML. و هي تقوم بدور تنسيق صفحات الويب حتى تبدو منظمة مقروئة و جذابة 💡
يمكننا كتابة كود CSS في عدة أماكن مختلفة ، والأفضل هو إنشاء ملف منفصل (مثال: style.css).
في CSS ، نختار الأجزاء من صفحة HTML التي نريد تعديلها ونغير عرضهم التقديمي بخصائص CSS:
|
1 2 3 4 5 |
balise1 { propriete1: valeur1; propriete2: valeur2; } |
-
هناك العديد من الطرق لتحديد جزء الصفحة الذي نريد تنسيقها. على سبيل المثال ، يمكننا أن نسهدف
- جميع العلامات من نفس النوع ، ببساطة عن طريق كتابة إسمهم em على سبيل المثال ؛
- بعض العلامات المحددة ، التي تم منحها أسماء باستخدام وسم class أو id إسم class أو # إسم id ؛
- تحديد العلامات الموجودة داخل العلامات الأخرى فقط مثل (h3 em).
- إلخ
أطيب المنى و إلى اللقاء في درس آخر
قناتي على اليوتوب أرى أن هذه المواضيع قد تهمك: |
إذا أعجبك هذا المحتوى، فلا تَقْرَأْ وتَرْحَل … تَـعْلِيقَـاتُكَ تَـشْجِيعٌ لَـنَـا لِنَسْتَمِرَّ فِــي الْبَحْثِ وَالْعَطَـاء. وإِذَا كنت تعتقد أنه قد يكون مفيداً لأشخاص آخرين، فشَارِكْهَ على الشبكات الاجتماعية.