عنوان مقاله :

کاربرد های 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;
}

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

استایل آماده برای ویرایشگر متن wysiwyg

زمانی که شما از ویرایشگر wysiwyg در وبسایت های خودتان استفاده میکنید و یک سری متون را در دیتابیس ذخیره و در صفحه اصلی وبسایتان نمایش میدهید ، متوجه ای...

Gridder یک سیستم Grid بر اساس Flexbox

Gridder یک سیستم ساده Grid است که بر اساس Flexbox طراحی شده و به شما کمک میکنه تا layout بندی های خودتون رو بر اساس Flexbox طراحی کنید . این ابزار دار...

Grd فریمورک گرید سیستم css

Grd یک فریمورک css برای گرید سیستم است که خیلی سبک بوده ، یعنی چیزی در حدود 512 بایت حجم دارد و بر پایه flexbox طراحی شده است . استفاده از آن فوق العا...

css هک های که شما ممکن است ندانید

امروز من قصد دارم تا نکاتی از css به شما بگم که فکر میکنم برای شما مفید باشه . اگه شما در حال یاد گیری css هستین شاید نکاته زیادی رو از قبل یاد گرفته...

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

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