More

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

" Here you can search for everything you want and you will find it as soon as possible "

استدعاء تصميم خاص 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 كالتالي :

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

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

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

Click Here To Download 

استخدام id :

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

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

Click Here To Download 

في المثال التالي استخدمنا اسم “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

Tags
Show More
" Here you can search for everything you want and you will find it as soon as possible "

Scorpion

Welcome To The Biggest Site For Android Games And Apps You Can Find New Modded Games And Game Cheat & CrossFire Hacks You Can Find Daily Update Only Here Don’t Forget To Like Page in Facebook And Subscribe To Blog

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Check Also

Close

Adblock Detected

Please consider supporting us by disabling your ad blocker