الدرس22 : تطبيق نمط class و id في لغة html5 و css3
تطبيق نمط class و id :
ما تعلمناه سابقا صحيح لكن متلا عندما كتبنا أن النصوص تصبح بالأزرق فجميع النصوص سوف تصبح كدلك، ولكن أنا أريد نصا معينا يصبح بالأزرق وآخر بالأحمر ... ستقول نضيف الستايل في الوسم كما تعلمنا سابقا. سأقول لك لا، لأنه قلت لك أحسن طريقة هي عمل صفحة css مستقلة. إدا الحل هو تطبيق سمات class و id .
كلا هاتين السمتين تستعملان لإعطاء إسم لوسم ما لنستعمله في css . الفرق بينهما بسيط سأتكلم عليه في آخر هذا الدرس.
تطبيق نمط class :
يدرج هذا النمط بالطريقة التالية:
class="">
class="" />
وفي قيمة ندرج أي إسم لا يهم المهم يكن له معنى لنتدكره و يبدأ بحرف.
متلا لاحظ معي الكود التالي:
rel="stylesheet" href="style.css" />
متال لموقع
class="tarhib">مرحبا بكل زوار موقعي</p>
آسف لأن موقعي لم يكتمل بعد.
الآن أصبح إسم هذه الجملة tarhib سندهب و نعدل عليها في css3 .
وبما أنه class ففي css يجب أن يسبق بنقطة كما يبين الكود التالي الدي سنحول به هذا النص للأزرق:
.tarhib
{
color: blue;
}
{
color: blue;
}
وهذه هي النتيجة:
كما نلاحظ فقط النص الدي يحمل "class="tarhib هو الدي تغير لونه للأزرق .
تطبيق نمط id :
له نفس دور class تقريبا . لكن لا يمكن إعطاء إسم id معين أكتر من مرة. و هو يستعمل أيضا في JavaScript. ولقد سبق ورأينا هدا السمة في درس الروابط. و باتصار سنستعمل في الأشياء التي توجد مرة واحدة في الصفحة كلوجو متلا وهذا متال:
و لإدراج هدا الإسم الذي أعطينا id إياه في لغة css يجب كتابة قبل الإسم # كما يبين الكود التالي:
#logo
{
/* الأكواد تضاف هنا: */
}
{
/* الأكواد تضاف هنا: */
}
لم نجرب id لأنها تعمل متل class يمكنك تجربة ذلك بنفسك. فالفرق بينهما هو ما دكرته سابقا.و كان هذا درس بسيط لكنه مهم لأننا سنحتاجه كتيرا في الدروس السابقة. لأي إستفسار أو تشجيع يمكنك ترك تعليقك و شكرا.
تعليقات
إرسال تعليق