عنوان مقاله :

کاربرد های CSS Reset

گردآوری و تالیف : محمد صادق زحمتکش
تاریخ انتشار : 07 شهریور 1396
دسته بندی ها : css

احتمالا تا به حال با اصطلاح CSS Reset برخورد کرده باشید.شاید قبلا از فایلهایی با این عنوان استفاده کرده باشید.معمولا فایلهایی که با عنوان Css Reset استفاده میکنیم شامل یک سری کدهای CSS هستن که یه سری کار انجام میدن.اما واقعا باید ببینیم این فایل و کدهای داخلش چی هستن و چه کاربردی دارن.

به زبان ساده CSS Reset یک سری کدهای CSS هستن که میان تناقضاتی که بین مرورگرها هست رو برطرف میکنن.مثلا اگر یه صفحه HTML درست کنید و یک متن داخلش قرار بدید میبینید که این متن از کناره های صفحه فاصله داره.این فاصله ممکنه توی مرورگرهای مختلف فرق داشته باشه.

حالا کدهای مربوط به CSS Reset میان و این تناقضات رو رفع میکنن.یکی دونمونه از کدهاشون رو باهم بررسی میکنیم بعد لیستی از فایلهای CSS Reset براتون میذارم تا ازش استفاده کنید.

اختلافاتی که مرورگرها باهم دارن توی مواردی مثل margin , font-size , paddin , border و چند مورد دیگه است.مثلا توی مرورگر اینترنت اکسپلورر نسخه های قدیمی ترش دور عکس ها سر خود یک حاشیه میندازه که توی بقیه مرورگرها این مورد نیست.

خوب برای اینکه مرورگر IE سرخود نیاد دوی عکسها حاشیه بندازه میایم از کد زیر استفاده میکنیم :

img{
border:0
}

یا مثلا این کد :

html,body {
    margin:0;
    padding:0;
}

این کد میاد فاصله عناصر HTML رو از کناره های صفحه صفر میکنه که توی همه مرورگرها یه جور نشون داده بشه.

شاید از خودتون بپرسید که اینکار که خوب نیست!!! شاید من بخوام دور عکسام حاشیه داشته باشم یا عناصرم از کناره های فاصله داشته باشه.

حرف شما کاملا درسته اما اگر میخواید عکستون حاشیه داشته باشه باید دوباره بهش استایل بدید.کد بالا میاد کاری میکنه که عکس توی همه مرورگرها یه جور نمایش داده بشه.حالا با یک استایل دیگه میتونین استایل دلخواه رو به عکستون بدید.

خوب دیگه فکر کنم تا همینجا کافیه توضیح دادنش.حالا اگر میخواین از CSS Reset ها استفاده کنید یه سری از این کدها رو براتون میذارم که حالشو ببرید :

۱ – Yahoo CSS Reset

/* 
Yahoo! CSS Reset (YUI 2)
http://developer.yahoo.com/yui/reset/
CSSresetr.com
*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
    margin:0;
    padding:0;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
fieldset,img { 
    border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
    font-style:normal;
    font-weight:normal;
}
ol,ul {
    list-style:none;
}
caption,th {
    text-align:left;
}
h1,h2,h3,h4,h5,h6 {
    font-size:100%;
    font-weight:normal;
}
q:before,q:after {
    content:'';
}
abbr,acronym { border:0;
}

۲ – Eric Meyer’s CSS Reset

/* 
Eric Meyer's CSS Reset
http://meyerweb.com/eric/tools/css/reset/
v1.0 | 20080212
CSSresetr.com
*/
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,
b, u, i, center,
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-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
 
/* remember to define focus styles! */
:focus {
    outline: 0;
}
 
/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}
 
/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

۳ – Tripoli CSS Reset

/* 
Tripoli Reset
http://devkick.com/lab/tripoli/
CSSresetr.com
*/
* { margin: 0; padding: 0; text-decoration: none; font-size: 1em; outline: none; }
code, kbd, samp, pre, tt, var, textarea, input, select, isindex, listing, xmp, plaintext { font: inherit; font-size: 1em; white-space: normal; }
dfn, i, cite, var, address, em { font-style: normal; }
th, b, strong, h1, h2, h3, h4, h5, h6 { font-weight: normal; }
a, img, a img, iframe, form, fieldset, abbr, acronym, object, applet, table { border: none; }
table { border-collapse: collapse; border-spacing: 0; }
caption, th, td, center { text-align: left; vertical-align: top; }
body { line-height: 1; background: white; color: black; }
q { quotes: "" ""; }
ul, ol, dir, menu { list-style: none; }
sub, sup { vertical-align: baseline; }
a { color: inherit; }
hr { display: none; } /* we don't need a visual hr in layout */
font { color: inherit !important; font: inherit !important; color: inherit !important; } /* disables some nasty font attributes in standard browsers */
marquee { overflow: inherit !important; -moz-binding: none; }
blink { text-decoration: none; }
nobr { white-space: normal; }

۴ – HTML5 Doctor CSS Reset

/* 
HTML5 Doctor Reset v1.6.1
http://html5doctor.com/html-5-reset-stylesheet/
CSSresetr.com
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
body {
    line-height:1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}
nav ul {
    list-style:none;
}
blockquote, q {
    quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}
a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}
/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
}
del {
    text-decoration: line-through;
}
abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}
input, select {
    vertical-align:middle;
}

مقالات پیشنهادی

بهترین ابزارهای آنلاین CSS3

با سلام خدمت دوستان حتما برای شما پیش اومده که در css چندها خط کد نوشته و اون استایلی که مد نظرتون بوده طراحی نشده ، در عرصه وب ابزارهایی وجود دارند ک...

15 کتابخانه جالب javascript و css بهمن ۹۵

ماموریت ما در راکت این است که شما را بر اساس تکنولوژی روز طراحی وب به روز نگه داریم . به همین خاطر هم هست که ما تقریبا ماهانه یا چند هفته در میان پستی...

کم کردن حجم فایل های CSS - Javascript

با سلام خدمت دوستان در این مقاله طریقه ی فشرده سازی فایل های Css - javascript رو خدمتتون آموزش خواهم داد . هنگامی که شما چندین خط کد برای وب سایتتون م...

افکت های دوست داشتی Hover برای css

Imagehover.css یک کتابخانه دوست داشتی css است که دارای تعدادی زیادی از افکت های hover می باشد . این کتابخانه بسیار سبک و مقیاس پذیر است و دارای چیزی د...

دیدگاه های ارزشمند شما

برای ارسال نظر لازم است ابتدا وارد سایت شوید
هیچ دیدگاهی تا به این لحظه برای این موضوع ثبت نشده است