هل تعرف ما هي إعادة تعيين CSS؟ عادة، يتم كتابته أيضًا باسم Reset CSS، والذي يعيد ضبط نمط المتصفح. في المتصفحات المختلفة، يتم استخدام بعض القيم الافتراضية لمحددات CSS، على سبيل المثال، عندما لا يتم تعيين h1 على قيمة، يتم عرض حجم معين. ولكن لا تستخدم جميع المتصفحات نفس القيم، لذلك يتم استخدام CSS Reset لجعل نمط صفحة الويب يتصرف بشكل متسق في كل متصفح.
إذا كنت تستخدم CSS، فهل سبق لك استخدام CSS Reset؟ بالطبع، ربما تستخدمه ولكنك لا تعلم أنك تستخدمه، على سبيل المثال، يمكنك استخدام:
| * { الحشو: 0؛ الهامش: 0؛ |
هذه أيضًا طريقة لإعادة تعيين CSS تقوم بتعيين المساحة والهامش والحدود لجميع المحددات على 0. هذه طريقة قوية وأبسط وأكثر أمانًا، ولكنها أيضًا الأكثر استهلاكًا للموارد. بالنسبة لمواقع الويب الصغيرة، لن يؤدي استخدام هذا إلى إهدار كبير للموارد، ولكن إذا كان موقع ويب به بنية كبيرة جدًا مثل Yahoo، فأنت بحاجة فقط إلى إعادة تعيين CSS بشكل انتقائي لتقليل إهدار الموارد. فيما يلي رمز إعادة تعيين CSS الخاص بـ Yahoo، والذي يعد أيضًا أكثر طرق إعادة تعيين CSS شيوعًا. الطريقة التي حددتها YUI هي:
| الجسم، div، dl، dt، dd، ul، ol، li، h1، h2، h3، h4، h5، h6، pre، النموذج، مجموعة الحقول، الإدخال، منطقة النص، ص، الاقتباس، ال، تد { الحشو: 0؛ الهامش: 0; } طاولة { انهيار الحدود: انهيار؛ تباعد الحدود: 0؛ } مجموعة الحقول، img { الحدود: 0؛ } عنوان، تسمية توضيحية، استشهد، كود، dfn، em، قوي، ال، فار { وزن الخط: عادي؛ نمط الخط: عادي؛ } أول، أول { نمط القائمة: لا شيء؛ } التسمية التوضيحية، ث { محاذاة النص: يسار؛ } ح1، ح2، ح3، ح4، ح5، ح6 { وزن الخط: عادي؛ حجم الخط: 100%؛ } س:قبل،س:بعد { المحتوى:"; } abbr، اختصار { الحدود: 0؛ } |
حسنًا، أعتقد أنك تفهم بالفعل الغرض من إعادة تعيين CSS. ربما يمكنك أيضًا كتابة نظام إعادة تعيين CSS الخاص بك وفقًا لتفضيلاتك الخاصة. بعد كل شيء، تختلف احتياجات وعادات كل شخص. ويمكنك الرجوع إلى ما يلي:
إعادة تعيين Ateneu الشائعة لـ CSS
| أتش تي أم أل، الجسم، div، سبان، التطبيق الصغير، الكائن، iframe، h1، h2، h3، h4، h5، h6، p، blockquote، pre، a، abbr، اختصار، عنوان، كبير، استشهد، رمز، del، dfn، em، الخط، img، ins، kbd، q، s، samp، صغير، سترايك، قوي، فرعي، سوب، tt، var، dl، dt، dd، ol، ul، li، fieldset، form، label، legend، الجدول، التسمية التوضيحية، tbody، tfoot، thead، tr، th، td { الهامش: 0; الحشو: 0؛ الحدود: 0؛ الخطوط العريضة: 0؛ وزن الخط: وراثة؛ نمط الخط: وراثة؛ حجم الخط: 100%؛ عائلة الخط: وراثة؛ محاذاة عمودية: خط الأساس؛ } :التركيز {المخطط التفصيلي: 0؛} أ، أ:رابط، أ:تمت الزيارة، أ:تحوم، أ:نشط{زخرفة النص:لا شيء} الجدول { طي الحدود: تباعد الحدود منفصل: 0؛} عشر، TD {محاذاة النص: وزن الخط: عادي؛} img، iframe {border: none؛ زخرفة النص: لا شيء؛} رأ، أول {نمط القائمة: لا شيء؛} الإدخال، منطقة النص، التحديد، الزر {font-size: 100%;font-family: inherit;} حدد {الهامش: وراثة؛} hr {الهامش: 0؛ الحشو: 0؛ الحدود: 0؛ اللون: #000؛ لون الخلفية: #000؛ الارتفاع: 1 بكسل} |
إعادة ضبط CSS لكريس بوتيت
| * { محاذاة عمودية: خط الأساس؛ عائلة الخط: وراثة؛ نمط الخط: وراثة؛ حجم الخط: 100%؛ الحدود: لا شيء؛ الحشو: 0؛ الهامش: 0; } جسم { الحشو: 5 بكسل؛ } h1، h2، h3، h4، h5، h6، p، pre، blockquote، form، ul، ol، dl { الهامش: 20 بكسل 0؛ } لي، د، الاقتباس { الهامش الأيسر: 40 بكسل؛ } طاولة { انهيار الحدود: انهيار؛ تباعد الحدود: 0؛ } |
إريك ماير إعادة تعيين CSS
| html، body، div،span، التطبيق الصغير، الكائن، iframe، الجدول، التسمية التوضيحية، tbody، tfoot، thead، tr، th، td، del، dfn، em، الخط، img، ins، kbd، q، s، samp، صغير، سترايك، قوي، فرعي، سوب، tt، فار، h1، h2، h3، h4، h5، h6، p، blockquote، pre، a، abbr، اختصار، عنوان، كبير، استشهد، كود، dl، dt، dd، ol، ul، li، مجموعة الحقول، النموذج، التسمية، وسيلة الإيضاح { محاذاة عمودية: خط الأساس؛ عائلة الخط: وراثة؛ وزن الخط: وراثة؛ نمط الخط: وراثة؛ حجم الخط: 100%؛ الخطوط العريضة: 0؛ الحشو: 0؛ الهامش: 0; الحدود: 0؛ } :ركز { الخطوط العريضة: 0؛ } جسم { الخلفية: أبيض؛ ارتفاع الخط: 1؛ اللون: أسود؛ } أول، أول { نمط القائمة: لا شيء؛ } طاولة { انهيار الحدود: منفصل؛ تباعد الحدود: 0؛ } تسمية توضيحية، عشر، TD { وزن الخط: عادي؛ محاذاة النص: يسار؛ } الاقتباس: قبل، الاقتباس: بعد، س: قبل، س: بعد { محتوى: ""؛ } الاقتباس، ف { يقتبس: "" ""؛ } |