تشير إعادة تعيين CSS إلى إعادة ضبط نمط المتصفح. في المقالات السابقة على موقع 52CSS.com، تم تقديم معرفة مماثلة، لكنها لم تكن متعمقة بما فيه الكفاية. اليوم سننظر في عشرة أمثلة على طريقة إعادة تعيين CSS ونتعرف على تطبيق هذه الطريقة.
في المتصفحات المختلفة، يتم استخدام بعض القيم الافتراضية لمحددات CSS، على سبيل المثال، عندما لا يتم تعيين h1 على قيمة، يتم عرض حجم معين. ولكن لا تستخدم جميع المتصفحات نفس القيم، لذلك يتم استخدام CSS Reset لجعل نمط صفحة الويب يتصرف بشكل متسق في كل متصفح.
1. إعادة ضبط CSS بشكل عام
* {
الحشو: 0؛
الهامش: 0;
الحدود: 0؛
}
هذه أيضًا طريقة لإعادة تعيين CSS، والتي تقوم بتعيين المساحة المتروكة والهامش والحدود لجميع المحددات على 0. هذه طريقة قوية، وهي الأبسط والأكثر أمانًا، ولكنها أيضًا الأكثر استهلاكًا للموارد. بالنسبة لمواقع الويب الصغيرة، لن يؤدي استخدام هذا إلى إهدار كبير للموارد، ولكن إذا كان موقع ويب ببنية كبيرة جدًا مثل Yahoo، فأنت بحاجة فقط إلى إعادة تعيين CSS بشكل انتقائي لتقليل إهدار الموارد.
2. Ateneu Popular CSS Reset
html، body، div،span، applet، object، 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 بكسل}
3. إعادة ضبط CSS لكريس بوتيت
* {
محاذاة عمودية: خط الأساس؛
عائلة الخط: وراثة؛
نمط الخط: وراثة؛
حجم الخط: 100%؛
الحدود: لا شيء؛
الحشو: 0؛
الهامش: 0;
}
جسم {
الحشو: 5 بكسل؛
}
h1، h2، h3، h4، h5، h6، p، pre، blockquote، form، ul، ol، dl {
الهامش: 20 بكسل 0؛
}
لي، د، الاقتباس {
الهامش الأيسر: 40 بكسل؛
}
طاولة {
انهيار الحدود: انهيار؛
تباعد الحدود: 0؛
}
4. نص إعادة تعيين CSS الخاص بـ Yahoo
,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؛
}
5. إريك ماير إعادة تعيين CSS
html، body، div،span، applet، object، iframe، table، caption،
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؛
}
التسمية التوضيحية، عشر، تد {
وزن الخط: عادي؛
محاذاة النص: يسار؛
}
الاقتباس الاقتباس: قبل، الاقتباس الاقتباس: بعد، س: قبل، س: بعد {
محتوى: ""؛
}
الاقتباس، ف {
يقتبس: "" ""؛
}
6. إعادة تعيين Tantek Celik CSS
:link,:visited { text-decoration:none }
ul,ol { نمط القائمة: لا شيء }
h1,h2,h3,h4,h5,h6,pre,code { حجم الخط: 1em }
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,الإدخال
{ الهامش:0؛
img,:link img,:تمت الزيارة img { border:none }
العنوان { نمط الخط: عادي }
7. قام كريستيان مونتويا بإعادة تعيين CSS
html, body, form, fieldset {
الهامش: 0;
الحشو: 0؛
الخط: 100%/120% Verdana، Arial، Helvetica، sans-serif؛
}
h1، h2، h3، h4، h5، h6، p، قبل،
الاقتباس، ul، ol، dl، العنوان {
الهامش: 1em 0;
الحشو: 0؛
}
لي، د، الاقتباس {
الهامش الأيسر: 1em؛
}
تسمية النموذج {
المؤشر: المؤشر؛
}
مجموعة الحقول {
الحدود: لا شيء؛
}
الإدخال، التحديد، منطقة النص {
حجم الخط: 100%؛
عائلة الخط: وراثة؛
}
8. إعادة تعيين Rudeworks CSS
* {
الهامش: 0;
الحشو: 0؛
الحدود: لا شيء؛
}
أتش تي أم أل {
الخط: 62.5% "Lucida Grande"، Lucida، Verdana، sans-serif؛
ظل النص: #000 0px 0px 0px؛
}
أول {
نمط القائمة: لا شيء؛
نوع نمط القائمة: لا شيء؛
}
h1، h2، h3، h4، h5، h6، p، قبل،
الاقتباس، ul، ol، dl، العنوان {
وزن الخط: عادي؛
الهامش: 0 0 1em 0;
}
استشهد، م، dfn {
نمط الخط: مائل؛
}
رشفة {
الموقف: نسبي؛
أسفل: 0.3em؛
محاذاة عمودية: خط الأساس؛
}
فرعي {
الموقف: نسبي؛
أسفل: -0.2م؛
محاذاة عمودية: خط الأساس؛
}
لي، د، الاقتباس {
الهامش الأيسر: 1em؛
}
الكود، kbd، samp، pre، tt، var، input[type='text']، textarea {
حجم الخط: 100%؛
عائلة الخط: موناكو، "Lucida Console"، ساعي، مساحة أحادية؛
}
ديل {
زخرفة النص: خط من خلال؛
}
الإضافية، دفن {
الحد السفلي: 1 بكسل صلب #ccc؛
}
صغير، سوب، فرعي {
حجم الخط: 85%؛
}
أبر، اختصار {
تحويل النص: أحرف كبيرة؛
حجم الخط: 85%؛
تباعد الحروف: .1em؛
نمط الحدود السفلية: منقط؛
عرض الحد السفلي: 1 بكسل؛
}
أبر، اختصار {
الحدود: لا شيء؛
}
رشفة {
محاذاة رأسية: فائق؛
}
فرعي {
محاذاة عمودية: فرعية؛
}
ح1 {
حجم الخط: 2em؛
}
ح2 {
حجم الخط: 1.8em؛
}
ح3 {
حجم الخط: 1.6em؛
}
ح4 {
حجم الخط: 1.4em؛
}
ح5 {
حجم الخط: 1.2em؛
}
ح6 {
حجم الخط: 1em؛
}
أ، أ: رابط، أ: تمت الزيارة، أ: تحوم، أ: نشط {
الخطوط العريضة: 0؛
زخرفة النص: لا شيء؛
}
صورة {
الحدود: لا شيء؛
زخرفة النص: لا شيء؛
}
إم جي {
الحدود: لا شيء؛
زخرفة النص: لا شيء؛
}
التسمية، زر {
المؤشر: المؤشر؛
}
الإدخال: التركيز، حدد: التركيز، منطقة النص: التركيز {
لون الخلفية: #FFF؛
}
مجموعة الحقول {
الحدود: لا شيء؛
}
.واضح {
واضح: كلاهما؛
}
.طفو على اليسار {
تعويم: يسار؛
}
.تعويم الحق {
تعويم: حق؛
}
جسم {
محاذاة النص: مركز؛
}
#المجمع {
الهامش: 0 تلقائي؛
محاذاة النص: يسار؛
}
9. Anieto2K إعادة تعيين CSS
html، body، div،span، applet، object، iframe،
ح1، ح2، ح3، ح4، ح5، ح6، ص،
blockquote، pre، a، abbr، اختصار، عنوان، كبير،
استشهد، كود، ديل، dfn، em، الخط، img،
اعتصامات، كيلو بايت، س، ق، سامب، صغير، سترايك،
قوي، فرعي، سوب، TT، فار، dl، dt، dd، ol، ul، li،
مجموعة الحقول، النموذج، التسمية، وسيلة الإيضاح،
الجدول، التسمية التوضيحية، tbody، tfoot، thead، tr، th، td،
المركز، ش، ب، ط {
الهامش: 0;
الحشو: 0؛
الحدود: 0؛
الخطوط العريضة: 0؛
وزن الخط: عادي؛
نمط الخط: عادي؛
حجم الخط: 100%؛
عائلة الخط: وراثة؛
محاذاة عمودية: خط الأساس
}
جسم {
ارتفاع الخط: 1
}
:ركز {
الخطوط العريضة: 0
}
أول، أول {
نمط القائمة: لا شيء
}
طاولة {
انهيار الحدود: انهيار؛
تباعد الحدود: 0
}
الاقتباس الاقتباس: قبل، الاقتباس الاقتباس: بعد، س: قبل، س: بعد {
محتوى: ""
}
الاقتباس، ف {
يقتبس: "" ""
}
الإدخال، منطقة النص {
الهامش: 0;
الحشو: 0
}
ساعة {
الهامش: 0;
الحشو: 0؛
الحدود: 0؛
اللون: #000؛
لون الخلفية: #000؛
الارتفاع: 1 بكسل
}
10. إعادة تعيين CSSLab CSS
html، body، div،span، applet، object، iframe، h1، h2، h3،
h4، h5، h6، p، blockquote، pre، a، abbr، اختصار، عنوان،
كبير، استشهد، كود، ديل، dfn، em، الخط، img، ins، kbd، q، s، samp،
صغير، سترايك، قوي، فرعي، سوب، تي تي، فار، دي إل، دي تي، دي دي، أول، أول، لي،
مجموعة الحقول، النموذج، التسمية، وسيلة الإيضاح، الجدول، التسمية التوضيحية، tbody، tfoot،
ثياد، آر، ث، تد {
الهامش: 0;
الحشو: 0؛
الحدود: 0؛
الخطوط العريضة: 0؛
وزن الخط: وراثة؛
نمط الخط: وراثة؛
حجم الخط: 100%؛
عائلة الخط: وراثة؛
محاذاة عمودية: خط الأساس؛
}
:ركز {
الخطوط العريضة: 0؛
}
طاولة {
انهيار الحدود: منفصل؛
تباعد الحدود: 0؛
}
التسمية التوضيحية، عشر، تد {
محاذاة النص: يسار؛
وزن الخط: عادي؛
}
صورة، إطار iframe {
الحدود: لا شيء؛
}
أول، أول {
نمط القائمة: لا شيء؛
}
الإدخال، منطقة النص، حدد، زر {
حجم الخط: 100%؛
عائلة الخط: وراثة؛
}
يختار {
الهامش: يرث؛
}
/* إصلاح الموضع غير الصحيح للأرقام في ol في IE6/7 */
ol { الهامش الأيسر: 2em }
/* == الإصلاح الواضح == */
.مسح الإصلاح: بعد {
محتوى: "."؛
عرض: كتلة؛
الارتفاع: 0;
واضح: كلاهما؛
الرؤية: مخفية؛
}
.clearfix {العرض: مضمنة كتلة؛}
* أتش تي أم أل .clearfix {الارتفاع: 1٪؛}
.clearfix {display: block;}
هذه كلها متشابهة، مع احتياجات مختلفة وأساليب مختلفة.