Like And Win VIP Hack
Click Like To WIN 30 Day VIP Hack

[ دورة CSS ] أساسيات CSS – الدرس الرابع – استخدام id و class

Home // Blog // [ دورة CSS ] أساسيات CSS – الدرس الرابع – استخدام id و class

Share Now And Win Free ViP HackShare on Facebook0Google+0Tweet about this on Twitter0
 

استدعاء تصميم خاص class أو id

تحدثنا في الدرس السابق بأننا يمكننا استخدام (المنتقى) وهو وسم HTML
لإجراء تعديل كامل على ذلك الوسم أو المنتقى في جميع صفحات HTML شاهد هذا
المثال :

h1 { color:red; text-align:center; }

هذا المثال يعني أن كل وسم عنوان كبير معرّف بالوسم h1 في صفحة الويب
سيطبق عليه اللون الأحمر والمحاذاة في الوسط أي اذا لدي في صفحة الويب 5
عناوين كبيرة سيطبق عليها هذا التصميم ولكن ماذا لو أردت أن أجعل 4 عناوين
باللون الأحمر وواحد باللون الأزرق , ماذا يجب أن أفعل ؟

باستخدام لغة CSS يمكنك تطبيق تصميم معين على وسم معين في صفحة الويب
وذلك باستخدام خاصية الاستدعاء class و id حيث تمكنك هاتين الخصيصتين من
استدعاء تصميم معين وباسم فريد أنت اخترته .

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

h1 { color: red; }
.heading { color: blue; }

في هذا المثال نعني به بأن جميع العناوين في صفحة الويب التي تحمل وسم
h1 ستأخذ اللون الأحمر بينما الآخر سيأخذ اللون الأزرق وعلى الرغم ان
heading ليس بوسم الا أنه اسم فريد يمكنني استدعائه بأي وسم أريد ويجب
استدعائه من خلال وسوم HTML كالتالي :

<h1 class=”heading”>هذا عنوان أزرق</h1>

<p class=”heading”>هذه فقرة زرقاء</p>

ولكن السؤال أيهما أفضل class أو id ومتى يمكن استخدامهم؟

استخدام id :

يمكن استخدام id لتطبيق تصميم معين على وسم HTML فريد و يستخدم id مع وسم واحد فقط

يجب اضافة “#” الى الاسم الذي تريد تطبيق التصميم عليه واستدعائه من خلال اللاحقة id في وسم HTML

في المثال التالي استخدمنا اسم “para1” لتطبيق تصميم على وسم معين

#para1{

text-align:center;

color:red;

}

ملاحظة : عند استدعاء الاسم كلاحقة في الوسم فقط أضف الاسم ولا تضيف # الى القيمة أي

<h1 id="para1"></h1>

لاتبدأ الاسم عند استخدام id برقم لأنه لن يعمل على متصفح الفايرفوكس Mozilla/Firefox

استخدام class

يمكن استخدام class للتطبيق على وسم او مجموعة وسوم وهو بعكس id الذي يمكن تطبيقه على وسم واحد فقط .

يسمح لك class باستخدام تصميم معين وتطبيقه مرات عديدة حسب الحاجة

يجب اضافة نقطة “.” الى الاسم الذي تريد تطبيق التصميم عليه واستدعائه من خلال اللاحقة class في وسم HTML

في المثال التالي جميع العناصر التي تستخدم الاسم واللاحقة class=”center” سيطبق عليه المحاذاة في الوسط

.center {text-align:center;}
p.center {text-align:center;}

يمكنك أيضاً تخصيص وسم معين سيتم تطبيق هذا التصميم عليه فقطفي المثال التالي جميع الفقرات / مواضيع التي تستخدم الاسم واللاحقة class=”center” سيطبق عليه المحاذاة في الوسط

لاتبدأ الاسم عند استخدام class برقم لأنه مدعوم فقط من متصفح الاكسبلورر Internet Explorer

Share Now And Win Free ViP HackShare on Facebook0Google+0Tweet about this on Twitter0

0 Comments ON " [ دورة CSS ] أساسيات CSS – الدرس الرابع R... "
leave a response

*

Copyright © All Rights Reserved 2014→2017 To Add-Fast.CoM