Reset CSS

[owner]

يا هلا .

سوف اتطرق اليوم الى ملف او خاصية الاعدادات الافتراضية للأنماط القياسية Reset Css .

ماهو Reset Css ؟
هو ملف واحد تستطيع وضعه في ملف خاص يكون لديك لترفقه في اي ستايل او قالب او عمل تقوم بعمله وهو ثابت لا يتغير في التصاميم وعادة ما يكون بأسم reset.css

ماذا يفيدني هذا الملف ؟
يقوم هذا الملف بالغاء اعدادات الستايل الافتراضية للمتصفح . فعندما تقوم انت مثلا بأنشاء صفحة وتقوم بكتابة فيها "اهلا وسهلا بالعالم!" بدون اي خواص . فأن المتصفح يقوم بأعطائها خصائص ملف المتصفح التلقائية كاللون الاسود والحجم والمارجن ,,, الخ .
يفيدك الغاء اعدادات المتصفح الافتراضية بالتخلص او التقليل من الاخطاء المحتملة في التصميم ولتسيطر على التصميم ككل بنسبة 100%. فبهذا الملف تستطيع التحكم في كل كبيرة وصغيره في التصميم وبخواصك انت لا احد غيرك !

ماذا يحتوي هذا الملف ؟

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, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

الكود مقتبس من موقع اجنبي .!

كيف استخدمه ؟
قم بنسخ الكود السابق وضعه في ملف css فاضي ويفضل انك تعطيه اسم reset.css
وتستدعي الملف في هيدر التصميم عن طريق هذا الكود

<link rel="stylesheet" href="/reset.css" type="text/css" media="screen" />

في امان الله .

[أشرف السمهوري]

مشكوووووووووووووووووووووور

[سحاب اون لاين]

هل لهذا الملف واستخدامه علاقة
باختلاف شكل المواقع بين المتصفحات ؟

[owner]

اشرف السمهوري @ شكرا لك

هل لهذا الملف واستخدامه علاقة
باختلاف شكل المواقع بين المتصفحات ؟

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

شكرا لك على التعقيب

[مروان]

فكرة جميلة جداً

يعطيك العافية أخوي على هذا الكود.

[M. Al-Dhafeeri]

ألف شكر

[Any-Services]

شكرا جميل جدا استاذى ..

[محمد الثقفي]

الزميل owner

يعطيك ربي الف عافيه ماشاءالله فكره حلوه

بالنسبه لي ممكن ايضا اسميها global css

حيث انها خواص لجميع الصفحات او قوانين لكل الصفحات

[bmw745i]

مشكوررررررررررر

[Remano]

شكرا لك
لكن مالفرق بينه وبين الأعددات الافتراضيه للمتصفح
انت اعطيته ايضا قيما افتراضيه
هل المقصود انك بهذه الطريقه تحدد انت ماتريد وليس المتصفحات لأختلافها ؟

[owner]

شكرا لكم جميعا على الردود ..

الزميل العزيز شكرا لك على التثبيت

شكرا لك
لكن مالفرق بينه وبين الأعددات الافتراضيه للمتصفح
انت اعطيته ايضا قيما افتراضيه
هل المقصود انك بهذه الطريقه تحدد انت ماتريد وليس المتصفحات لأختلافها ؟

بأختصار انك ترجع اعدادات المتصفح للصفر . يعني لما تعمل صفحة فيها كلام <p> فأن الاعدادات راح تطلع على حسب اعدادات المتصفح الافتراضية لهذا الوسم . فتجده مختلف قليلاا بين المتصفح والاخر !

[THE STEEL]

يعطيك العافية

[sanshik]

شكرا على الشرح
لكن هل الكود بتطلب ان اعدل فيه ام اتركه كما هو؟

[owner]

THE STEEL @ ربي يعافيك

شكرا على الشرح
لكن هل الكود بتطلب ان اعدل فيه ام اتركه كما هو؟

فقط ضعه في ملف css كما اسلفت وما يحتاج الى تعديل .

[Mercedes]

صراحة لحد الان لم أفهم غاية الملف جيدا
هل الهدف منه هو جعل إعدادت موحدة لظهور العبارات التي لا تحتوي على خواص بشكل موحد على جميع المتصفحات ؟