شرح أساسيات لغة css

الادارة كريم

مشرف سابق
مجموعة الاعضاء

أساسيات لغة css
في هذه الصورة رمزنا لعنصر html باللون الأخضر ، واللون الأصفر يرمز للإزاحة الداخلية padding لهذا العنصر ، واللون البرتقالي يرمز للإزاحة الخارجية margin لنفس العنصر ، وبالتالي تبين هذه الصورة ككل الحيز الفعلي الذي يحتله عنصر html في الصفحة ، إذ أن كل عنصر لديه مقدار افتراضي كقيمة للخاصية padding وآخر افتراضي كقيمة للخاصية margin يختلفان من متصفح إلى آخر.


ومن هذه الصورة نستنتج تعريفا أوضح للخاصيتين:


خاصية padding : تأخذ القيمة ب px أو em أو % ، وهي مقدار الإزاحة بين عنصر html وحدوده.
خاصية margin :تأخذ القيمة ب px أو em أو % ، وهي مقدار الإزاحة بين حدود عنصر html والعناصر الأخرى.


التطبيق العملي للخاصية margin

تستخدم الخاصية margin إما مجردة هكذا بقيمة واحدة لجميع الإتجاهات ، أو بقيمتين : الأولى ل top و bottom والثانية ل left و right ، أو بأربع قيم لكل إتجاه على حدا بدءا ب top ثم right ثم bottom ثم left في اتجاه عقارب الساعة ، أو تستخدم مع إضافة الإتجاه بالشكل التالي:
margin-top
margin-bottom
margin-right
margin-left


سنجرب ذلك مع كود html التالي:


margin_html.jpg

ديفات ب id مختلف و class واحدة سنستخدمها للتنسيقات الموحدة ، وهذا هو كود css وخاصية margin مؤجلة :


margin_style.jpg


وهذه هي النتيجة:


margin_result.jpg
سنبدأ بتطبيق قيمة واحدة لكل الإتجاهات بالنسبة للخاصية margin التي سنضعها للكلاس:


after_margin_all_style.jpg


والنتيجة تباعد الديفات عن بعضها بنفس المقدار ومن جميع الإتجاهات:


after_margin_all_result.jpg
الآن سنبدأ في تخصيص كل ديف على حدا ب margin معين وبمختلف الطرق التي تعلمناها :


margin_specified_style.jpg


والنتيجة :


margin_specified_result.jpg


هذا فقط للتمكن من صيغة الكتابة ، يمكنك تجريب القيم ومختلف الطرق على ديف واحد والملاحظة ، وإن شاء الله في المستقبل مع الأمثلة العملية الحقيقية لن يكون هناك مشكل بإذن الله.


نكتفي بهذا القدر وموعدنا في الدرس القادم مع الجزء الثاني من الإزاحة في لغة css ، وفي انتظار ذلك ، دمتم في رعاية الله وحفظه.
 

admin

عضو إداري
ادارة المنتدى

مشكور وبارك الله فيك
 

أعلى