_:nf6c4a1c040dc442bbc165edb63c6f776xb0
<http://schema.org/articleBody>
"اثناء تصميم صفحات الويب نحتاج الى تخصيص طريقة عرض بعض عناصر Html ويتم ذلك عن طريق منحها خواص css خاصه بها ولهذا فنحن نسنتخدم ID's و Classes ... في هذه التدوينه سنتناول تعريف كل منهما وكيفية استخدامها .\r\n\r\nلا يوجد ما يميز ID عن Class في CSS من حيث الاستخدام فما يمكنك القيام به باحدهما يمكنك القيام به بالاخر وتبقى لك الحرية في استخدام اي منهما تبعاً لرؤيتك و تقديرك اي منهما سيكون مناسب لعنصرك أكثر  .\r\n\r\nنظرة على Classes\r\n- يمكن استخدام نفس class لاكثر من عنصر في الصفحة الواحده .\r\n- يمكن استخدام اكثر من class للعنصر الواحد . \r\n\r\nاستخدام Classes\r\nعند تعريف class في CSS يجب ان يسبق اسم الكلاس نقطة ( . )  بالشكل التالي :\r\n( تذكر لا تبدأ اسم الكلاس برقم )\r\n[crayon-633c0d65d92a4973269088/]\r\nفي المثال السابق قمنا بتعريف كلاسين الاول اسميناه paragraph و الثاني  center \r\nالان علينا تحديد العناصر التي نرغب في تطبيق الكلاس عليها :\r\n[crayon-633c0d65d92b0478424427/]\r\n\r\nفي المثال السابق سيقوم المستعرض بتطبيق الخواص التي تم تحديدها في الكلاس paragraph على الفقرتين ( وعلي اي عناصر اخرى تم تحديد الكلاس paragraph لها ) اي ستظهر الفقرتين بخط عريض ولون أزرق .\r\n\r\nحسنا .. ماذا اذا اردت ان اطبق اكثر من كلاس على عنصر واحد .. ؟\r\nلتطبيق ذلك عليك كتابة اسماء الكلاسات مع ترك فراغ بين الاسماء بالشكل التالي :\r\n[crayon-633c0d65d92b3493705597/]\r\nفي المثال السابق سيتم تطبيق الخواص المحدده في الكلاسين paragraph  و center اي ستعرض الفقرة بخط عريض ولون ازرق ومحاذاة الفقرة سيكون في الوسط .\r\n\r\n\r\n\r\nنظرة على ID\r\n- لكل عنصر id واحد .\r\n- تحتوي الصفحة الواحدة على عنصر وحيد يحمل ID فريد ( خاص به ) .\r\n\r\n\r\nيمكننا ان نشبة ID بالارقم التسلسلية للمنتجات و الكروت مسبقة الدفع ( كروت شحن الجوالات و الانترنت وغيرها ) .. فلكل منها رقم فريد خاص بها لا يمكن أن يتكرر .\r\n\r\nاستخدام ID's :\r\nعند تعريف ID في css علينا وضع ( # ) قبل اسم ID :\r\n( تذكر لا تبدأ اسم ID برقم )\r\n[crayon-633c0d65d92b5802219538/]\r\n\r\nالان علينا ان نحدد ما هو العنصر الوحيد الذي نريد تطبيق هذه الخواص عليه :\r\n[crayon-633c0d65d92b9531328592/]\r\n\r\nاستخدام اسماء ID's في الروابط :\r\nتتميز ID  بامكانية استخدامها في الروابط حيث سيؤدي الرابط الى العنصر الذي يحمل ID  الذي استخدمناه في الرابط :\r\n[crayon-633c0d65d92bb154602209/]\r\nيجب وضع # قبل اسم ID المراد الانتقال اليه في الرابط .\r\nبالضغط على \" الانتقال الى الفقرة \" سينتقل المستعرض الى الفقرة التي تحمل ID باسم paragraph1 . وستلاحظ تغير مسار الصفحة في شريط العنوان في المستعرض باضافة #paragraph1 الى مسار الصفحة الحالية :\r\nhttp://www.yourpath.com/example.html#paragraph1\r\n\r\n\r\nيمكن للعنصر الواحد ان يحتوي على id و class معا \r\n[crayon-633c0d65d92bd440725562/]\r\n\r\nتخصيص class او ID لعنصر معين :\r\nيمكنك تخصيص Class او ID لعنصر معين لا يتم تطبيق خواصهما الا على هذا العنصر فقط  ويتم ذلك عن طريق وضع اسم العنصر قبل اسم Cass او ID ... دعني اوضح بمثال :\r\n\r\nاكواد css\r\n[crayon-633c0d65d92bf201106087/]\r\nاكواد html \r\n[crayon-633c0d65d92c1895233161/]\r\nلنشرح المثال ...\r\nاولا عرفت class باسم example بخط عريض من نوع Arial و حجم 12pt ثم بعد ذلك حددت بان اي فقرة تحمل كلاس example تعرض بلون أحمر و حددت بان اي عنوان يحمل الكلاس example يعرض بلون ازرق.. مع الاحتفاظ بخواص الكلاس example الخاصة بالخط لكل من الفقرة و العنوان  .\r\n\r\n\r\n\r\nانتهى الدرس ..\r\nتذكر التطبيق افضل وسيلة للتعلم .\r\nالى اللقاء في الدرس القادم . :)\r\n"
<https://mo3aser.com/blog/difference-between-id-and-class/>