Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. HTML & CSS

نصيحة سريعة: إنشاء ملف Reset.css بسيطة

by
Difficulty:BeginnerLength:ShortLanguages:

Arabic (العربية/عربي) translation by Ali Atwa (you can also view the original English article)

عدد كبير جداً من المصممين المبتدئين لا يدركون أهمية إنشاء ملف "reset.css". عندما يكون لديك بيئة مختلفه لكل متصفح لديه تصميم "افتراضي" خاص به، وكثيراً ما  تسأل نفسك، "لماذا لا يوجد مسافة هنا؟" لتنقذ نفسك من بعض الصداع الذي عليك تجربتة بلا شك، ستحتاج إلى إنشاء ملف تعيين بسيط. المشكلة باستخدام واحدة من العديد من الأطر الموجودة حاليا التي ليست مصممة خصيصا لك على سبيل المثال،انا لا استخدام العنصر "center" في مشاريعي. ونتيجة لذلك، لا تحتاج إلى وضعه في تصميمي الافتراضي. ومع ذلك، قد يحتاج البعض الآخر للقيام بذلك--على الرغم من أنهم يستحقون صفعة على معصمهم.. أو الأرداف إذا كنت حتى تميل لذلك.

الخطوة 1: صفرMargins و Padding

بشكل افتراضي، سيتقوم المتصفح بإضافة هوامش للعديد من العناصر. على سبيل المثال، هناك عادة حوالي 6 بكسل للهوامش على العنصر الأساسي. كمصمم، يجب أن تحدد احد هذه الأرقام! (ربما عندما يتعلق الأمر بحجم الخط-الذي هو موضوع اخر تطول مناقشته). لذلك دعونا صفر ما بخارج العناصر

الخطوة 2: السيطرة على العناصر الخاصة بك

ربما لاحظتم أن العناصر الخاصة بك تختلف في الحجم من متصفح لاخر يمكنك تغيير ذلك عن طريق تعيين حجم الخط الافتراضي إلى 100%.

تاليا، سوف نحتاج إلى تحديد الهوامش والمسافات البادئة لعناصر العنوان لدينا. أنا سازيل نوع القائمة النمطيه من عناصر القائمة. وأخيراً، سوف أحدد حجم خط مبدئي للعنصر body .

خطوة 3: التوسع

أود عادة اضافة بضعة classes شائعة استخدمها في جميع المشاريع. قد تستخدمها او لا الموضوع راجع لك

هذا هو ملف Reset.css النهائي.

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

إذا كنت ترغب في أن يكون ملف إعادة تعيين 100%، أوصى بأن يمكنك الرجوع إلى ملف  "Reset CSS"من Eric Meyer. وبدلاً من ذلك، يمكنك مراجعة YUI Reset CSS. أراك يوم الاثنين!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.