السلام عليكم و رحمة الله و بركاته،
إذا كنت من المبتدئين في تقنية الـ CSS، ستلاحظ أن أغلب المواقع أصبحت تستخدم خاصية جديدة، يمكن التعبير عنها بخاصية “الإعدادات الافتراضية للأنماط القياسية” أو ما يعرف بـ Reset، دور هذه الخاصية أنها تقوم بإلغاء الاعدادات الافتراضية للمتصفح، فمثلا لو أنك قمت بإنشاء صفحة جدبدة و كتبت فيها“بسم الله الرحمن الرحيم”، دون أن تحدد خواص معينة لها، فإن هذه الأخيرة ستأخذ خواص المتصفح، لا من حيث اللون (الأسود)، و لا من حيث الحجم (H3)… و هو أمر قد ينتج عنه بعض الأخطاء أثناء التصميم.
لذا فإن خاصية Reset، ستساعدك في التقليل من الأخطاء المحتلمة، بالإضافة إلى أنها ستعطيك تحكم كامل في كل كبيرة و صغيرة في تصميمك.
كيف يمكنني الاستفادة من هذه الخاصية :
أولا، أنشئ ملف جديد باسم reset، و بالامتداد css.، أي reset.css، ثم ضع الكود التالي داخله ثم قم بحفظه :
ارفع الملف reset.css داخل الدليل الرئيسي لموقعك، أي داخل المجلد public_html.
الآن، قم باستدعاء الملف السابق، بوضع الكود التالي مباشرة بعد الوسم <head> :
بهذا سيتم حذف جميع الاعدادات الافتراضية التي يتم توليدها عن طريق المتصفح، و وضع إعدادات بخواص تحددها أنت. بالتوفيق.
إذا كنت من المبتدئين في تقنية الـ CSS، ستلاحظ أن أغلب المواقع أصبحت تستخدم خاصية جديدة، يمكن التعبير عنها بخاصية “الإعدادات الافتراضية للأنماط القياسية” أو ما يعرف بـ Reset، دور هذه الخاصية أنها تقوم بإلغاء الاعدادات الافتراضية للمتصفح، فمثلا لو أنك قمت بإنشاء صفحة جدبدة و كتبت فيها“بسم الله الرحمن الرحيم”، دون أن تحدد خواص معينة لها، فإن هذه الأخيرة ستأخذ خواص المتصفح، لا من حيث اللون (الأسود)، و لا من حيث الحجم (H3)… و هو أمر قد ينتج عنه بعض الأخطاء أثناء التصميم.
لذا فإن خاصية Reset، ستساعدك في التقليل من الأخطاء المحتلمة، بالإضافة إلى أنها ستعطيك تحكم كامل في كل كبيرة و صغيرة في تصميمك.
كيف يمكنني الاستفادة من هذه الخاصية :
أولا، أنشئ ملف جديد باسم reset، و بالامتداد css.، أي reset.css، ثم ضع الكود التالي داخله ثم قم بحفظه :
- الكود:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
ارفع الملف reset.css داخل الدليل الرئيسي لموقعك، أي داخل المجلد public_html.
الآن، قم باستدعاء الملف السابق، بوضع الكود التالي مباشرة بعد الوسم <head> :
- الكود:
<link rel="stylesheet" href="reset.css" type="text/css" media="screen" />
بهذا سيتم حذف جميع الاعدادات الافتراضية التي يتم توليدها عن طريق المتصفح، و وضع إعدادات بخواص تحددها أنت. بالتوفيق.
