PDA

View Full Version : مختصری در مورد CSS Reset



uthman
سه شنبه 08 مرداد 1392, 00:52 صبح
Css Reset چیست و نحوه استفاده از آن:
یکی از مشکلاتی که هر طراح با آن رو به رو شده است نمایش مختلف صحفه وب و کد های آن در مرورگرهای مختلف است.
گاهی اوقات طراحان برای نمایش یکسان صحفه وب در مرورگر های مختلف کدهای زیادی را به صحفه وب خود اضافه میکنند که هم باعث سنگین تر شدن صحفه و کاهش کارایی آن می شود.
این مشکل تا حدی برای طراحان جدی شده که ساخت سایتی با نمایش یکسان در تمام مرورگرها ،امتیاز خیلی خوب برای طراح محسوب می شود.
برای رفع این مشکل و نمایش یکسان سایت در تمامی مرورگرها ،طراحان راه حلی به نام Css Reset را پیشنهاد کرده اند.
کد زیر رو در نظر بگیرید:

<img src=”” style=”border:0”>

در تگ بالا تعریف کرده ایم که عکس بدون border نشان داده شود،ولی در نسخه هایی از IE همچنان border قرار دارد.
و یا اینکه اکثر مرورگرها تگ لینک رو با رنگ آبی و زیر ط دار نشان می دهند.
Css reset چیست؟
Css Reset مجموعه ای از استایل سی اس اس است که تمامی Style پیش فرض عناصر و تگ های Html رو که در مرورگر های مختلف متفاوت است در حالت پیش فرض قرار می دهد.با استفاده از این روش تمامی مرورگر ها دارای نمایش یکسانی از عناصر و تگ ها می باشند.
نمونه های زیادی از Css reset وجود دارد و هر شرکتی مطابق با نیاز خود یک Css Reset برای خود دارند،ولی بسیاری از طراحان حرفه ای Css Reset هایی را نوشته اند و در اختیار عموم قرار داده اند و شما می توانید از آن استفاده کنید.
نحوه تهیه Css Reset:
1- اگر در Css حرفه ای هستید می توانید هم اکنون Css Reset خود را نوشته و از آن استفاده کنید.
2- می توانید از Css Reset هایی استفاده کنید که طراحان حرفه ای در اختایر عموم قرار داده اند.
نحوه استفاده:
کد هایی Css Reset خود را در یک فایل با پسوند .css ذخیره کرده و در مرحله بعد آن را به صحفه مورد نظر اضافه کنید.
نکته:فایل Css Reset مورد نظر باید اولین فایل Css ی باشد که به صحفه include می شود ،چون باید قبل از اعمال تغییرات سایر Style های تعریف شده دیگر ،همه چیز را به حالت اول برده و باعث نمایش یکسان صحفه در مرورگر ها مختلف شود.
نمونه استفاده آن در صحفه:

<link href="Css/Reset.css" rel="stylesheet" type="text/css" />
<link href="Css/styleChild.css" rel="stylesheet" type="text/css" />


Css reset یاهو:


body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,f orm,
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;
}

منبع:
http://www.dman.ir/descArticle.aspx?id=9